نحوه رفع ارور Serve Images in Next-Gen Formats

هنگامی که وب سایت خود را در Google PageSpeed ​​Insights یا دیگر ابزار‌های تست سرعت اجرا می کنید، ممکن است با خطای Serve images in nextgen format مواجه شوید. در چنین مواردی، استفاده ازفرمت‌های نسل جدید تصاویر می‌تواند به بهبود سرعت بارگذاری تصاویر و کاهش حجم فایل بدون افت کیفیت کمک کند. فرمت‌های تصویری مدرن، ، یک راه عالی برای اطمینان از بهینه‌سازی وب‌سایت شما برای حداکثر کارایی است و در عین حال بهترین تجربه را برای کاربران خود فراهم می‌کند. در این مقاله قصد داریم به آموزش نحوه رفع ارور Serve Images in Next-Gen Formats بپردازیم. پس تا انتهای این مقاله با نجوانت همراه باشید تا راهکارهای لازم را بیاموزید.

خطای Serve Images in Next-Gen Formats چیست؟

پیش از آموزش نحوه رفع ارور Serve Images in Next-Gen Formats، باید بدانید که علت ایجاد خطای Serve images in next-gen formats چیست؟حتما همه شما با فرمت‌های تصویری کلاسیک مانند JPEG، GIF و PNG آشنا هستید. این فرمت‌ها سال‌هاست که مورد استفاده قرار می‌گیرند و هرکدام مزایا و معایب خود را دارند. برای مثال، تصاویر JPEG حجم کمی دارند ولی کیفیت آن‌ها همیشه به اندازه کافی بالا نیست. از طرف دیگر، PNG‌ها کیفیت بالایی دارند ولی حجم فایل‌های آن‌ها بزرگ‌تر است. این مسئله یک چالش را برای طراحان وب مطرح می‌کند: آیا می‌خواهیم تصاویری با کیفیت بالا داشته باشیم که سرعت بارگذاری وب‌سایت را کاهش می‌دهند یا تصاویری با کیفیت پایین‌تر ولی با سرعت بارگذاری بهتر؟

حقیقت این است که در گذشته پاسخ قطعی برای این سوال وجود نداشت. با گذشت زمان و پیشرفت تکنیک‌های بهینه‌سازی وب، فرمت‌های تصویری نسل جدیدی مانند JPEG 2000، JPEG XR و WebP معرفی شدند. این فرمت‌ها ویژگی‌های بهتری در زمینه فشرده‌سازی و کیفیت دارند. استفاده از این فرمت‌های مدرن به ما امکان می‌دهد تا اندازه فایل‌ها را به میزان قابل توجهی کاهش دهیم و همچنان کیفیت را حفظ کنیم. از بین این فرمت‌های جدید، WebP به عنوان یک استاندارد جدید برای وب نزدیک‌ترین گزینه است.

برای استفاده از فرمت‌های تصویری پیشرفته، مشکل اصلی پشتیبانی مرورگرهاست. در زمان نگارش این مقاله، فرمت JPEG 2000 فقط توسط مرورگر Safari پشتیبانی می‌شود، بنابراین استفاده از آن توصیه نمی‌شود. فرمت JPEG XR هم فقط توسط مرورگر Internet Explorer پشتیبانی می‌شود و به همین دلیل استفاده از آن نیز مناسب نیست. اما فرمت WebP پشتیبانی بسیار بهتری دارد و توسط نسخه‌های جدیدتر مرورگرهای معروفی مانند کروم، فایرفاکس، اپرا و اج به خوبی پشتیبانی می‌شود. در پاراگراف بعد از مقاله برطرف کردن خطای Serve Images in Next-Gen Formats، بیشتر به مزایا و معایب فرمت WebP می پردازیم.

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

احتمالا تا اینجای مقاله آمده اید تا با نحوه رفع ارور Serve Images in Next-Gen Formats آشنا شوید. راه های زیادی برای برطرف کردن خطای Serve Images in Next-Gen Formats وجود دارد که در اینجا به آن ها می‌پردازیم.

استفاده از نرم افزار های کامپیوتری

یک نحوه رفع ارور Serve Images in Next-Gen Formats و تبدیل تصاویر به فرمت WebP، استفاده از نرم‌افزار‌های کامپیوتری است. در ادامه به معرفی برخی از این نرم‌افزارها پرداخته شده است:

• Adobe Photoshop: برای تبدیل تصاویر به فرمت WebP در فتوشاپ، ابتدا تصویر مورد نظر خود را باز کنید. سپس از منوی “File”، گزینه “Export” را انتخاب کرده و روی “Save for Web (Legacy)” کلیک کنید. در پنجره باز شده، فرمت WebP را انتخاب کرده و تنظیمات دلخواه را اعمال کنید، سپس روی “Save” کلیک کنید.
• GIMP: تصویر مورد نظر را در GIMP باز کنید. سپس به مسیر File > Export As بروید. در پنجره باز شده، نام فایل را با پسوند .webp وارد کنید و بر روی Export کلیک کنید. تنظیمات مربوط به WebP را انتخاب کرده و بر روی Export کلیک کنید.
• XnConvert: نرم‌افزار XnConvert را باز کنید و تصاویر مورد نظر خود را اضافه کنید. سپس به زبانه Output بروید و فرمت خروجی را WebP انتخاب کنید. در نهایت، بر روی دکمه Convert کلیک کنید تا تصاویر به فرمت WebP تبدیل شوند.

