چرا PNG را به WebP تبدیل میکنم (و آن یک باری که نمیکنم)
Dov Azencot
@DovAzencotروی دسکتاپم پوشهای دارم به نام to-shrink. سالها همانجایی بود که اسکرینشاتها میرفتند تا بمیرند — PNGهای دومگابایتی از داشبوردها و ماکاپهای نیمهکاره که برای آدمهایی ایمیل میکردم که واقعاً هیچ نیازی به دو مگابایت از صفحهٔ من نداشتند. یک بعدازظهر بالاخره پوشه را باز کردم و حساب کردم: بزرگتر از اپلیکیشنی بود که همان هفته منتشر کرده بودم. نکتهٔ خاموش PNG همین است. قالبی فوقالعاده است که مقدار حیرتآوری فضا هدر میدهد، و بیشترمان اصلاً متوجه نمیشویم، چون پهنای باند ارزان است و فایل «درست باز میشود».
پس بگذارید همان استدلالی را بیاورم که کاش کسی خیلی زودتر برای خودم آورده بود. اگر یک PNG راهی یک وبسایت است — هر جایی که قرار است به آن نگاه شود نه ویرایش — تقریباً بهیقین باید بهجایش WebP باشد.
PNG واقعاً در چه چیزی خوب است
PNG بدون اتلاف است. هر پیکسلی که در آن میگذارید، دقیقاً همان بیرون میآید، هر بار. این یک فضیلت واقعی است — برای یک فایل مادر. برای همین است که ابزار طراحیتان PNG خروجی میدهد، اسکرینشاتها PNG هستند، و هر چیزی با لبههای تیز و شفافیت سراغ آن میرود. بدون اتلاف یعنی میتوانید صد بار پشت هم بازش کنید، دستکاریاش کنید و دوباره ذخیره کنید بیآنکه ذرهای افت کند.
گیر کار اینجاست که «هر پیکسل را بینقص نگه دار» وعدهای است که بهایش را با بایت میپردازید. یک عکس را بهصورت PNG ذخیره کنید و صادقانه گرادیانها، نویز حسگر و تغییرات ظریف رنگ را ثبت میکند — چیزهایی که اگر فقط تقریبی باشند، چشم شما هرگز جایشان را خالی نمیبیند. دارید بهای کامل جزئیاتی را میپردازید که هیچکس نمیبیند.
کاری که WebP میکند و PNG نمیتواند
WebP پاسخ گوگل به یک پرسش ساده بود: اگر فقط یک قالب بهتر بسازیم چه؟ دو کار میکند که از PNG برنمیآید. میتواند وقتی بخواهید با اتلاف فشرده کند — چیزهای نامحسوس را همانطور که JPEG دور میریزد کنار میگذارد، اما زیرکانهتر — و در همین حال یک کانال آلفای کامل را نگه میدارد. همین بخش دوم است که معجزهٔ خاموش ماجراست. سالها معامله این بود: «شفافیت یا فایل کوچک، یکی را انتخاب کن». WebP هر دو را با هم میدهد.
در عمل، تبدیل یک PNG عکسی یا پر از اسکرینشات با کیفیتی معقول جایی بین 60% تا 90% کوچکتر درمیآید. نه 10%. یک اسکرینشات 1.8 مگابایتی حدوداً به 250 کیلوبایت میرسد، و کنار هم که بگذاریدشان نمیتوانید بگویید کدام کدام است. این آزمایش را بیش از آنچه دوست دارم اعتراف کنم روی خودم اجرا کردهام، هر بار مطمئن که اینبار مچ WebP را میگیرم. هیچوقت نگرفتم.
مقایسهای که مرا معتقد کرد
اعداد تقریبی از دستهای که ماه گذشته تبدیل کردم:
| PNG اصلی | به WebP |
|---|---|
| اسکرینشات رابط کاربری — 1.8 MB | ~240 KB |
| عکس هدر — 3.1 MB | ~380 KB |
| لوگوی تخت دورنگ — 42 KB | ~30 KB |
به لوگو نگاه کنید. تقریباً تکان نخورد — و همین پانوشت است که اهمیت دارد.
کِی زحمت تبدیل را به خودم نمیدهم
گرافیک ساده — رنگهای تخت، چندتایی از آنها، لبههای سخت — دقیقاً همان چیزی است که PNG برای فشردهسازیاش ساخته شده، و این کار را تقریباً بهخوبی هر قالب دیگری انجام میدهد. یک آیکون دورنگ، یک نمودار خطنقاشی، یک کد QR: در PNG نگهشان دارید، یا اگر بردار را دارید بهتر است بهصورت SVG منتشرشان کنید. WebP به این فایلها آسیبی نمیزند، اما کمک معناداری هم نمیکند، و شما بیهیچ دلیلی یک قدم اضافه کردهاید.
آن بار دیگری که تبدیل نمیکنم، فایل مادر است. من هرگز به تنها نسخهٔ یک چیز دست نمیزنم. حالت با اتلاف WebP دری یکطرفه است: جزئیاتی را که کنار میگذارید، پس نمیگیرید. پس این است آن تکقاعدهای که هرگز نمیشکنم — نسخهای را که منتشر میکنید تبدیل کنید، اصل را همانجا که ویرایش میکنید نگه دارید. روی دستگاه من این عملاً دو فایل است: PNG در پوشهٔ پروژه میماند، WebP به سایت میرود. بیمهٔ ارزان، و یکبار هم پشیمان نشدهام.
«ولی آیا واقعاً همهجا کار میکند؟»
این زمانی ایراد واقعی بود، و دیگر نیست. هر مرورگری که مردم واقعاً از آن استفاده میکنند از حدود سال 2020 از WebP پشتیبانی کرده — Chrome، Safari، Firefox، Edge، همهشان. کلاینتهای ایمیل هنوز ناپایدارند و بعضی نرمافزارهای سازمانی قدیمی با آن عجیب رفتار میکنند، پس برای یک خبرنامه هنوز سراغ JPEG میروم. اما برای وب باز؟ ارائهٔ WebP بدون نسخهٔ پشتیبان سالهاست که دیگر یک انتخاب جسورانه نیست.
اینکه واقعاً چطور انجامش میدهم
دلیل صادقانهٔ اینکه مبدل PNG به WebP این سایت را ساختم این است که خسته شدم از کشیدن اسکرینشاتها داخل ابزارهای آنلاین تصادفی برای کوچک کردنشان، در حالی که هیچوقت درست نمیدانستم فایلهایم بعدش کجا میروند. پس نسخهای که پیشنهاد میکنم همان کسلکننده و خصوصی است: روی دستگاه خودتان، درست داخل مرورگر، جایی که فایل اصلاً دستگاه را ترک نمیکند تبدیل کنید. PNGها را رها کنید، تماشا کنید ستون حجم چطور پایین میآید، WebP را دانلود کنید.
اما بحث بر سر ابزار نیست. بحث بر سر عادت است. همین که «PNG برای ویرایش، WebP برای انتشار» خودکار شد، دیگر اسکرینشاتهای 2 مگابایتی برای آدمها نمیفرستید، صفحههایتان مجانی سریعتر میشوند، و آن پوشهٔ to-shrink روی دسکتاپتان بالاخره خالی میماند. مال من مانده — حدود یک سالی هست. پیروزی کوچکی است، اما همین را هم میپذیرم.
نوشتههای مرتبط
چرا اسکرینشاتهای شما 2 مگابایتاند، و چطور 60 تا 90% کوچکشان کنید
اسکرینشات یک داشبورد عمدتاً خالی هیچ دلیلی ندارد 2 مگابایت باشد. اینجا میگویم چرا PNG این بلا را سرتان میآورد، و چطور تبدیل به WebP آن را 60 تا 90% کم میکند بیآنکه چیز دیدنیای از دست برود.
AVIF در برابر WebP — فایل کوچکتر همیشه فایل درست نیست
AVIF معمولاً از نظر حجم از WebP جلو میزند، گاهی 20% یا بیشتر. اینجا میگویم آن فشردهسازی اضافه در زمان کدگذاری و موارد مرزی چه هزینهای دارد، و کِی هنوز سراغ WebP میروم.
PNG یا JPG؟ قاعدهٔ دهسالهای که برای تصمیم به کار میبرم
بدون اتلاف در برابر بااتلاف، لبهها در برابر عکسها، شفافیت در برابر بدون شفافیت. یک پرسش ساده به شما میگوید هر فایل باید چه قالبی باشد — با جدول حجم واقعی که ثابتش کند.
همهٔ نوشتهها