رفع خطای Serve images in next-gen formats error برای بهبود سئو سایت

یکی از مهم ترین پیشنهادهایی که تو Google PageSpeed Insights میبینیم، “Serve images in next-gen formats” هستش.

برطرف کردن این ارور یه فرصت عالی واسه بهبود سئو سایت محسوب میشه.

حالا شاید براتون سوال باشه این پیشنهادی که Google PageSpeed Insights بهمون میده اصلا یعنی چی؟

این پیشنهاد یعنی اینکه فرمت عکس هایی که تو سایت بارگذاری میکنید رو که معمولا JPEG یا PNG هستش به WebP یا AVIF تبدیل کنید.

اینجوری هم سرعت سایت شما افزایش پیدا میکنه و هم سئو سایتتون بهتر میشه.

تبدیل همه عکس های سایت به فرمت WebP یا AVIF همونطوری که میتونید حدس بزنید، فرایند طولانی و سختیه. پس گوگل بهتون پیشنهاد میکنه که از یه افزونه وردپرس برای اینکار استفاده کنید.

اگه فقط دنبال یه راه آسون برای تبدیل عکساتون به WebP هستید، یه راست برید به بخش بهترین افزونه های تبدیل Webp در وردپرس.

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

فهرست:

• next-gen image formats (فرمت های تصویر نسل بعدی) چیست؟
• چرا Webp؟
• سازگاری مرورگر ها با فرمت Webp
• رفع دستی خطای Serve images in next-gen formats error (بدون افزونه)
  • تصاویر را آنلاین به فرمت WebP تبدیل کنید
  • تصاویر WebP را در سایت خود قرار دهید
    • از نشانه گذاری HTML استفاده کنید
    • فایل htaccess را تغییر دهید
    • از جاوا اسکریپت برای شناسایی پشتیبانی WebP استفاده کنید
• بهترین افزونه های Webp در وردپرس
  • WebP Express
  • Converter for Media
  • Imagify
  • Support WebP
  • Images to WebP
  • ShortPixel Image Optimizer
  • EWWW Image Optimizer
• جمع بندی

next-gen image formats (فرمت های تصویر نسل بعدی) چیست؟

اکثر افراد با فرمت های قدیمی تصاویر آشنا هستند.

سالهاست که از فرمت های JPEG، GIF و PNG استفاده میکنیم، اما دیگه دوران این فرمت ها هم به سر اومده.

تکنولوژی روز به روز داره پییشرفت میکنه. پس اگه میخواید عقب نمونید باید خودتون رو بروز نگه دارید.

درسته که تصاویر JPEG سبک هستند، اما معمولا کیفیت پایینی دارند. از اون طرف، PNG ها با کیفیت هستند اما سایزشون زیاده.

حالا شما به عنوان یه وب مستر یا سئو کار :

میخواید تصاویر باکیفیتی داشته باشید که سرعت بارگذاری وب سایت رو کاهش میده؟ یا تصاویر باکیفیت رو قربانی سرعت سایت کنید؟

هیچ پاسخ درستی واسه این سوال وجود نداره. مثل این میمونه که بپرسید اول مرغ بود یا تخم مرغ؟

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

مردم برای مدت بسیار طولانی از JPEG استفاده میکردند و تا یه زمانی هم واقعا این فرمت پاسخگو بود.

اکثرا این فرمت رو فشرده میکردند تا سایزش بیاد پایین تر. در نتیجه، فرمت های تصویری نسل بعدی مثل JPEG 2000، JPEG XR و WebP ظهور پیدا کردند.

این فرمت ها بهتر هستند چون:

فرمت های تصویری نسل بعدی ویژگی های فشرده سازی و کیفیت بهتری دارند.

استفاده از فرمت های مدرن به ما امکان میده تا اندازه فایل رو به میزان قابل توجهی کاهش بدیم و در عین حال کیفیت رو حفظ کنیم.

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

چرا Webp؟

