چرا اسکرینشاتهای شما 2 مگابایتاند، و چطور 60 تا 90% کوچکشان کنید
Dov Azencot
@DovAzencotیکبار اسکرینشاتهای یک رشتهایمیل بازبینی طراحی را شمردم. یازده تا، PNG، هر کدام بهطور میانگین کمی زیر 2 مگابایت. حدود بیستواندی مگابایت داشبورد عمدتاً سفید، که میان شش نفر پسوپیش پرواز میکرد که همه همان اپلیکیشن را در تبی دیگر باز داشتند. هیچکس بهش فکر نکرد، چون «کار میکرد». دام همینجاست. اسکرینشاتها بیسروصدا عظیماند، و دلیلش در خودِ نحوهٔ گرفتنشان توسط کامپیوترتان پخته شده.
چرا یک اسکرینشات فایلی 2 مگابایتی است
وقتی کلید میانبر اسکرینشات را میزنید، سیستمعاملتان یک PNG ذخیره میکند. پیشفرض معقولی است — PNG بدون اتلاف است، پس عکسبرداری پیکسلبهپیکسل بینقص است، و برای اسکرینشاتی پر از متن تیز این واقعاً غریزهٔ درستی است. مشکل، کاری است که PNG با حجم میکند.
PNG هر پیکسل را دقیقاً ذخیره میکند. صفحهٔ مدرن پُرتراکم است — یک عکس تمامپنجره روی نمایشگر رتینا یا 4K میتواند بیش از 2٬000 پیکسل عرض داشته باشد، و PNG وفادارانه تکتک آن میلیونها پیکسل را با وفاداری کامل ثبت میکند. برایش مهم نیست که 60% کادر همان طیف تقریباً سفید است. چیزی دور نمیریزد، چون دورریختن کاری نیست که میکند. پس اسکرینشات یک صفحهٔ تنظیمات تقریباً خالی — از نظر بصری تقریباً هیچ — باز هم 1.5 تا 2.5 مگابایت وزن دارد، چون بوم عظیم است حتی وقتی محتوا تُنُک است.
حرکت اصلی: تبدیل به WebP
WebP میتواند کاری کند که PNG نمیتواند — بااتلاف فشرده کند در حالی که لبههای تیز و شفافیت را نگه میدارد. بهطور خاص روی اسکرینشاتها، این ترکیب نزدیک به جادوست، چون اسکرینشات عمدتاً نواحی تخت است (ارزان برای فشردهسازی) با کمی متن (که WebP تیز نگهش میدارد). گذر بااتلاف نویز نامحسوس را دور میریزد؛ چشم شما هرگز شکایتی ثبت نمیکند.
اعداد واقعی از اسکرینشاتهای روی دیسک خودم:
| اسکرینشات | بهصورت PNG | بهصورت WebP |
|---|---|---|
| یک صفحهٔ تنظیمات، عمدتاً سفید | 1.6 MB | حدود 180 KB |
| یک داشبورد تحلیلی کامل | 2.4 MB | حدود 310 KB |
| یک ویرایشگر کد حالت تیره | 1.9 MB | حدود 240 KB |
این تقریباً 85 تا 90% کم است، و کنار هم که بگذاریدشان نمیتوانم بگویم کدام کدام است. متن تا سطح پیکسل خوانا میماند. این پُربازدهترین تبدیلی است که انجام میدهم، دقیقاً چون اسکرینشاتها از همان اول بهطرز افسارگسیختهای اضافهوزن دارند — مقدار هنگفتی هیچ هست که بشود از آن بیرون کشید.
«متن مگر تار نمیشود؟»
این ترس است، و ترس منصفانهای هم هست، چون احتمالاً یک اسکرینشات JPG با متن محو و هالهدار دیدهاید و فرض کردهاید همهٔ قالبهای بااتلاف همین کار را میکنند. WebP در لبهها از JPG بهتر است — بهطور معناداری بهتر. با تنظیم کیفیت معقول، متن روی اسکرینشات WebP تیز میماند. تا 400% زوم کردهام دنبال آرتیفکت دور حروف گشتهام و روی عکسهای عادی رابط کاربری دستخالی برگشتهام.
استثنای صادقانه: اگر کیفیت را برای شکار یک فایل خیلی کوچک تا ته پایین بکشید، سرانجام نرمشدن متن را خواهید دید. راهحل این است که آن کار را نکنید. یک تنظیم کیفیت میانه همین حالا بردِ 60 تا 90% را با متنِ سالم به شما میدهد. هیچ دلیلی ندارد که به بازهای فشار بیاورید که در آن میشکند.
کِی کوچککردن کمکی نمیکند
دو مورد که PNG را به حال خودش میگذارم.
اگر اسکرینشات قرار است به یک ابزار طراحی برگردد تا رویش نشانهگذاری، حاشیهنویسی یا ترکیب شود، آن را بدون اتلاف نگه میدارم. گذر بااتلاف WebP دری یکطرفه است، و نمیخواهم فشردهسازی را در چیزی بپزم که قرار است ویرایش و دوباره صادرش کنم. WebP را منتشر کنید، نسخهٔ مادر PNG را نگه دارید — همان قاعدهٔ همیشگی.
و اگر اسکرینشات از قبل کوچک است — یک بُرش ریز، یک دکمهٔ تنها، چیزی که از قبل زیر حدود 100 کیلوبایت است — تبدیل بهسختی سوزن را تکان میدهد. بردِ 60 تا 90% از فایلهایی میآید که عظیماند چون بوم عظیم است. یک بُرش کوچک آن مشکل را از قبل حل کرده. برای هیچ یک قدم اضافه نکنید.
اینکه واقعاً چطور انجامش میدهم
اسکرینشاتها را پیش از آنکه حتی نزدیک یک ایمیل یا سند بروند از مبدل PNG به WebP این سایت رد میکنم. در مرورگر شما رخ میدهد، پس عکسبرداری — که، راستش، اغلب نیمی از صفحه و هر چه در پسزمینه بوده را نشان میدهد — هرگز دستگاهتان را ترک نمیکند. PNG را رها کنید، تماشا کنید ستون حجم چطور فرومیریزد، WebP را دانلود کنید، بهجایش آن را پیوست کنید.
نکتهٔ بزرگتر ابزار نیست، بازتاب است. همین که «اسکرینشات، بعد کوچککن» خودکار شد، دیگر تصاویر 2 مگابایتی به آدمهایی که از قبل اپلیکیشن را باز دارند شلیک نمیکنید، ایمیلهایتان سریعتر ارسال میشوند، و رشتهها دیگر تا دهها مگابایت باد نمیکنند. آن ایمیل یازدهاسکرینشاتی بهجای بیستواندی مگابایت، رویهمرفته حدود 2 مگابایت میشد. همان تصاویر. همان همهچیز. فقط بدون هیچ وزن مُردهای.
نوشتههای مرتبط
چرا PNG را به WebP تبدیل میکنم (و آن یک باری که نمیکنم)
PNG برای ویرایش قالبی درخشان است و برای انتشار قالبی پرخرج. اینجا میگویم WebP واقعاً چه چیزی برایتان صرفهجویی میکند، کجا هیچ صرفهای ندارد، و آن تکقاعدهای که هرگز نمیشکنم.
AVIF در برابر WebP — فایل کوچکتر همیشه فایل درست نیست
AVIF معمولاً از نظر حجم از WebP جلو میزند، گاهی 20% یا بیشتر. اینجا میگویم آن فشردهسازی اضافه در زمان کدگذاری و موارد مرزی چه هزینهای دارد، و کِی هنوز سراغ WebP میروم.
SVG به PNG — کِی واقعاً به پیکسل نیاز دارید (و کِی نباید)
یک SVG تا بینهایت مقیاس میگیرد و ریز میماند، پس رستریکردنش مثل یک پسرفت به نظر میرسد. گاهی هست. اینجا میگویم کِی واقعاً به پیکسلهای PNG از یک بردار نیاز دارید، و کِی SVG را به حال خودش بگذارید.
همهٔ نوشتهها