WebP چیست؟ رفع پیشنهاد Improve Image Delivery در وردپرس

اگه تا حالا سایتتون رو توی PageSpeed Insights تست کرده باشید، احتمالاً اسم تصاویر رو بین پیشنهادهای بهبود سرعت دیدید. دلیلش هم ساده‌ست: توی بیشتر سایت‌ها، تصاویر سنگین‌ترین بخش صفحه هستن. یه عکس بهینه‌نشده می‌تونه از کل کدهای صفحه حجیم‌تر باشه.

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

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

WebP چیست؟

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

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

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

مزایای فرمت WebP

مهم‌ترین مزیت WebP، حجم کمتره. طبق آزمایش‌هایی که گوگل درباره مجموعه‌ای از تصاویر منتشر کرده، فایل‌های WebP بدون افت کیفیت (Lossless) به‌طور میانگین حدود ۲۶ درصد از PNG کم‌حجم‌تر بودن. فایل‌های WebP با افت کیفیت (Lossy) هم در اون آزمایش‌ها حدود ۲۵ تا ۳۴ درصد از JPEG با کیفیت مشابه حجم کمتری داشتن. این عددها نتیجه تضمینی برای همه تصاویر نیستن و نتیجه واقعی به محتوای عکس و تنظیمات خروجی بستگی داره.

این عددها شاید روی کاغذ کوچیک به نظر برسن، ولی توی یه صفحه با ده‌ها تصویر، می‌تونن به چند صد کیلوبایت یا حتی چند مگابایت دانلود کمتر برسن. کاربری که با اینترنت موبایل وارد سایتتون می‌شه، این تفاوت رو بهتر حس می‌کنه.

بقیه مزیت‌هاش:

• پشتیبانی از شفافیت: برای لوگوها و تصاویری مناسبه که پس‌زمینه شفاف لازم دارن و قبلاً مجبور بودید PNG سنگین براشون استفاده کنید.
• پشتیبانی از انیمیشن: در خیلی از کاربردها می‌تونه جایگزین سبک‌تری برای GIFهای حجیم باشه.
• هر دو نوع فشرده‌سازی: هم با افت کیفیت برای عکس‌ها و هم بدون افت کیفیت برای طرح‌ها و اسکرین‌شات‌ها.
• پشتیبانی گسترده: نسخه‌های جدید مرورگرها، وردپرس و خیلی از نرم‌افزارهای ویرایش تصویر و ابزارهای آنلاین ازش پشتیبانی می‌کنن.

مقایسه WebP با JPEG، PNG، GIF و AVIF

یه نکته درباره JPEG و PNG: این فرمت‌ها منسوخ نشدن. هنوز هم برای نگهداری خیلی از فایل‌های اصلی روی کامپیوترتون مناسبن. بحث این بخش فقط درباره فرمتیه که به کاربر نمایش داده می‌شه.

AVIF؛ فرمت جدیدتر از WebP

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

نسخه‌های جدید مرورگرهای اصلی از AVIF پشتیبانی می‌کنن. وردپرس هم از نسخه ۶.۵ اجازه آپلود AVIF رو می‌ده، ولی ساخت اندازه‌های مختلف این تصاویر به پشتیبانی کتابخونه پردازش تصویر سرور بستگی داره. پس چرا همه یک‌راست سراغ AVIF نمی‌رن؟

• ساختنش سنگین‌تره: تبدیل تصویر به AVIF معمولاً بیشتر از WebP به پردازنده فشار میاره. روی یه هاست اشتراکی، تبدیل گروهی هزاران تصویر به AVIF ممکنه کند باشه یا به محدودیت منابع هاست بخوره.
• پشتیبانی سرور: برای ساختن AVIF داخل وردپرس، کتابخونه پردازش تصویر سرور، یعنی بخشی که فایل‌های تصویری رو می‌خونه و تغییر اندازه می‌ده، باید از AVIF پشتیبانی کنه. همه سرورها چنین تنظیمی ندارن.
• ابزارها: بعضی نرم‌افزارها و سرویس‌ها هنوز به راحتی WebP با AVIF کار نمی‌کنن.

