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

چرا اسکرین‌شات‌های شما 2 مگابایت‌اند، و چطور 60 تا 90% کوچکشان کنید

یک‌بار اسکرین‌شات‌های یک رشته‌ایمیل بازبینی طراحی را شمردم. یازده تا، 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 مگابایت می‌شد. همان تصاویر. همان همه‌چیز. فقط بدون هیچ وزن مُرده‌ای.

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


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