جلسه ۴۳ – رفع ارور Serve images in next-gen formats

سلام همراهان عزیز میزفا
از مجموعه مقالات آموزش جی تی متریکس و از سایت میزفا همراه شما هستیم. تو جلسه قبلی درباره رفع خطای Replace large JavaScript libraries with smaller alternatives صحبت کردیم و در این جلسه به آموزش برطرف کردن ارور Serve images in next-gen formats در جی تی متریکس می‌پردازیم. این خطا مربوط به بهینه سازی تصاویر سایت و به‌طور دقیق‌تر، مربوط به استفاده از فرمت مدرن برای تصاویر سایت هست. در ادامه درباره فرمت WebP و مزایای استفاده از اون به شما خواهیم گفت.
لطفا تا پایان با میزفا همراه باشید.

خلاصه خطای Serve images in next-gen formats

میزان سختی: **
روی چه مواردی تاثیر می‌ذاره: خطای Avoid enormous network payloads

علت ایجاد خطای Serve images in next-gen formats چیست؟

در حال حاضر بیشتر وبسایت‌ها از فرمت JPEG و یا PNG برای تصاویر استفاده می‌کنند. این ۲ فرمت که از حدود ۱۹۹۰ مورد استفاده قرار گرفتند، مدت‌ها ست که از بهترین و پراستفاده‌ترین فرمت‌های تصاویر محسوب میشن. اما مثل هر چیز دیگه‌ای، JPEG و PNG هم دارند به مرور جایگزین‌های بهتر و مدرن‌تری پیدا می‌کنند. فرمت‌هایی مثل JPEG 2000 و JPEG XR و WebP که نسل جدید فرمت تصاویر سایت هستند و دارند به مرور فراگیر و بیشتر استفاده میشن. اما چرا باید از فرمت‌های نسل جدید برای تصاویر سایت استفاده کنیم و اصلا چرا خطای Serve images in next-gen formats ایجاد شده؟

اصولا فرمت‌های جدیدتر (مخصوصا فرمت WebP) با حفظ کیفیت تصویر، حجم کمتری نسبت به همون عکس با فرمت JPEG یا PNG دارند. به‌طور میانگین تصاویر WebP می‌تونند حجم ۲۵٪ تا ۵۰٪ کمتر از تصاویر JPEG و PNG داشته باشند. درحالیکه تفاوتی هم بین WebP و این تصاویر از نظر کیفیت دیده نمیشه. پس منطقیه که از این فرمت برای تصاویر سایت استفاده کنیم و از این طریق حجم صفحات رو کاهش بدیم و باعث رفع ارور Serve images in next-gen formats و افزایش سرعت سایت بشیم.

برای استفاده از فرمت جدید تصاویر فقط یه مشکل وجود داره و اون هم پشتیبانی مرورگرها از این نوع فرمت‌هاست. در زمان نوشتن این مقاله، فرمت JPEG 2000 فقط توسط مرورگر Safari پشتیبانی میشه و به همین دلیل استفاده ازش رو پیشنهاد نمی‌کنیم. فرمت JPEG XR هم فقط توسط مرورگر Internet Explorer پشتیبانی میشه و باز هم پیشنهاد نمی‌کنیم. اما فرمت WebP پشتیبانی خیلی بهتری داره و توسط نسخه‌های جدیدتر مرورگرهای معروفی مثل کروم، فایر فاکس، Opera و Edge کاملا پشتیبانی میشه. همچنین مرورگر Safari هم این فرمت رو به‌صورت نسبی پشتیبانی می‌کنه و احتمالا تو نسخه‌های جدیدتر، Safari هم پشتیبانی کامل رو برای WebP فراهم کنه. البته باید حواسمون باشه که این پشتیبانی‌ها مربوط به نسخه‌های جدید این مرورگرهاست و احتمالا تعدادی از کاربران ما از مرورگرهای آپدیت نشده و نسخه قدیمی استفاده می‌کنند. هرچند این موضوع هم راه حل‌هایی داره که در ادامه بهش اشاره می‌کنیم، اما به‌طور کلی استفاده از فرمت جدید برای تصاویر سایت تا حدی ریسک محسوب میشه و شاید بعضی کاربران که از مرورگرهای قدیمی استفاده می‌کنند با مشکل مواجه بشن. پس تصمیم گیری با شماست که آیا به خطای Serve images in next-gen formats توجه کنید و از فرمت WebP استفاده کنید و باعث کاهش حجم صفحات بشید یا همچنان به استفاده از فرمت‌های قدیمی ادامه بدید.
ما چند وقتیه که تو میزفا از فرمت WebP استفاده می‌کنیم و تا الآن بازخورد منفی دریافت نکردیم. اما این کار باعث شده حجم تصاویر و در نتیجه حجم صفحات سایت کاهش پیدا کنه و تجربه کاربری و سرعت لود صفحه به دلیل دانلود منابع حجیم با مشکل مواجه نشه.