پس کدوم رو انتخاب کنیم؟ برای بیشتر سایت‌ها، WebP انتخاب مطمئن و کم‌دردسریه که بخش بزرگی از سود رو می‌ده. اگه هاست و افزونه‌تون از AVIF پشتیبانی می‌کنن و حجم تصاویر براتون خیلی مهمه، AVIF رو هم روی چند تصویر امتحان کنید. بعضی افزونه‌های بهینه‌سازی می‌تونن هر دو فرمت رو بسازن و بر اساس پشتیبانی مرورگر، نسخه مناسب رو تحویل بدن.

پیشنهاد Serve Images in Next-Gen Formats چی بود و الان کجاست؟

سال‌ها، یکی از رایج‌ترین پیشنهادهایی که PageSpeed Insights به سایت‌ها می‌داد، همین «Serve images in next-gen formats» بود؛ یعنی «تصاویر رو با فرمت‌های نسل جدید ارائه کنید». این پیشنهاد فهرستی از تصاویر صفحه رو نشون می‌داد که تبدیلشون به WebP یا AVIF می‌تونست حجمشون رو کمتر کنه.

اول یه اصلاح: این پیشنهاد مال سرچ کنسول نیست

خیلی‌ها، از جمله نسخه قدیمی همین مقاله خودمون، این پیشنهاد رو به گزارش Core Web Vitals سرچ کنسول نسبت می‌دادن. ولی سرچ کنسول فقط نشون می‌ده صفحه‌های شما از نظر شاخص‌های اصلی سرعت و تجربه کاربری، مثل LCP، INP و CLS، چه وضعیتی دارن. پیشنهادهای جزئی مثل فرمت تصاویر از بررسی‌های Lighthouse میان که توی PageSpeed Insights و ابزار توسعه‌دهنده کروم اجرا می‌شن.

یه نکته دیگه هم مهمه: این مورد «خطا» نیست و به‌تنهایی نشونه جریمه شدن سایتتون نیست. یه پیشنهاد بهینه‌سازیه که انجام دادنش ممکنه صفحه رو سبک‌تر و سریع‌تر کنه.

نام جدیدتر: Improve Image Delivery

توی نسخه‌های جدید PageSpeed Insights ممکنه دیگه اسم «Serve images in next-gen formats» رو نبینید. لایت‌هاوس چند پیشنهاد قدیمی مربوط به تصاویر رو در بخش‌های جدیدتر Insights ترکیب کرده و نمایش دقیق گزارش هم ممکنه با نسخه ابزار تغییر کنه.

پیشنهادهای مربوط به بهینه‌سازی تصاویر ممکنه زیر عنوان Improve image delivery نمایش داده بشن. این بخش تصویرهایی رو پیدا می‌کنه که امکان کاهش حجمشون هست و معمولاً به یکی از این موارد اشاره می‌کنه:

• فرمت مدرن: تبدیل تصویر به فرمتی مثل WebP یا AVIF.
• فشرده‌سازی بیشتر: تصویر با کیفیت بالاتر از حد لازم ذخیره شده و می‌شه بدون افت محسوس کیفیت، سبک‌ترش کرد.
• ابعاد مناسب: تصویر بزرگ‌تر از اندازه‌ای بارگذاری شده که توی صفحه نمایش داده می‌شه. مثلاً یه عکس ۴۰۰۰ پیکسلی توی یه کادر ۴۰۰ پیکسلی نشون داده می‌شه.

این تغییر یه نکته مهم رو نشون می‌ده: فرمت فقط یه بخش از بهینه‌سازی تصاویره. تصویری که WebP شده ولی ابعادش ده برابر نیازه، هنوز سنگین‌تر از چیزیه که باید باشه.

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

WebP چقدر روی سرعت سایت اثر داره؟

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

یکی از جاهایی که ممکنه بهتر بشه، شاخص LCP یا Largest Contentful Paint هست؛ یعنی مدت زمانی که طول می‌کشه تا بزرگ‌ترین بخش قابل‌مشاهده صفحه نمایش داده بشه. توی خیلی از صفحه‌ها، این بخش یه تصویره: بنر صفحه اصلی، تصویر شاخص مقاله یا عکس اصلی محصول. سبک‌تر شدن این تصویر می‌تونه به نمایش سریع‌ترش کمک کنه، ولی نتیجه نهایی به سرور، کش، کدهای صفحه و نحوه بارگذاری تصویر هم بستگی داره.

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

چطور در وردپرس از WebP استفاده کنیم؟

