تصاویر جز کلیدی هر وب سایت هستند، طبق تحقیقات بایگانی HTTP، بیش از ۶۰% از اطلاعات بارگذاری شده روی صفحات وب را، تصاویر تشکیل می‌دهند . این یک جز مهم از تقریبا  همه وب سایت ها می باشد، چه تجارت الکترونیک، اخبار، وب سایت‌های مد، وبلاگ ها و یا پورتال‌های مسافرتی، بهینه‌سازی تصویر نکته ای مهم است، و شاید تصاویر آخرین نکته ای باشد که در بهینه سازی سایت به آن توجه می کنیم، اگر شما به دنبال افزایش سرعت سایت خود هستید، با بهینه سازی تصاویر سنگین می توانید آن را بهبود ببخشید. بهینه سازی تصاویر روی وب سایت شما را می‌توان به طور گسترده به سه دسته تقسیم کرد: آپلود ضعیف،آپلود متوسط، آپلود سریع. در این مقاله تکنیک هایی را مورد بحث و بررسی قرار می دهیم، که شما می‌توانید آن را امروز اجرا کنید، تا پیشرفت قابل‌توجهی در بهینه‌سازی وب سایت تان داشته باشید.

تغییر اندازه تصاویر

این یک اجبار است که باید وجود داشته باشد، تصاویر خود را به طور دقیق، اندازه آن چه که در وب سایت شما مورد نیاز است، تغییر دهید. در این مقاله راجع به تغییر اندازه تصاویر با استفاده از CSS و HTML صحبت نمی‌کنیم، بلکه در مورد تغییر اندازه تصاویر روی سرور، و سپس انتقال آن به مرورگر  صحبت می‌کنیم. برای مثال، شما یک تصویر px3000*4000px  برای محصولی دارید، و می‌خواهید در وب سایت تجارت الکترونیک شما فهرست شود. با این حال در وب سایت تان باید تصاویر بسیار کوچک‌تری از این محصول را نشان دهید . این تصویر می‌تواند یک تصویر px200*300px بر روی فهرست محصول، و px800*1000px روی صفحه جزئیات محصول باشد. دقت کنید که تصویر اصلی را قبل از ارسال آن به مرورگر مشخص کنید. تصاویر تغییر سایز شده، بسیار کوچک‌تر از تصویر اصلی هستند و بسیار سریع‌تر از تصویر اصلی بار خواهند شد. به نظر من ، تغییر سایز اشتباه تصاویر، بزرگ‌ترین حوزه بهینه‌سازی در بیشتر وب سایت‌ها است. و اغلب ما به عنوان توسعه دهندگان سایت، تمایل داریم آن را نادیده بگیریم. سناریوی زیر را در نظر بگیرید:

شما با تصاویر کافی برای وب سایت جدید خود شروع به کار می‌کنید، چند ماه بعد، چیدمان وب سایت شما تغییر می‌کند، و بنابراین نیازمندی‌های تغییر ابعاد برای  تصاویر شما نیز شروع می‌شود. با این حال، به جای ایجاد تصاویر جدید برای برآورده کردن الزامات ابعاد جدید ، که می تواند کار زمان گیری باشد، شما با یک جایگزین می توانید آن را انجام دهید. برای مثال شما یک تصویر px200*300px دارید، ولی با ساختار سایت شما  تصویر px200*200px کار می‌کند. حدس می‌زنم این اتفاق برای همه افتاده باشد. 

در مثال بالا، تفاوت ممکن است برای یک تصویر تکی برحسب کیلوبایت کم به نظر برسد. اما حدود ۲۱ درصد کاهش داشته است. این تفاوت کوچک که برای بسیاری از تصاویر اضافه شده‌، وجود دارد است، پتانسیل سرعت بخشیدن به وب سایت شما و کاهش مصرف پهنای باند شما را تا ۲۱ درصد دارد. بهترین سناریو داشتن یک سرور تصویر است که می‌تواند تصویر را به هر بعد داده‌شده،درست کرده ، و با تغییر نشانی اینترنتی تصویر تغییر دهد. به این طریق هر زمان که ابعاد تصویر شما تغییر کند، تمام چیزی که نیاز دارید که تصاویر جدیدتان را بگیرید، این است که ابعاد آن را در نشانی اینترنتی مشخص کنید.

بهینه سازی تصاویر

قدم بعدی درافزایش سرعت سایت شما، انتخاب فرمت مناسب و کیفیت برای هر تصویر در وب سایت تان است.JP ، PNG و GIF متداول‌ترین فرمت های تصویر هستند، که در حال حاضر در وب مورد استفاده قرار می‌گیرند؛ و هر کدام برای موارد استفاده متفاوت مناسب هستند. یک فرمت تصویر نسبتا  جدید دیگری به نام WebP وجود دارد که بهترین فرمت های تصویر را با هم ترکیب می‌کند، ۳۰ % کوچک‌تر از سایز تصویر نشان می دهد، و تقریبا ً ۷۵ درصد از مرورگرهای امروزی آن را پشتیبانی می کنند.