پس به‌عنوان جمع بندی، استفاده از فرمت WebP باعث بهینه سازی سرعت سایت میشه و یه فایل WebP حجم کمتری از فایل JPEG و PNG که فشرده سازی شدند داره. اما همه مرورگرها از فرمت WebP پشتیبانی نمی‌کنند و اگه پشتیبانی کنند، ممکنه کاربران از نسخه‌های قدیمی مرورگرها استفاده کنند و با مشکل مواجه بشن.

چطور خطای Serve images in next-gen formats را برطرف کنیم؟

طبق توضیحاتی که دادیم، روش برطرف کردن خطای Serve images in next-gen formats کار سختی نیست و فقط لازمه که تصاویر سایت رو به فرمت WebP تبدیل کنیم. با کلیک روی این خطا در منوی Structure در سایت GTmetrix لیست عکس‌های JPEG و PNG و BMP که تغییر فرمت به WebP باعث بهینه سازی اونها میشه رو مشاهده می‌کنیم. در این گزارش، جی تی متریکس فقط عکس‌هایی رو مشخص می‌کنه که با تغییر فرمت، حداقل ۸ کیلوبایت کاهش حجم داشته باشند.

۱. تبدیل به فرمت WebP با افزونه در وردپرس

دوستان عزیزی که از وردپرس استفاده می‌کنند، می‌تونند با استفاده از افزونه عکس‌هاشون رو به WebP تبدیل کنند. با استفاده از افزونه‌هایی مثل Imagify یا Short Pixel می‌تونید به‌سادگی عکس‌ها رو به فرمت WebP تبدیل کنید. به‌طور کلی اگه دنبال استفاده از بهترین پلاگین ها برای بهینه سازی تصاویر می‌گردید، حتما مقاله بهترین افزونه بهینه سازی عکس در وردپرس رو مطالعه کنید.

۲. تبدیل به فرمت WebP با ابزارهای آنلاین

اگه سایت شما تعداد تصاویر زیادی نداره، می‌تونید به‌صورت دستی و با استفاده از ابزارهای آنلاین عکس‌ها رو به فرمت WebP تبدیل کنید. سایت‌های Ezgif و WebP Converter گزینه‌های خوبی برای انجام این کار هستند.

اما اگه قصد دارید تعداد عکس‌های زیادی رو به فرمت WebP تبدیل کنید، می‌تونید از Bulk Images to WebP Converter استفاده کنید که یه Extension کروم هست و برای تبدیل تعداد زیاد تصاویر به فرمت WebP استفاده میشه.

۳. تبدیل به فرمت WebP با افزونه فوتوشاپ

از اونجایی که خیلی از دوستان از ابزار قدرتمند فوتوشاپ برای بهینه سازی تصاویر استفاده می‌کنند، تصمیم گرفتم روش تبدیل به WebP با فوتوشاپ رو هم به این مقاله اضافه کنم. همونطور که می‌دونید خود فوتوشاپ ورودی و خروجی WebP رو پشتیبانی نمی‌کنه. اما با نصب یه افزونه میشه این مشکل رو برطرف کرد.

شما می‌تونید این افزونه رو برای ویندوز یا مک از اینجا دانلود کنید. سپس برای نصب در ویندوز مراحل زیر رو طی کنید:

• فایل WebPShop.8bi رو که در مسیر bin\WebPShop_0_3_2_Win_x64 قرار داره کپی کنید.
• سپس این فایل رو در پوشه نصب فوتوشاپ روی سیستمتون که معمولا C:\Program Files\Adobe\Adobe Photoshop\Plug-ins هست، Paste کنید.
• برنامه فوتوشاپ رو ببندید و دوباره باز کنید.

