چرا برای سایت WebP بسازیم؟
تصویر قهرمان، محصول و مقاله بخش بزرگی از وزن صفحه وب را تشکیل می‌دهد. JPG قدیمی ممکن است با کیفیت 95 و ابعاد بزرگ ذخیره شده باشد. WebP در بسیاری از عکس‌ها با ظاهر مشابه فایل کوچک‌تری می‌سازد و دانلود سریع‌تر به LCP و تجربه کاربر اینترنت موبایل کمک می‌کند. کاهش حجم باید همراه با ابعاد responsive و lazy loading باشد، نه جایگزین همه بهینه‌سازی‌های وب.
برای فروشگاه، جزئیات محصول مهم است و فشرده‌سازی تهاجمی می‌تواند بافت یا رنگ را خراب کند. بهتر است یک کیفیت پایه مثل 82 انتخاب، خروجی را در اندازه واقعی کارت و بزرگ‌نمایی محصول بررسی و سپس الگو را روی دسته تصاویر مشابه اعمال کنید. عکس استودیو با زمینه ساده و عکس شلوغ فضای باز رفتار یکسانی ندارند؛ تنظیم ثابت کورکورانه همیشه حرفه‌ای نیست.
تبدیل در Canvas انجام می‌شود و فایل پیش از انتشار سایت روی دستگاه شما باقی می‌ماند. این موضوع برای کمپین یا محصول محرمانه مفید است. WebP خروجی را با نام نسخه و ابعاد نگه دارید و JPG را به‌عنوان fallback یا منبع حفظ کنید. قبل از جایگزینی در سایت، کش، Content-Type سرور و مسیر تصاویر را کنترل کنید؛ صرف تغییر پسوند در HTML کافی نیست.
قرار دادن WebP در گردش‌کار سایت
JPG را پس از برش و تغییر اندازه نهایی انتخاب کنید. ساخت WebP از تصویر 5000 پیکسلی و سپس نمایش آن در 600 پیکسل بخشی از صرفه‌جویی را هدر می‌دهد. کیفیت را از 82 تا 86 امتحان کنید و حجم قبل و بعد را ثبت کنید. اگر WebP بزرگ‌تر شد، JPG منبع احتمالاً قبلاً بسیار خوب بهینه شده یا نوع تصویر برای این تنظیم مناسب نیست.
فایل دانلودشده را در Chrome، Firefox و Safari هدف آزمایش و پاسخ سرور را با MIME نوع image/webp ارائه کنید. برای مرورگر یا مصرف‌کننده‌ای که WebP را نمی‌پذیرد، عنصر picture با source WebP و img JPG راهکار مقاومی است. نام و ابعاد را ثابت نگه دارید تا CLS ایجاد نشود و width/height را در HTML مشخص کنید.
آشنایی با JPG و WebP برای عملکرد وب
JPG با دهه‌ها پشتیبانی، انتخاب عمومی عکس است و تقریباً هر سیستم مدیریت محتوا آن را می‌شناسد. کیفیت و subsampling روی حجم اثر دارند. بسیاری از فایل‌های قدیمی متادیتای دوربین یا پروفایل‌های غیرضروری دارند. JPG progressive می‌تواند حس بارگذاری را بهتر کند، اما بازده کدک آن از فرمت‌های جدید کمتر است.
WebP حالت lossy مبتنی بر فناوری VP8 و حالت lossless دارد و شفافیت را نیز پشتیبانی می‌کند. برای عکس، خروجی lossy معمولاً هدف است. پشتیبانی مرورگرهای معاصر گسترده شده، ولی نرم‌افزارهای خارج وب یا سامانه‌های قدیمی ممکن است مشکل داشته باشند. این فرمت بهینه‌سازی تحویل است و بهتر است فایل اصلی باکیفیت جدا بماند.
مقایسه JPG و WebP در سایت
| معیار | فرمت مبدأ | فرمت مقصد |
|---|---|---|
| بازده | خوب و شناخته‌شده | اغلب حجم کمتر در ظاهر مشابه |
| شفافیت | پشتیبانی نمی‌کند | پشتیبانی می‌کند |
| سازگاری | تقریباً همگانی | گسترده در مرورگر جدید، محدودتر خارج وب |
| نقش پیشنهادی | منبع fallback | تحویل اصلی به مرورگر جدید |
کیفیت، ابعاد و fallback حرفه‌ای
کیفیت WebP حدود 80 تا 85 برای بسیاری از عکس‌های وب نقطه شروع است، نه قانون. تصویر چهره، گرادیان آسمان و جزئیات پارچه را کنترل کنید. برای thumbnail کوچک می‌توان مقدار پایین‌تر انتخاب کرد، ولی تصویر زوم محصول به کیفیت بالاتر نیاز دارد. معیار نهایی نسبت حجم به کیفیت در اندازه نمایش و دستگاه واقعی است.
JPG اولیه را در مخزن رسانه حذف نکنید و فرایند تولید WebP را قابل تکرار نگه دارید. در قالب سایت از picture یا negotiation معتبر استفاده کنید و هدر کش طولانی را همراه نام نسخه‌دار تنظیم کنید. WebP سبک روی سروری با پاسخ کند یا تصویر بدون ابعاد هنوز تجربه ضعیفی می‌سازد؛ بهینه‌سازی فایل فقط یک بخش از عملکرد کامل است.