PNG мають погану репутацію через величезний розмір, і вона заслужена — одна іконка може якось важити більше за повноцінну фотографію. Гарна новина: більшість цього роздування — марнотратство, і ви можете зняти його, зберігши різкі краї й прозорий фон, заради яких вам і потрібен був PNG.
Чому PNG такі великі
PNG — це формат без втрат. На відміну від JPEG, він нічого не викидає — він зберігає кожен піксель точно. Це ідеально для різких логотипів, іконок і скріншотів інтерфейсу, але означає, що файл має чесно описати багато даних.
Справжній вбивця — глибина кольору. Стандартний PNG може зберігати до 16 мільйонів кольорів (24-бітний) плюс повний канал прозорості. Але ваш логотип, ймовірно, використовує дюжину кольорів. Ваш набір іконок — може, п'ятдесят. Уся ця невикористана колірна місткість усе одно коштує байтів, щоб лишатися доступною. Ви платите за полотно на 16 мільйонів кольорів, щоб намалювати картину, якій треба двадцять.
Є друга пастка: люди зберігають фотографії як PNG. Фото справді використовує мільйони кольорів і тонкі градієнти, тож PNG не може добре його стиснути — файл виходить у п'ять-десять разів більшим за те саме фото як JPEG чи WebP. Якщо ваша «проблема PNG» насправді фото, виправлення — конвертувати його, а не стискати.
Квантування: виправлення, що зберігає прозорість
Для справжніх PNG — плаский колір, різкі краї, прозорість — переможний хід — це квантування кольору. Замість зберігання мільйонів можливих кольорів зображення зводиться до ретельно обраної палітри з 256 кольорів. Оскільки ваше зображення все одно ніколи не використовувало більше частки цього, результат виглядає ідентично, а файл падає на 60–80%.
Частина, за яку люди хвилюються: чи це знищує прозорий фон? Ні. Квантування зменшує колірну палітру, але канал прозорості (альфа) зберігається. Ваш логотип усе одно чисто лягає на будь-який фон — без білого прямокутника, без сірої облямівки. Це та сама техніка, яку використовують відомі PNG-оптимізатори у стилі «tinify», і саме тому вони можуть так драматично зменшувати прозорі PNG.
Стискач зображень від IMG.DIY застосовує квантування до 256 кольорів для PNG автоматично. Ви не обираєте число якості — для формату без втрат немає повзунка якості — ви просто кидаєте файл і отримуєте набагато менший PNG із цілою прозорістю.
Швидкий чек-лист для прозорих PNG
- Підтвердьте, що це справді графіка, а не фото. Логотипи, іконки, ілюстрації й знімки інтерфейсу → стискати як PNG. Фотографії → конвертувати у WebP (що теж підтримує прозорість) чи JPEG (що ні).
- Обріжте завеликі розміри. Іконка 2000px, показана в 200px, — це в 100 разів більше пікселів, ніж їй треба. Спершу обмежте ширину — у стискача є опційне обмеження ширини.
- Квантуйте. Дайте зменшенню до 256 кольорів зробити важку роботу. Прозорість виживає.
- Перевірте краї. Відкрийте на 100% і перевірте альфа-краї на насиченому фоні, щоб підтвердити, що вони чисті.
Робіть пакетом, тримайте приватно
Якщо у вас цілий набір іконок чи тека експортованої графіки, не треба йти по одному. Стискач впорається з пакетами й поверне ZIP, і він ніколи не видає файл більший за оригінал — тож тека вже щільних PNG випадково не розростеться.
Усе працює повністю у вашому браузері з Canvas і WebAssembly. Ваші PNG ніколи нікуди не завантажуються, а після першого відвідування інструмент кешується й працює офлайн. Стисніть брендові матеріали клієнта в потязі без сигналу — і нічого не залишить ваш ноутбук.
Висновок: PNG великі, бо накопичують колірну місткість, яку ви не використовуєте. Квантуйте до 256 кольорів, збережіть прозорість — і дивіться, як файл зменшується без видимих змін.