چرا وب‌مستر PNG را به WebP تبدیل می‌کند؟
PNG لوگو و رابط را با لبه تیز و شفافیت عالی ذخیره می‌کند، اما اسکرین‌شات بزرگ یا تصویر محصول شفاف ممکن است بسیار حجیم شود. WebP می‌تواند آلفا را حفظ و رنگ‌ها را با روش کارآمدتری فشرده کند. برای صفحه‌ای با چند تصویر شفاف، کاهش هر فایل روی زمان دانلود موبایل و مصرف پهنای باند اثر جمعی دارد.
انتخاب حالت به محتوای تصویر وابسته است. لوگوی کم‌رنگ و متن تیز از WebP lossless سود می‌برد، چون پیکسل دقیق می‌ماند. عکس دارای پس‌زمینه شفاف می‌تواند با حالت lossy و کیفیت مناسب بسیار سبک‌تر شود. اگر خروجی lossy را برای UI کوچک انتخاب کنید، دور حروف و آیکون ممکن است نرم شود؛ مقایسه در مقیاس ۱۰۰ درصد ضروری است.
پردازش محلی است و asset نسخه بعدی سایت روی سرور تبدیل ذخیره نمی‌شود. WebP نهایی را قبل از deploy با pipeline، CMS و CDN داخلی خود آزمایش کنید. بعضی سامانه‌ها هنگام آپلود دوباره تصویر را تبدیل یا آلفا را حذف می‌کنند. حجم روی دیسک تنها معیار نیست؛ Content-Type صحیح، cache و ابعاد HTML نیز برای عملکرد لازم‌اند.
بهینه‌سازی PNG شفاف برای انتشار
PNG نهایی و متناسب با اندازه نمایش را انتخاب کنید. ابزار وجود آلفا و ابعاد را نشان می‌دهد. برای لوگو ابتدا حالت lossless را امتحان کنید؛ برای عکس یا اسکرین‌شات رنگی کیفیت 80 تا 90 را بسنجید. پس‌زمینه شطرنجی کمک می‌کند مطمئن شوید آلفا حفظ شده است. درصد کاهش را کنار ظاهر لبه‌ها ارزیابی کنید.
WebP را دانلود و در مرورگرهای هدف، حالت روشن و دارک سایت و نمایش رتینا آزمایش کنید. اگر fallback لازم است PNG را در عنصر picture یا سازوکار build نگه دارید. نسخه اصلی را حذف نکنید، چون ویرایش بعدی بهتر است از PNG بدون اتلاف انجام شود و سپس WebP انتشار دوباره ساخته شود؛ ویرایش WebP lossy می‌تواند افت نسلی ایجاد کند.
آشنایی با PNG و WebP برای دارایی وب
PNG پیکسل و آلفا را بدون اتلاف ذخیره می‌کند و برای master گرافیکی قابل اعتماد است. الگوریتم آن روی سطح‌های تکراری خوب عمل می‌کند، اما عکس، نویز و گرادیان پیچیده حجم را افزایش می‌دهند. PNG-8 و کاهش palette می‌تواند سبک باشد، ولی این ابزار بر تبدیل عمومی با رنگ کامل تمرکز دارد.
WebP انتخاب میان lossless و lossy را همراه شفافیت ارائه می‌کند. حالت lossless برای گرافیک و حالت lossy برای عکس مناسب‌تر است. مرورگر جدید پشتیبانی وسیع دارد، ولی برنامه‌های قدیمی خارج وب ممکن است باز نکنند. بنابراین WebP نسخه delivery و PNG نسخه source مناسبی است. تبدیل رفت‌وبرگشت برای آرشیو توصیه نمی‌شود.
مقایسه PNG و WebP برای تصویر شفاف سایت
| معیار | فرمت مبدأ | فرمت مقصد |
|---|---|---|
| روش | بدون اتلاف DEFLATE | lossless یا lossy انتخابی |
| آلفا | کامل و استاندارد | حفظ شفافیت با حجم بهینه |
| حجم عکس | اغلب بالا | معمولاً پایین‌تر |
| نقش | فایل منبع و fallback | تحویل سریع به مرورگر جدید |
حالت lossless یا کیفیت lossy؟
برای لوگو، QR، اسکرین‌شات کد و آیکون، WebP lossless را با PNG مقایسه کنید. برای محصول یا تصویر دارای سایه نرم، lossy با کیفیت 85 می‌تواند کاهش بیشتری بدهد. اگر خروجی WebP از PNG بزرگ‌تر شد، همان PNG شاید از قبل بهینه یا تصویر بسیار ساده باشد؛ صرف جدیدبودن فرمت تضمین نمی‌کند همیشه کوچک‌تر شود.
در دارک‌مود به لبه‌های نیمه‌شفاف روشن دقت کنید. هاله ممکن است در زمینه سفید دیده نشود ولی روی زمینه تیره آشکار شود. آلفا را حفظ کنید و رنگ زمینه را داخل تصویر bake نکنید مگر طراحی همین را بخواهد. برای دسترسی و کیفیت، تصویر متنی را جای HTML واقعی استفاده نکنید؛ فشرده‌سازی asset مشکل معنایی محتوا را حل نمی‌کند.