چند راه مختلف دارید. انتخابتون به تعداد تصاویر، وضعیت تصاویر قدیمی و میزان خودکار بودن کار بستگی داره. اگه فقط گاهی تصویر منتشر می‌کنید، تبدیل دستی کافیه. اگه سایت قدیمی یا فروشگاهی دارید، افزونه یا سرویس بهینه‌سازی معمولاً انتخاب عملی‌تریه. اگه CDN دارید، اول امکانات همون سرویس رو بررسی کنید.

آپلود مستقیم فایل WebP

ساده‌ترین روش اینه که تصویر رو قبل از آپلود به WebP تبدیل کنید و مستقیم توی کتابخانه رسانه وردپرس بارگذاری کنید. وردپرس از نسخه ۵.۸ آپلود WebP رو پشتیبانی می‌کنه. ساخت اندازه‌های مختلف تصویر هم به این بستگی داره که کتابخونه پردازش تصویر هاستتون بتونه WebP رو بخونه و ذخیره کنه.

این روش برای سایت‌های کوچیک یا کسایی که تعداد تصاویر کمی منتشر می‌کنن خوبه. عیبش اینه که باید برای هر تصویر یادتون بمونه تبدیلش کنید و تصاویر قدیمی سایت هم دست‌نخورده باقی می‌مونن.

تبدیل خودکار با افزونه

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

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

• Modern Image Formats: افزونه‌ای از تیم عملکرد وردپرسه که برای ساخت فرمت‌های جدیدتر موقع آپلود تصویر طراحی شده.
• Converter for Media: روی تبدیل تصاویر به WebP و AVIF تمرکز داره و امکاناتش می‌تونه تبدیل تصاویر قبلی رو هم پوشش بده.
• EWWW Image Optimizer، ShortPixel و Imagify: ابزارهای کامل‌تر بهینه‌سازی تصویر هستن. نوع فشرده‌سازی، محل پردازش و محدودیت نسخه رایگانشون ممکنه با گذشت زمان تغییر کنه.
• LiteSpeed Cache: اگه هاستتون از وب‌سرور LiteSpeed استفاده می‌کنه و این افزونه رو برای کش نصب کردید، امکانات فعلی بخش بهینه‌سازی تصویرش رو هم بررسی کنید. شاید به افزونه جدا نیاز نداشته باشید.

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

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

تبدیل در سطح سرور یا CDN

CDN یعنی شبکه‌ای از سرورها که فایل‌های سایتتون رو از مکانی نزدیک‌تر به کاربر تحویل می‌ده. بعضی CDNها و شرکت‌های هاستینگ می‌تونن تصاویر رو در لحظه به فرمت مناسب تبدیل کنن، بدون اینکه فایل اصلی سایتتون تغییر کنه. اگه از CDN استفاده می‌کنید، اول ببینید چنین امکانی توی پلنتون هست یا نه.

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

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

تبدیل تصاویر قدیمی سایت به WebP

اگه سایتتون چند ساله فعاله، احتمالاً صدها یا هزاران تصویر JPEG و PNG دارید. لازم نیست دونه‌دونه تبدیلشون کنید؛ بعضی افزونه‌های بهینه‌سازی امکان تبدیل گروهی یا Bulk دارن. قبل از شروع این نکته‌ها رو انجام بدید:

1. اول بکاپ کامل بگیرید، مخصوصاً از پوشه uploads. اگه چیزی درست پیش نرفت، بتونید برگردید.
2. ببینید افزونه با تصاویر اصلی چی کار می‌کنه. نگه داشتن نسخه اصلی معمولاً برگشت از تغییرات رو راحت‌تر می‌کنه.
3. اول چند تصویر و یه صفحه کم‌ریسک رو آزمایش کنید. نمایش تصویر، کیفیت، نسخه موبایل و نتیجه تب Network رو بررسی کنید. بعد سراغ تبدیل همه فایل‌ها برید.
4. اگه تصاویر زیادی دارید، تبدیل رو مرحله‌ای انجام بدید. تبدیل هزاران تصویر یک‌جا روی هاست اشتراکی ممکنه به محدودیت منابع بخوره و سایت رو موقتاً کند کنه. بهتره توی ساعت‌های کم‌بازدید انجامش بدید.
5. فضای هاست رو چک کنید. اگه نسخه اصلی هم حفظ بشه، به فضای بیشتری نیاز دارید.
6. بعد از تبدیل، کش رو پاک کنید؛ هم کش افزونه و هم کش CDN، اگه دارید. وگرنه ممکنه کاربرها هنوز نسخه قدیمی رو ببینن.