اولا تصاویر WebP تقریبا ۲۵ تا ۳۴ درصد کوچکتر از JPEG با کیفیت یکسان هستند.

ثانیا WebP رو خود گوگل درست کرده. درسته که هر چیزی که گوگل درست میکنه به طلا تبدیل میشه، اما اینم باید در نظر بگیریم که وقتی ببینه از فرمتش استفاده میکنید، هواتون رو بیشتر داره.

ثالثا، WebP رو هم میتونید برای تصاویر متحرک و هم تصاویر ثابت استفاده کنید.

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

به طور خلاصه، WebP بهترین گزینه شماست. در ادامه این مقاله هم میخوایم در مورد WebP صحبت کنیم.

سازگاری مرورگر ها با فرمت Webp

بنابراین، اگه WebP خیلی بهتره، چرا همه به طور پیش فرض ازش استفاده نمی کنیم؟

چونکه بزرگترین مشکل WebP (و بیشتر روندهای دیگه تو وب) مشکل سازگاری مرورگره. همه مرورگرها از همه‌ی فرمت های تصویر پشتیبانی نمی کنند.

بسته به اینکه بیشتر کاربرانتون از چه مرورگری استفاده میکنند، تصاویر WebP میتونه برای ۸۰ درصدشون خوب باشه. با این حال، ۲۰٪ دیگر ممکنه نتونند تصاویر شما رو ببینند.

می توانید وضعیت فعلی پشتیبانی مرورگر برای WebP رو اینجا ببینید.

همونطوری که تو تصویر میبینید چون که پشتیبانیش ۱۰۰٪ نیست، ارائه این قالب به بازدیدکنندگان سخت تر از اون چیزیه که فکر میکنید.

رفع دستی خطای Serve images in next-gen formats error (بدون افزونه)

ساده بخوام بگم، برای تبدیل تصاویرتون به فرمت WebP باید دو کار انجام بدید:

• تصاویر خود را به WebP تبدیل کنید (بخش آسونتر)

• آنها را به بازدیدکنندگان ارائه دهید. (بخش سختتر)

من یه نمای کلی از هر دو بخش رو بهتون میگم که بیشتر با این فرایند آشنا بشید.

تصاویر را آنلاین به فرمت WebP تبدیل کنید

صدها ابزار آنلاین وجود داره که میتونید از اون ها برای تبدیل تصاویر استفاده کنید.

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

• Imagemin برای WebP. اگر از ابزارهای ساخت یا اسکریپت های ساخت استفاده می کنید، این افزونه توسط npm انتخاب بهتری هستش. باهاش میتونید بین انواع فشرده‌سازی، وضوح، تنظیمات کیفیت و بسیاری از گزینه‌های دیگه یکی رو انتخاب کنید. فقط بگم که یکم کار باهاش سخته، پس اگه باهاش راحت نیستید برید سرغ ابزارهای دیگه.

• Squoosh. گوگل این اپ رو چند سال پیش ساخته. بهتون امکان فشرده سازی، تغییر اندازه و تنظیم کیفیت رو میده. مهمتر از همه، دارای یه نوار لغزنده هستش که میتونید ازش برای مقایسه تصویر تو فرمت های مختلف استفاده کنید.

• در نهایت هم اگه تصاویر رو با فتوشاپ ادیت می کنید، افزونه WebPShop رو تو فتوشاپ خودتون نصب کنید.

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

حالا بریم سراغ قسمت پیچیده تر.

تصاویر WebP را در سایت خود قرار دهید

در اصل، مرحله دوم دو تا بخش داره:

• ارائه تصاویر WebP به بازدیدکنندگانی که مرورگرهایشان از فرمت پشتیبانی میکنه

• نگه داشتن تصویر اصلی به عنوان پشتیبان و ارائه آن در سایر موارد

قبل از اینکه شروع کنیم، توجه داشته باشید که این مقاله موارد رو به صورت کلی بهتون توضیح میده.

از نشانه گذاری HTML استفاده کنید