از ابزار های آنلاین استفاده کنید

از دیگر روش‌های برطرف کردن خطای Serve Images in Next-Gen Formats، بهره‌گرفتن از سایت‌های آنلاین موجود است. احتمالاً صدها ابزار آنلاین وجود دارد که می‌توانید از آنها برای تبدیل انواع تصاویر استفاده کنید. چند نمونه از بهترین ابزارهای تبدیل تصویر به فرمت WebP جهت  ساخت تصاویر کم‌حجم و با کیفیت بالا را در زیر معرفی می‌کنیم:

• picflow
• cloudconvert
• pixelied
• cloudinary

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

روش سوم برای افزایش سرعت سایت با Serve Images in Next-Gen Formats، استفاده از افزونه‌ های وردپرسی است. این روش مخصوص مکاربران وردپرسی است و متاسفانه صاحبان سایت ها با cms اختصاصی، امکان استفاده از افزونه های مخزن وردپرس جهت رفع مشکل Serve images in next-gen formats را ندارند. در ادامه، چند مورد از بهترین افزونه ها بهینه‌سازی تصاویر وب برای بارگذاری سریعتر تصاویر را آورده ایم:

• ShortPixel Image Optimizer: افزونه ShortPixel علاوه بر فشرده‌سازی تصاویر، قابلیت تبدیل تصاویر به فرمت WebP را نیز دارد. این افزونه به طور خودکار تصاویر جدید را به WebP تبدیل کرده و نسخه‌های WebP تصاویر موجود را نیز بهینه‌سازی می‌کند تا تصاویر کم‌حجم و با کیفیت بالا را به کاربر نمایش دهد.
• Imagify :Imagify یک افزونه فشرده‌سازی بدون افت کیفیت است که شامل قابلیت تبدیل تصاویر به فرمت WebP می‌شود. با این افزونه می‌توانید تصاویر را به طور خودکار تبدیل کنید و به ارتقای تجربه کاربری سایت خود کمک کنید.
• EWWW Image Optimizer: این افزونه به شما اجازه می‌دهد تا تصاویر را به صورت خودکار به WebP تبدیل کنید و همچنین قابلیت فشرده‌سازی و بهینه‌سازی تصاویر را ارائه می‌دهد.
• WebP Express: این افزونه به شما امکان می‌دهد تا تصاویر را به فرمت WebP تبدیل کنید و از آن‌ها به صورت خودکار در سایت وردپرس خود استفاده کنید. همچنین، از تکنیک‌های بهینه‌سازی وب متنوعی پشتیبانی می‌کند.

چرا WebP؟

همانطور که متوجه شدید، نحوه رفع ارور Serve Images in Next-Gen Formats تبدیل عکس‌ها به فرمت‌های جدید تصویری مانند WebP است. این فرمت به دلیل ویژگی‌های منحصربه‌فرد خود به یک گزینه برجسته برای بهینه‌سازی تصاویر در وب تبدیل شده است.

این فرمت از تصاویر، حدودا 26% کوچکتر از JPEG هستند. همچنین جالب است بدانید که  WebP توسط گوگل توسعه یافته است و چیزی که گوگل لمس کند به طلا تبدیل می شود. از طرفی دیگر، تصاویر WebP را می توان هم برای تصاویر و هم برای تصاویر متحرک استفاده کرد.

اما مشکل بزرگ WebP هم سازگاری مرورگر است. همه مرورگرها از فرمت های تصویر یکسان پشتیبانی نمی کنند. بسته به پایگاه کاربر شما، تصاویر WebP ممکن است برای 80 درصد از مخاطبان شما خوب به نظر برسند. با این حال، 20٪ دیگر ممکن است یک تصویر شکسته دریافت کنند. می توانید وضعیت فعلی پشتیبانی مرورگر برای WebP را در اینجا پیدا کنید.

البته، لازم به ذکر است که سایر فرمت‌های نسل جدید تصاویر مانند JPEG 2000 و JPEG XR تقریباً در رایج‌ترین مرورگر‌ه قابل اجرا نیستند. به عنوان مثال، AVIF ممکن است در برخی دسته بندی ها WebP را شکست دهد، اما هنوز توسط Firefox، Edge، Chrome در تلفن همراه و بسیاری از مرورگرهای دیگر پشتیبانی نمی شود. به طور خلاصه WebP، بی چون و چرابهترین گزینه شماست. 

در اینجا لیستی از مرورگرهایی که از WebP پشتیبانی می‌کنند، آمده است:

1. Google Chrome
   • از نسخه 17 به بعد
2. Mozilla Firefox
   • از نسخه 65 به بعد