افزونه‌ها و سرویس‌ها WebP رو به روش‌های مختلف تحویل می‌دن. بعضی‌ها کد HTML رو به فایل جدید وصل می‌کنن، بعضی‌ها از عنصر picture کمک می‌گیرن، بعضی‌ها قوانین سرور رو تغییر می‌دن و بعضی CDNها هم بر اساس مرورگر کاربر نسخه مناسب رو می‌فرستن. برای همین ممکنه آدرس تصویر هنوز به jpg ختم بشه، ولی مرورگر واقعاً فایل WebP دریافت کنه. اگه بعد از فعال‌سازی تصاویر درست نمایش داده نشدن، تنظیمات افزونه، سازگاری سرور و راهنمای شرکت هاست رو بررسی کنید.

چطور مطمئن بشیم تصاویر به‌صورت WebP نمایش داده می‌شن؟

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

1. صفحه‌ای از سایت رو توی مرورگر کروم باز کنید.
2. کلید F12 رو بزنید تا ابزار توسعه‌دهنده باز بشه و برید به تب Network.
3. صفحه رو یه بار رفرش کنید و فیلتر Img رو انتخاب کنید.
4. به ستون Type نگاه کنید. اگه ستون رو نمی‌بینید، روی یکی از فایل‌های تصویری کلیک کنید و مقدار Content-Type رو در بخش Headers ببینید. مقداری مثل image/webp یا image/avif فرمت واقعی فایل دریافتی رو نشون می‌ده.

به پسوند آدرس تصویر اعتماد نکنید. بعضی سرویس‌ها با آدرسی که به jpg ختم می‌شه، فایل WebP تحویل می‌دن. ستون Type یا مقدار Content-Type بهتر نشون می‌ده مرورگر چه فرمتی دریافت کرده.

بعدش دوباره صفحه رو توی PageSpeed Insights تست کنید. اگه بخش Improve image delivery هنوز تصاویری رو نشون می‌ده، جزئیاتش رو باز کنید و ببینید پیشنهاد درباره فرمته یا فشرده‌سازی و ابعاد.

اشتباهات رایج

• فقط عوض کردن فرمت، بدون اصلاح ابعاد: عکس ۴۰۰۰ پیکسلی که مستقیم از دوربین آپلود شده، حتی با فرمت WebP هم می‌تونه سنگین باشه. قبل از آپلود، ابعاد تصویر رو به اندازه‌ای که واقعاً توی سایت لازمه کم کنید.
• کیفیت خیلی پایین: برای کم کردن حجم، کیفیت رو اون‌قدر پایین نیارید که تصویر مات یا شطرنجی بشه. همیشه نتیجه رو با چشم خودتون چک کنید، مخصوصاً عکس محصولات.
• بارگذاری تنبل یا Lazy Load تصویر اصلی صفحه: Lazy Load یعنی دانلود تصویر تا زمان نزدیک شدنش به بخش قابل‌مشاهده عقب می‌افته. این کار برای تصاویر پایین صفحه خوبه، ولی اگه روی تصویر اصلی بالای صفحه اجرا بشه، ممکنه LCP رو بدتر کنه.
• تبدیل لوگو و آیکون به WebP: برای بعضی لوگوها و آیکون‌های ساده، فرمت برداری SVG می‌تونه سبک‌تر و واضح‌تر باشه. ولی فقط از SVG مطمئن استفاده کنید؛ فایل SVG ناشناس می‌تونه کد ناامن داشته باشه و وردپرس هم به‌صورت پیش‌فرض آپلود این فرمت رو برای همه کاربران آزاد نمی‌کنه.
• حذف فایل‌های اصلی: تا وقتی مطمئن نشدید همه‌چیز درست کار می‌کنه و بکاپ سالم دارید، نسخه‌های اصلی رو پاک نکنید.
• فراموش کردن کش: ممکنه تغییرات رو انجام داده باشید، ولی به‌خاطر کش هنوز نتیجه قدیمی رو ببینید.

جمع‌بندی

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

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

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

سوالات متداول

تیم تولید محتوا

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