رایج ترین راه برای ارائه تصاویر WebP پشتیبان گیری از طریق نشانه گذاری HTML است.

میتونید از تگ picture در ترکیب با تگ img استفاده کنید.

مثلا:

فرض کنید یه تصویر JPEG تو سایت خودتون دارید. وقتی که به WebP تبدیلش کردید، میتونید نسخه جدید رو همراه با ورژن JPEG به عنوان پشتیبان از طریق تگ picture ارائه بدید. اینجوری:

<picture>
<source type="randomimage/webp" srcset="randomimage.webp">
<source type="randomimage/jpg" srcset="randomimage.jpg">
</picture>

هر تگ و ترتیبش برای به دست آوردن نتیجه مورد نظر ضروریه.

مرورگرهایی که از تگ picture پشتیبانی میکنند، تگ های شما رو بررسی میکنند و اولین فرمتی که باهاش سازگاری دارند رو به کاربر نشون میدن.

مرورگرهایی که از تگ پیکچر پشتیبانی نمی کنند، ازش رد میشن و فقط تگ img رو می بینند. به همین دلیله که ما همیشه تگ img رو به عنوان عنصر نهایی داخل تصویر قرار میدیم.

این یه راه نسبتا ساده برای ارائه تصاویر WebP هستش، اما بهترین نیست.

فایل htaccess را تغییر دهید

راه دیگه برای ارائه WebP از طریق فایل htaccess. هستش.

یعنی این فایل رو باید یه جوری تغییر بدید که به طور خودکار سازگاری مرورگر رو شناسایی کرده و WebP یا فرمت دیگه ای رو ارائه بده.

برای این کار میتونید یه فایل htaccess جدید ایجاد کنید و اون رو با فایل موجود ادغام کنید.

همچنین میتونید یک اسنیپت به فایل htaccess. وب سایت خودتون اضافه کنید که سازگاری مرورگر رو با فرمت WebP تشخیص میده.

اما:

“روش عاقلانه تر اینه که از تگ picture در html استفاده کنید”.

سر و کله زدن با فایل htaccess رو به هیچ عنوان پیشنهاد نمیکنم، به خصوص اگه با کارهای فنی و تکنیکال سایت آشنایی نداشته باشید. اگر بلد نباشید، بازنویسی فایل میتونه به شدت به سایتتون آسیب برسونه.

از جاوا اسکریپت برای شناسایی پشتیبانی WebP استفاده کنید

گزینه نهایی اضافه کردن یه کد به جاوا اسکریپت هستش که به طور خودکار ویژگی هایی مانند پشتیبانی WebP رو شناسایی میکنه.

Modernizr یه کتابخانه محبوب برای این کاره و به عنوان یه سری آزمایش عمل میکنه که تشخیص میده کدام ویژگی های CSS3 و HTML5 در دسترس هستند. همچنین بهتون امکان میده که از ویژگی‌های مدرن استفاده کنید بدون اینکه کاربران مرورگرهای قدیمی‌تر رو با سایتی خراب رها کنید.

بهترین افزونه های Webp در وردپرس

قبل از اینکه بهترین افزونه های WebP برای وردپرس رو به شما معرفی کنیم، میخوام در مورد این صحبت کنم که مزایای استفاده از افزونه های Webp وردپرس چیا هستند.

با کمک افزونه های Webp وردپرس، به راحتی میتونید:

• فرمت های تصویر خود را از Png، Jpg یا Jpeg به Webp تبدیل کنید

• تنها با یه کلیک تعداد زیادی از تصاویر رو به فرمت Webp تبدیل و مدیریت کنید

• پشتیبانی از پس زمینه شفاف و قابلیت انیمیشن رو دریافت کنید

• اندازه فایل های تصویری رو کاهش بدید و تصاویر رو تو سایت خودتون بهینه کنید

• سرعت بارگذاری سایت خود رو افزایش دهید و رتبه بالاتری تو موتورهای جستجو دریافت میکنید

• تجربه کاربری رو در سایت بهبود ببخشید

