shadcn.io— هزاران بلوک آمادهٔ shadcn/ui
رفتن به محتوا

چرا PNG را به WebP تبدیل می‌کنم (و آن یک باری که نمی‌کنم)

روی دسکتاپم پوشه‌ای دارم به نام 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 روی دسکتاپتان بالاخره خالی می‌ماند. مال من مانده — حدود یک سالی هست. پیروزی کوچکی است، اما همین را هم می‌پذیرم.

نوشته‌های مرتبط


همهٔ نوشته‌ها