WebP چیست؟ تفاوتش با JPEG و PNG و اینکه کِی ازش استفاده کنیم

اگر برای سرعت سایت جستجو کرده باشید، حتماً به توصیه‌ی «عکس‌ها را WebP کنید» برخورده‌اید. WebP چیست و واقعاً ارزشش را دارد؟

WebP چیست؟

WebP یک فرمت تصویر است که گوگل برای وب معرفی کرد. یک فرمت چندمنظوره است: هم فشرده‌سازی lossy (مثل JPEG)، هم lossless (مثل PNG)، هم شفافیت (کانال آلفا) و هم انیمیشن (مثل GIF) را پشتیبانی می‌کند.

مقایسه‌ی کوتاه

ویژگی	JPEG	PNG	WebP
مناسب عکس	بله	حجیم	بله
شفافیت	ندارد	دارد	دارد
انیمیشن	ندارد	ندارد	دارد
حجم برای کیفیت مشابه	متوسط	زیاد (برای عکس)	معمولاً کمتر
سازگاری	همه‌جا	همه‌جا	مرورگرهای امروزی

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

کجا از WebP استفاده کنیم؟

• عکس‌های داخل سایت و وبلاگ،
• بنرها و هیروها،
• تصویرهای شفاف به‌جای PNG سنگین.

کجا نه؟

• لوگو و آیکون ساده: SVG بهتر است.
• فایل‌هایی که برای چاپ یا ویرایش حرفه‌ای می‌دهید: JPEG/PNG/TIFF اصلی را نگه دارید.
• جایی که برنامه‌ی مقصد WebP را باز نمی‌کند (بعضی نرم‌افزارهای قدیمی). در این مورد خروجی را به JPEG یا PNG برگردانید.

چطور WebP بسازیم؟

• از ابزار آنلاین بدون آپلود، مثل ابزار تصویر؛
• با ابزار خط فرمان cwebp؛
• با کتابخانه‌هایی مثل Pillow در Python یا sharp در Node.

نمونه با Pillow:

from PIL import Image
Image.open("photo.jpg").convert("RGB").save("photo.webp", "WEBP", quality=80)

احتیاط: نسخه‌ی جایگزین

اگر لازم است مرورگرهای خیلی قدیمی را هم پوشش دهید، می‌توانید از تگ <picture> استفاده کنید و یک JPEG به‌عنوان جایگزین بدهید.

<picture>
  <source srcset="a.webp" type="image/webp">
  <img src="a.jpg" alt="توضیح">
</picture>

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

سوالات رایج

WebP کیفیت را خراب می‌کند؟ در حالت lossy کمی اطلاعات حذف می‌شود، مثل JPEG؛ در کیفیت مناسب معمولاً قابل‌تشخیص نیست. حالت lossless هیچ اطلاعاتی را حذف نمی‌کند.

آیا باید فایل اصلی را نگه دارم؟ بله. همیشه نسخه‌ی اصلی را ذخیره کنید و WebP را از روی آن بسازید.