3. Microsoft Edge
   • از نسخه 18 به بعد (EdgeHTML)
   • از نسخه 79 به بعد (Chromium-based)
4. Opera
   • از نسخه 19 به بعد
5. Safari
   • از نسخه 14 به بعد (macOS Big Sur و iOS 14)
6. Android Browser
   • از نسخه 4.0 به بعد
7. Google Chrome for Android
   • از نسخه 25 به بعد
8. Opera Mobile
   • از نسخه 12.1 به بعد
9. Firefox for Android
   • از نسخه 65 به بعد

با این حال ممکن است افرادی که از نسخه های قدیمی این مرورگر‌ها استفاده می کنند، امکان دیدن عکس های webp را نداشته باشند که در این صورت پیشنهاد ی کنیم از این قطعه کد استفاده کنند تا در صورت پشتیبانی نکردن از webp، نسخه jpg نمایش داده شود.

<picture>

<source srcset=“image.webp” type=“image/webp”>

<source srcset=“image.jpg” type=“image/jpeg”>

<img src=“image.jpg” alt=“Description of the image”>

</picture>

تاثیر رفع خطای Serve Images in Next-Gen Formats در سئو

تأثیر عدم ارائه تصاویر در قالب های نسل بعدی بر تجربه کاربری (UX) و بهینه سازی موتور جستجو (SEO) می تواند قابل توجه باشد. عدم استفاده از آخرین فناوری های موجود برای ارائه تصاویر بهینه می تواند منجر به عملکرد ضعیف، زمان بارگذاری کندتر و تجربه کاربری منفی شود. در سمت UX، یک اشکال عمده عدم استفاده از فرمت های تصویری نسل بعدی کاهش سرعت صفحه است. تصاویر درصد زیادی از اندازه کل وب سایت را تشکیل می دهند، بنابراین اگر برای تحویل سریع بهینه نشده باشند، می تواند تأثیر نامطلوبی بر زمان بارگذاری صفحه و عملکرد کلی داشته باشد. دو مورد از معیارهای Web Vital اغلب تحت تأثیر سرعت بارگذاری تصویر قرار می گیرند: بزرگترین درد محتوایی (LCP) و اولین رنگ محتوایی (FCP). محتوایی که به عنوان LCP یا FCP شمارش می شود اغلب یک تصویر است. ارائه این تصاویر در قالب فرمت‌های نسل جدید تصاویر می تواند این معیارها را به میزان قابل توجهی بهبود بخشد.

همچنین، عدم استفاده از استانداردهای وب مدرن منجر به کاهش تعامل مشتری می‌شود. همانطور که مطالعات نشان داده است که بازدیدکنندگان وب سایت زمانی که سرعت بارگذاری صفحه افزایش می یابد به دلیل محتوای سنگین یا تصاویر بهینه نشده، تمایل به ترک آن دارند. در سمتی دیگر، فرمت های تصویر بهینه نشده نیز می توانند بر روی نتایج موتور جستجو تأثیر منفی بگذارند. خوشبختانه، راه حل این مشکل را در مقاله، توضیح دادیم. این فرمت های مدرن در مقایسه با فرمت های تصویر قدیمی مانند JPG و PNG، پیشرفت های قابل توجهی را در اندازه فایل و زمان بارگذاری ارائه می دهند. این به معنای بارگذاری سریع‌تر صفحه، بهبود تعامل کاربر و بهبود عملکرد کلی سئو است.

به طور خلاصه برطرف کردن خطای Serve Images in Next-Gen Formats به دلایل زیر می‌تواند به بهبود رتبه وب‌سایت در نتایج جستجو کمک کند:

• بهبود سرعت بارگذاری صفحه
• کاهش نرخ پرش (Bounce Rate)
• افزایش تعامل کاربران
• کاهش مصرف پهنای باند

جمع بندی

در این مقاله، به بررسی اهمیت و  نحوه رفع ارور Serve Images in Next-Gen Formats  پرداختیم و توضیح دادیم که چگونه استفاده از فرمت‌های تصویری مدرن مانند WebP می‌تواند به بهبود عملکرد و سئو وب‌سایت‌ها کمک کند. استفاده از فرمت‌های نسل جدید تصاویر مزایای زیادی از جمله کاهش حجم فایل‌ها، حفظ کیفیت بالا، پشتیبانی از شفافیت و انیمیشن و سرعت بارگذاری سریع‌تر را به همراه دارد. این ویژگی‌ها به نوبه خود می‌توانند به بهبود سرعت بارگذاری صفحات، کاهش نرخ پرش، افزایش تعامل کاربران و بهبود سئو موبایل کمک کنند. همچنین، کاهش مصرف پهنای باند به کاهش هزینه‌ها و بهبود عملکرد سایت کمک می‌کند.

همچنین پیشنهاد می‌کنیم دیگر مقالات ما در زمینه بهینه سازی عکس را مطالعه فرمایید:

• نحوه رفع ارور defer offscreen images
• روش رفع خطای properly size images
• روش رفع خطای avoid large layout shifts
• رفع خطا minimize main thread work

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