برای نصب روی مک هم مراحل زیر رو طی کنید:

• فایل WebPShop.plugin رو که در مسیر bin/WebPShop_0_3_2_Mac_x64 قرار داره کپی کنید.
• این فایل رو در پوشه نصب فوتوشاپ روی سیستم که معمولا Applications/Adobe Photoshop/Plug-ins هست، Paste کنید.
• برنامه فوتوشاپ رو ببندید و دوباره باز کنید.
• در نسخه‌های macOS +10.15 اگه با پیغام WebPShop.plugin cannot be opened because the developer cannot be verified مواجه شدید، کافیه دستور sudo xattr -r -d com.apple.quarantine “/Applications/Adobe Photoshop 2020/Plug-ins/WebPShop.plugin” رو در Terminal سیستمتون Run کنید.

پس از نصب این افزونه، امکان باز کردن فرمت WebP در فوتوشاپ و همچنین ذخیره فایل‌ها با این فرمت امکان پذیر میشه.

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

برطرف کردن مشکل عدم پشتیبانی از WebP

روش‌های تبدیل تصاویر به WebP و رفع ارور Serve images in next-gen formats رو گفتیم. اما مهم‌ترین چالشی که باعث میشه افراد در استفاده از WebP برای تصاویر سایتشون تردید داشته باشند، عدم پشتیبانی مرورگرها از این فرمت مدرن هست. شما می‌تونید سازگاری دقیق مرورگرها با فرمت WebP رو اینجا ببینید. اما در ادامه می‌خوایم ببینیم چطور میشه مشکل عدم پشتیبانی از WebP رو برطرف کرد؟

برای حل این مشکل باید کاری کنیم تا برای مرورگرهایی که از WebP پشتیبانی می‌کنند همین فرمت استفاده بشه و برای سایر مرورگرها از یه فرمت عمومی مثل JPEG استفاده بشه. بنابراین نیازه عکس‌هامون رو با هر ۲ فرمت آپلود کنیم و به‌جای تگ <img> از یه تگ <picture> استفاده می‌کنیم. به این صورت:

<picture>
  <source type="image/webp" srcset="flower.webp">
  <source type="image/jpeg" srcset="flower.jpg">
  <img src="flower.jpg" alt="">
</picture>

درون تگ <picture> می‌تونیم از یک تگ <img> و چند تگ <source> استفاده کنیم. تگ <source> منبع فایل رو مشخص می‌کنه. ترتیب استفاده از تگ‌های <source> خیلی مهمه. چون مرورگر اولین تگ <source> که ازش پشتیبانی کنه رو اجرا می‌کنه. پس باید تو اولی از عکس WebP استفاده کنیم. اما اگه مرورگر هیچ‌کدوم از تگ‌های <source> رو پشتیبانی نکنه، اون موقت سراغ تگ <img> میره. لازمه بدونید که از این تگ حتما باید استفاده بشه (حتی اگه تو یکی از تگ‌های <source> از فرمت تگ <img> استفاده کرده باشیم). تگ <img> باید بعد از تگ‌های <source> بیاد. اگه مرورگری از <picture> پشتیبانی نکنه، تگ <img> رو بررسی و عکس رو لود می‌کنه. در این روش، باید در تگ <img> از فرمت‌های عمومی مثل JPEG و PNG استفاده بشه و در تگ <source> اولی از فرمت مدرن WebP.

البته به مرور که کاربران از مرورگرهای جدیدتر استفاده کنند، دیگه چنین مشکلی نخواهیم داشت و شاید لازم نباشه از این روش استفاده کنیم.

جمع بندی

در این مقاله میزفا درباره روش برطرف کردن خطای Serve images in next-gen formats در GTmetrix جدید صحبت کردیم. این خطا مربوط به بهینه سازی عکس‌های وبسایت و استفاده از فرمت‌های مدرن مثل فرمت WebP هست و ما چندین راهکار موثر برای رفع ارور پیشنهاد کردیم. امیدوارم این آموزش برای شما مفید بوده باشه. تو جلسه بعدی درباره خطای Serve static assets with an efficient cache policy صحبت می‌کنیم که مربوط به اهمیت کش (Cache) در سرعت سایت میشه.

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