اصول و تکنیک‌های بهینه‌سازی تصاویر

در ادامه ی بررسی توصیه های وب سایت Google PageSpeed Insights به قسمت پنجم از این سری و توصیه ی دهم رسیده ایم. توصیه های ارائه شده در این سری آموزشی از روش های بسیار عالی و عملی برای ارتقاء ranking سایت شما در صفحات SERP هستند. بنابراین سعی کنید آن ها را با جدیت دنبال کنید.

توصیه دهم: Properly Size Images

«انتخاب سایز صحیح تصاویر» که هم مربوط به حجم و هم مربوط به رزولوشن تصویر است، یک زیر مجموعه از توصیه های مربوط به گروه رسانه (فیلم، تصویر، صوت و...) می باشد. فایل های چند رسانه ای مانند تصاویر و فایل های ویدیویی سنگین ترین بخش هر وب سایت هستند و اگر به شکل درستی بهینه سازی نشوند، می توانند عملکرد سایت شما را دچار اختلال شدید کنند.

همه ی ما با این مشکل آشنا هستیم بنابراین راه حل چیست؟ قدم اول برای حل این مشکل، جلوگیری از به وجود آمدن آن است! برخی از برنامه نویسان مبتدی متوجه این موضوع نیستند و از تصاویری با سایز بسیار بزرگ استفاده می کنند. سپس برای اینکه محتوای صفحات به هم نریزد با استفاده از کدهای CSS این تصاویر را کوچک می کنند! این یک اشتباه بزرگ است! چرا از اول کاربر را مجبور به دانلود تصاویر بزرگ کنیم که بعدا بخواهیم با کدهای CSS آن را کوچک کنیم؟ چنین رفتاری باعث کُند شدن صفحات ما می شود در صورتی که می توانستیم از همان ابتدا سایز تصویر را در برنامه های ویرایش تصویر (مثلا فتوشاپ) تصحیح کنیم و سپس آن را در وب سایت خود قرار دهیم.

یکی دیگر از راه های حل این مشکل استفاده از responsive images (تصاویر واکنش گرا) می باشد. این تکنیک کاری می کند که سرور ما بر اساس اندازه ی دستگاه کاربر (تلفن همراه یا لپتاپ و...) تصاویر مختلفی را ارسال کند تا تمام کاربران یک سایز مشخص را دریافت نکنند. روش استفاده از این تکنیک بسیار ساده است. در حالت عادی برای استفاده از تصاویر به شکل زیر عمل می کنیم:

<img src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

یعنی یک تگ ساده ی img! اما اگر از attribute های srcset و sizes برای همین تگ img استفاده کنیم، آن را تبدیل به یک تصویر واکنش گرا کرده ایم.

<img srcset="elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 600px) 480px,
            800px"
     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

بگذارید کد HTML بالا را برایتان توضیح بدهم:

• ابتدا نیاز به یک تصویر داریم که آن را به Srcset می دهیم (در اینجا elva-fairy-480w.jpg).
• سپس یک بار اسپیس می زنیم.
• حالا سایز تصویر را به پیکسل مشخص می کنیم (480w).
• در قسمت بعد sizes یک media condition را تعریف می کند (در اینجا: عرض صفحه کمتر از 600 پیکسل). اگر این شرط صحیح بود تصویری که عرض 480px داشته باشد بارگذاری می شود و در غیر این صورت همان 800 پیکسل.

حالا اگر مرورگری با عرض 480 پیکسل (کمتر از 600 پیکسل تعیین شده - مثلا یک تلفن هوشمند) وارد صفحه ی ما شود، تصویری بارگذاری خواهد شد که عرض 480 پیکسل داشته باشد (یعنی elva-fairy-480w.jpg) چرا که شرط این تصویر نزدیک تر است. این تصویر 65 کیلوبایت حجم داشته در حالی که نسخه ی 800 پیکسلی آن 128 کیلوبایت حجم دارد بنابراین 65 کیلوبایت را ذخیره کرده ایم و کاربر مجبور به دانلود آن نشده است. تصور کنید در یک وب سایت بزرگ چه تاثیری خواهد داشت!

نکته: مرورگرهای قدیمی از این قابلیت پشتیبانی نمی کنند اما مشکلی نیست. اگر دقت کنید پس از sizes یک src ساده را هم ذکر کرده ایم که برای این مرورگرها است. اگر مرورگر به روز و مدرن باشد از srcset استفاده می کند اما اگر قدیمی باشد آن کدها را نادیده گرفته و همان تصویر مشخص شده در Src را بارگذاری می کند.

