PNGها بابت غول‌پیکر بودن شهرت بدی دارند و حقشان است — یک آیکون واحد به‌نحوی می‌تواند از یک عکس کامل سنگین‌تر باشد. خبر خوب این است که بیشتر آن تورم هدررفته است و می‌توانید بیرونش بکشید در حالی که لبه‌های واضح و پس‌زمینه شفافی را که از اول برایش PNG می‌خواستید نگه دارید.

چرا PNGها این‌قدر بزرگ‌اند

چطور یک PNG با شفافیت را فشرده کنیم (و نگهش داریم) — visual 1
چرا PNGها این‌قدر بزرگ‌اند

PNG یک فرمت بدون‌اتلاف است. برخلاف JPEG، چیزی دور نمی‌اندازد — هر پیکسل را دقیقاً ذخیره می‌کند. این برای لوگوهای تیز، آیکون‌ها و اسکرین‌شات‌های رابط کاربری عالی است، اما یعنی فایل باید حجم زیادی داده را صادقانه توصیف کند.

قاتل واقعی عمق رنگ است. یک PNG استاندارد می‌تواند تا ۱۶ میلیون رنگ (۲۴ بیتی) به‌علاوه یک کانال شفافیت کامل ذخیره کند. اما لوگوی شما احتمالاً از یک دوجین رنگ استفاده می‌کند. مجموعه آیکون‌تان، شاید پنجاه. همه آن ظرفیت رنگ استفاده‌نشده هنوز بایت خرج می‌کند تا در دسترس بماند. شما بابت یک بوم ۱۶ میلیون رنگ برای کشیدن تصویری که به بیست رنگ نیاز دارد می‌پردازید.

یک دام دوم هم هست: مردم عکاسی را به‌صورت PNG ذخیره می‌کنند. یک عکس واقعاً از میلیون‌ها رنگ و گرادیان‌های ظریف استفاده می‌کند، پس PNG نمی‌تواند خوب فشرده‌اش کند — فایل پنج تا ده برابر بزرگ‌تر از همان عکس به‌صورت JPEG یا WebP از آب درمی‌آید. اگر «مشکل PNG» شما واقعاً یک عکس است، راه‌حل تبدیل آن است، نه فشرده کردنش.

کوانتش: راه‌حلی که شفافیت را نگه می‌دارد

چطور یک PNG با شفافیت را فشرده کنیم (و نگهش داریم) — visual 2
کوانتش: راه‌حلی که شفافیت را نگه می‌دارد

برای PNGهای واقعی — رنگ یکدست، لبه‌های تیز، شفافیت — حرکت برنده کوانتش رنگ است. به‌جای ذخیره میلیون‌ها رنگ ممکن، تصویر به یک پالت ۲۵۶ رنگ با‌دقت‌انتخاب‌شده کاهش می‌یابد. چون تصویر شما در هر صورت هرگز از کسری از آن استفاده نکرده، نتیجه یکسان به نظر می‌رسد در حالی که فایل ۶۰ تا ۸۰٪ افت می‌کند.

بخشی که مردم نگرانش‌اند: آیا این پس‌زمینه شفاف را نابود می‌کند؟ نه. کوانتش پالت رنگ را کاهش می‌دهد، اما کانال شفافیت (آلفا) حفظ می‌شود. لوگوی شما هنوز تمیز روی هر پس‌زمینه‌ای می‌افتد — بدون کادر سفید، بدون حاشیه خاکستری. این همان تکنیکی است که بهینه‌سازهای معروف PNG سبک «tinify» استفاده می‌کنند و به همین دلیل می‌توانند PNGهای شفاف را این‌قدر چشمگیر کوچک کنند.

فشرده‌ساز تصویر از IMG.DIY کوانتش ۲۵۶ رنگ را به‌طور خودکار روی PNGها اعمال می‌کند. یک عدد کیفیت انتخاب نمی‌کنید — برای یک فرمت بدون‌اتلاف اسلایدر کیفیتی نیست — فقط فایل را می‌اندازید و یک PNG بسیار کوچک‌تر با شفافیت دست‌نخورده می‌گیرید.

چک‌لیست سریع برای PNGهای شفاف

  1. تأیید کنید که واقعاً یک گرافیک است، نه یک عکس. لوگوها، آیکون‌ها، تصویرسازی‌ها و عکس‌های رابط کاربری → به‌صورت PNG فشرده کنید. عکاسی → به WebP (که از شفافیت هم پشتیبانی می‌کند) یا JPEG (که نمی‌کند) تبدیل کنید.
  2. ابعاد بیش‌ازحد‌بزرگ را ببرید. یک آیکون ۲۰۰۰ پیکسلی که در ۲۰۰ پیکسل نشان داده می‌شود ۱۰۰ برابر پیکسلی که نیاز دارد است. اول عرض را سقف بگذارید — فشرده‌ساز یک سقف عرض اختیاری دارد.
  3. کوانتش کنید. بگذارید کاهش ۲۵۶ رنگ کار سنگین را انجام دهد. شفافیت جان سالم به در می‌برد.
  4. لبه‌ها را تأیید کنید. در ۱۰۰٪ باز کنید و لبه‌های آلفا را در برابر یک پس‌زمینه شلوغ بررسی کنید تا تأیید کنید تمیزند.

دسته‌ای‌اش کنید، خصوصی نگهش دارید

اگر یک مجموعه آیکون کامل یا یک پوشه از گرافیک‌های خروجی‌گرفته‌شده دارید، لازم نیست یکی‌یکی بروید. فشرده‌ساز دسته‌ها را از پس برمی‌آید و یک ZIP برمی‌گرداند و هرگز فایلی بزرگ‌تر از نسخه اصلی خروجی نمی‌دهد — پس یک پوشه از PNGهای از‌قبل‌فشرده تصادفاً بزرگ نمی‌شود.

همه‌چیز کاملاً در مرورگر شما با Canvas و WebAssembly اجرا می‌شود. PNGهای شما هرگز جایی آپلود نمی‌شوند و بعد از اولین بازدید ابزار کش می‌شود و آفلاین کار می‌کند. دارایی‌های برند یک مشتری را در یک قطار بدون سیگنال فشرده کنید و چیزی لپ‌تاپ شما را ترک نمی‌کند.

نتیجه: PNGها بزرگ‌اند چون ظرفیت رنگی را که استفاده نمی‌کنید احتکار می‌کنند. به ۲۵۶ رنگ کوانتش کنید، شفافیت را نگه دارید و کوچک شدن فایل را بدون یک تغییر دیده‌شدنی تماشا کنید.