با توجه به مزایای عملکرد فرمت WebP که در تصویر بالا قابل شاهده است، شما باید تصاویر خود را در هر جایی که ممکن است به فرمت WebP منتقل کنید. در دیگر مرورگرها، شما می‌توانید به ارائه فرمت تصویر اصلی ادامه دهید . کیفیت تصویر به سادگی یک اندازه از نحوه ظاهر تصویر است. یک رابطه مستقیم بین کیفیت تصویر و اندازه تصویر وجود دارد . کیفیت بالاتر منجر به اندازه تصویر بالاتر و در نتیجه یک وب سایت کند می‌شود. یک راه ساده برای بهینه سازی فرمت و کیفیت تصاویر، استفاده از ImageKit برای تحویل تصاویرتان است. آن به طور خودکار یک تصویر را به WebP در هر جایی که ممکن است تبدیل می‌کند، و همچنین کیفیت تصویر را در زمان واقعی خود بهینه می‌کند.

ساخت تصاویر برای تلفن همراه

در دنیای امروز ، اگر در مورد راه‌اندازی یک وب سایت جدی هستید، بی‌توجهی به مصرف کنندگان تلفن همراه تاوان دارد. داده‌ها نشان می دهد، که تقریبا  ۶۰ درصد از ترافیک جهان از دستگاه‌های همراه نشات می‌گیرد، در حالی که تلفن‌های همراه با شبکه‌های موبایل قدرتمند شده‌اند و شبکه‌های تلفن همراه بهتر شده‌اند، داده‌ها حاکی از آن هستند که سرعت داده‌های تلفن همراه آهسته‌تر از سرعت‌های باند وسیع است. زمینه‌هایی در کشورهای مختلف وجود دارند، که ارتباط داده‌های تلفن همراه با آن‌ها در میان است. بنابراین ، مهم است که هنگام طراحی تجربه‌های وب برای موبایل دقت بیشتری داشته باشید. اگر یک وب سایت واکنش گرا برای دسکتاپ وموبایل دارید، می‌توانید با استفاده از تصاویر واکنشی، تغییرات خود را انجام دهید. همچنین با برچسب های تصاویر واکنشی، مثل ” srcset” و ” size ” شما می‌توانید مرورگر را با لیستی از یک تصویر واحد، و تعریفی از اندازه تصویر نسبی در صفحات مختلف فراهم کنید؛ سپس مرورگر بهترین اندازه تصویر را بر روی یک وسیله خاص از فهرست موجودشما، و  براساس ابعاد دستگاه و چیدمان آن، مشخص می کند.

ویژگی “size” اطلاعاتی در مورد چیدمان تصویر می‌دهد، و ویژگی “srcset” فهرست تصویر را با عرض واقعی مشخص‌شده، در برابر هر نشانی اینترنتی می‌دهد. عامل دیگری که با دستگاه‌های تلفن همراه به تصویر می آید، نسبت پیکسل دستگاه یا مقدار DPR آن است. گوشی‌های تلفن همراه مدرن دارای صفحات تراکم بالایی هستند که پیکسل‌های بیشتری را در یک اینچ مربع قرار می‌دهند. ImageKit به شما یک پارامتر DPR، مبتنی بر URL هایی با اندازه و پارامترهای محصول را ارایه می‌دهد، و همچنین از نظرات مشتری پشتیبانی می‌کند،که این موضوع استفاده از تصاویر واکنش گرا را بسیار آسان می‌سازد، و تصاویر کاملی را در سراسر دستگاه‌ها به ارمغان می‌آورد.

آپلود منابع کمتر  

حتی بعد از اینکه همه تصاویر خود را بهینه سازی کردید، بارگذاری بیش از حد آن ها موجب کاهش سرعت وب سایت شما است، و همچنین تاثیر بدی بر تجربه کاربری خواهد داشت. من طرفدار این نیستیم که ما باید از تصاویر کمتر استفاده کنیم، اما مواردی وجود دارد که ما می توانیم از استفاده زیاد از تصاویر اجتناب کنیم، یا از بارگذاری آن ها جلوگیری کنیم. به عنوان مثال، به جای بارگذاری تصاویر می توانید دکمه ها، گرادیان و دیگر عناصر پیشرفته را با استفاده از CSS ایجاد کنید.

دیگر تکنیک مهم که می‌توانید از آن استفاده کنید، بارگذاری تنبل برای تصاویرتان است . بار کردن تنبل به این معنی است، که ما بارگذاری تصاویری که فورا مورد نیاز نیستند را، به تعویق بیاندازیم. به طور معمول ، هر تصویری که برای کاربر در صفحه نمایش  قابل‌مشاهده نیست، می‌تواند در یک قسمت دیگر بارگذاری شود. موردی را در نظر بگیرید، که در آن ۱۰۰ محصول در صفحه وب خود دارید. اگر شما تمام ۱۰۰ تصویر محصول را همزمان، و در همان ابتدا درخواست کنید، زمان بارگذاری را کاهش می‌دهد. این تصاویر برای پهنای باند شبکه و منابع CPU با دیگر اقلام حیاتی روی صفحه مانند CSS و JS رقابت می‌کنند. با بارگذاری تنبل، ۳۰ تصویر که در ابتدا برای کاربر قابل‌رویت هستند . سپس ، زمانی که کاربر شروع به حرکت در صفحه می‌کند ، ما بار دیگر بارگذاری تصاویر را ادامه خواهیم داد. این کار به بهبود زمان بارگذاری اولیه و بهبود تجربه کاربری کمک می‌کند . مواردی وجود خواهد داشت که در آن کاربر در کل صفحه جستجو نمی‌کند، و از این رو برخی از تصاویر اصلا  بارگذاری نخواهند شد. بنابراین، شما همچنین صرفه‌جویی در هزینه پهنای باند برای تحویل تصویر را نیز به پایان می‌رسانید.