توصیه یازدهم: Defer Offscreen Images

شاید «به تعویق انداختن بارگذاری تصاویر خارج از صفحه» کمی گنگ باشد اما در اصل کار تقریبا ساده ای است. این مبحث همان مبحث lazy loading است؛ یعنی به جای بارگذاری تمام تصاویر موجود در صفحه به صورت یکجا، می توانیم تنها تصاویری را بارگذاری کنیم که به محض باز شدن سایت دیده می شوند.

اگر از وب سایت های وردپرسی استفاده می کنید، پلاگین های مختلفی برای انجام این کار وجود دارند؛ به طور مثال a3 Lazy Load و  Lazy Load by WP Rocket از موارد معروف هستند.

توصیه دوازدهم: Efficiently Encode Images

«encode کردن بهینه ی تصاویر» مربوط به بحث فشرده سازی است. تا اینجا در رابطه با تاخیر در بارگذاری تصاویر صحبت کردیم اما مبحث دیگر کاهش سایز هر تصویر در حد ممکن است. از پلاگین های مشهور فشرده سازی می توان به Imagify و Smush اشاره کرد اما بهترین حالت آن استفاده از تصاویر webp است که قبلا در مورد آن ها توضیح داده بودم و توصیه ی بعدی گوگل نیز همین است. همچنین بهتر است از gif ها دوری کنید چرا که یکی از قدیمی ترین فرمت های موجود هستند که به هیچ عنوان بهینه به حساب نمی آیند.

توصیه سیزدهم: Serve Image in Next-Gen Formats

«استفاده از فرمت های نسل بعدی» همانطور که گفتم یکی از بهترین راه حل های کاهش حجم تصاویر استفاده از فرمت های جدیدی مثل webp می باشد و از نظر گوگل استاندارد جدید مرورگرها خواهند بود.

شاید با خودتان بگویید که وب سایت من در حال حاضر تعداد زیادی تصویر دارد و تبدیل همه ی آن ها به webp کار بسیار سختی است. با اینکه حرف شما درست است اما اگر وب سایت شما وردپرسی باشد می توانید از پلاگین هایی مانند Imagify و Smush برای این کار استفاده کنید که کارتان را بسیار راحت تر می کنند.

توصیه چهاردهم: Use Video Formats for Animated Content

Gif ها به دلیل محبوبیتی که در اینترنت دارند هنوز هم استفاده می شوند اما از نظر سایز و حجم اصلا بهینه نیستند و بارگذاری آن ها در مرورگر سنگین خواهد بود. به همین دلیل گوگل به شما پیشنهاد می کند که برای افزایش سرعت و در نتیجه ارتقا ranking سایت به جای استفاده از gif ها از فرمت های ویدیویی مثل mp4 استفاده کنید تا هم حجم بسیار کمتری داشته باشید و هم سرعت بارگذاری صفحاتتان بالاتر برود.

تبدیل فایل های تصویری خود از gif به mp4 کار خیلی آسانی نیست. در واقع به جای gif دو گزینه دارید: یا mp4 و یا WebM که یک فرمت جدید ویدیویی است و هنوز در میان مرورگرها جا نیفتاده است. بهترین روش تبدیل gif استفاده از ابزار بسیار معروفی به نام  FFmpeg است. زمانی که این ابزار را طبق راهنمای سایت برای خود دانلود کردید به پنجره ی ترمینال بروید و دستور زیر را در آن تایپ کنید:

ffmpeg -i input.gif output.mp4

به جای input.gif باید gif مورد نظرتان را بگذارید تا تبدیل به فایلی به نام output.mp4 (یا هر نامی که انتخاب کرده اید) بشود.

همچنین اگر می خواهید فایل ویدیوی شما دقیقا شبیه به یک gif در مرورگر نمایش داده شود می توانید ویدیوی خود را به شکل زیر به صفحه اضافه کنید:

<video autoplay loop muted playsinline>
<source src="output.mp4" type="video/mp4">
</video>

گوگل توضیحات کاملی در رابطه با تبدیل gif به mp4 دارد که پیشنهاد می دهم آن را مطالعه کنید.

منبع: سایت Kinsta