حالا بریم ببینیم قدرتمندترین پلاگین های تبدیل عکس های سایت به WebP تو وردپرس کدوم ها هستند.

WebP Express

اولین افزونه Webp وردپرس که میخوام بهتون معرفی کنم WebP Express هستش.

این افزونه رایگان به شما کمک میکنه تا فرمت های تصویر فعلی تون هر چی که باشه(JPG، PNG یا GIF) به صورت خودکار به Webp تبدیل کنید.

وقتی که بازدیدکنندگان از طریق مرورگری که از Webp پشتیبانی میکنه به سایت شما دسترسی پیدا می کنند، افزونه WebP Express تصاویر رو در قالب Webp برای اون ها ارائه میده.

ویژگی ها:

• تبدیل تصاویر به Webp با روش های مختلف: imagick، cwebp، vips و غیره.
• تولید خودکار تصاویر Webp با کمک کتابخانه تبدیل Webp.
• تصاویر Webp را به روش‌های مختلف ارائه دهید، مانند مسیریابی تصاویر jpeg/png به Webp مربوطه، تغییر HTML، جایگزینی تگ‌های تصویر با تگ‌های تصویر و غیره.

مزایا:

• افزونه رایگان
• استفاده آسان

Converter for Media – Optimize images | Convert WebP & AVIF

دومین افزونه وردپرس Webp برای تبدیل عکس Converter for Media هست. با نسخه رایگانش، میتونید تصاویرتون رو تو چند مرحله‌ی ساده به فرمت Webp تبدیل کنید. اگر نیاز به تبدیل تصاویر به فرمت AVIF دارید، نسخه پولیش هم در دسترس هستش.

با استفاده از این افزونه حجم فایل بدون از دست رفتن کیفیت اصلی تصویر بین ۵۰ تا ۶۰ درصد کاهش پیدا میکنه.

ویژگی ها:

• اندازه تصویر پس از تبدیل به Webp با یک کلیک کوچکتر خواهد شد.
• تصاویر جدید به طور خودکار از طریق کتابخانه رسانه تبدیل می شوند.
• این افزونه فایل های اصلی را تنظیم نمی کند یا URL ها را تغییر نمی دهد.
• هر زمان که بازدیدکنندگان شما از مرورگری که شامل پشتیبانی از فرمت Webp است استفاده کنند، قالب Webp را برای تصاویر نشان می دهد.

مزایا:

• رایگان
• تنطیمات ساده
• پشتیبانی عالی

Imagify – Optimize Images & Convert WebP

یکی دیگه از افزونه های Webp وردپرس که نباید از دستش بدید افزونه Imagify – Optimize Images & Convert WebP است.

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

ویژگی ها:

• تصاویر را با پشتیبانی از فشرده سازی و تبدیل به Webp بهینه میکند.
• برای ایجاد خودکار نسخه های تصویر Webp، گزینه Create Webp versions of images را فعال کنید.
• فرمت تصویر Webp را با مرورگرهای پشتیبانی شده از Webp و فرمت اصلی را با مرورگرهایی که از وب پشتیبانی نمی شوند نمایش می دهد.
• به شما کمک می کند تا فرمت Webp را نه تنها برای تصاویر با اندازه کامل، بلکه برای تصاویر کوچک نیز داشته باشید.

مزایا:

• سند مفصل
• استفاده آسان
• پشتیبانی خوب

Support WebP

Support WebP افزونه Webp بعدی وردپرس هستش که میخوام بهتون معرفی کنم. برخلاف افزونه هایی که بالا اسمشون رو آوردم، ساپورت WebP عکس های سایتتون رو به webp تبدیل نمیکنه. بلکه بهتون کمک میکنه که عکس های webp رو تو سایت خودتون آپلود کنید. بنابراین، این افزونه برای کسانی مناسب هستش که میخوان تصاویر Webp رو تو سایت خودشون آپلود کنند.

ویژگی ها:

• تصاویر Webp رو تو سایت وردپرس آپلود و نمایش میده.
• تاثیری بر سرعت بارگذاری سایت شما ندارد.

مزایا:

• رایگان
• استفاده ساده و آسان
• سازگار با تمام تم ها

Images to WebP

Images to WebP هم یه افزونه Webp وردپرس فوق العاده هستش که میتونید برای رفع خطای Serve images in next-gen formats error ازش تو سایت خودتون استفاده کنید. با کمک این ابزار تصاویر در حین آپلود به صورت خودکار به Webp تبدیل میشن. علاوه بر این، به شما این امکان رو میده که کیفیت تصاویر تبدیل شده رو انتخاب کنید و تصاویرهای قبلی تون رو هم به صورت انبوه به webp تبدیل کنید.

ویژگی ها:

• کیفیت تصاویر تبدیل شده را تنظیم میکند.
• هنگام آپلود به صورت خودکار تصویر را به Webp تبدیل میکند.
• تصاویر موجود را به صورت انبوه به WebP تبدیل میکند
• فایل های اصلی لمس نمی شوند.
• فقط در صورتی که اندازه فایل WebP کمتر از اندازه فایل تصویر اصلی باشه، تصویر رو تبدیل میکنه.
• URL تصویر تغییر نخواهد کرد

مزایا:

• رایگان
• پشتیبانی عالی
• امکانات متعدد

ShortPixel Image Optimizer

افزونه Webp بعدی وردپرس ShortPixel Image Optimizer هستش. به لطف این افزونه، نه تنها میتونید تصاویر خودتون رو به فرمت Webp تبدیل کنید، بلکه میتونید فشرده‌شون هم بکنید. علاوه بر این، این ابزار همچنین شما رو قادر میسازه تا از گزینه تبدیل انبوه استفاده کنید تا در وقتتون صرفه جویی بشه.

ویژگی ها:

• همه فرمت ها مثل JPEG، PNG، یا GIF را به WebP و AVIF تبدیل میکند
• گزینه تبدیل انبوه برای تبدیل تصاویر به فرمت WebP را دارد
• تصاویر نسل بعدی (WebP و AVIF) را با استفاده از تگ picture در فرانت اند قرار میدهد

مزایا:

• دارای چندین ویژگی مرتبط با بهینه سازی تصویر
• سند مفید
• پشتیبانی فوق العاده

EWWW Image Optimizer

حالا بریم سراغ افزونه EWWW Image Optimizer. این ابزار عملکردهای مفیدی رو در اختیار شما قرار میده که بهتون کمک میکنه با چند تا کلیک ساده تصاویر رو به Webp تبدیل کنید. علاوه بر گزینه تبدیل Webp، این افزونه همچنین به شما کمک میکنه تا تصاویر تم و تمام تصاویر توی سایت رو بهینه کنید.

ویژگی ها:

• تصاویر فعلی را به سرعت به Webp تبدیل میکند.
• با استفاده از Easy IO یا بهینه ساز انبوه به صورت خودکار به webp تبدیل میکند
• با گزینه WebP در افزونه Cache Enabler از KeyCDN کار میکند.
• از قوانین بازنویسی به سبک آپاچی، بازنویسی JS WebP و بازنویسی WebP پشتیبانی میکند.

مزایا:

• دارای بسیاری از ویژگی های پیشرفته
• ساده و سبک
• پشتیبانی از چند زبان

جمع بندی

خیلی کارها هستند که میتونید برای افزایش سرعت سایت و در نتیجه بهبود سئو سایتتون انجام بدید. در این میان، یکی از مهم ترین کارهایی که نباید نادیده‌ش بگیرید، بهینه سازی تصاویر سایت هستش. تبدیل عکس هاتون به Webp ایده محشریه که PageSpeed Insights هم بهتون پیشنهاد میده. پس برای رفع خطای Serve images in next-gen formats error تنها کافیه عکس هاتون رو با فرمت webp بارگذاری کنید.

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

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