CodeKitHubЩо це за інструмент?
PNG — формат без втрат, тож у нього немає налаштування "якості", яке можна знизити — просте перекодування майже нічого не дає. Справжнє стиснення PNG працює інакше: квантизація палітри зводить зображення до ретельно підібраного набору кольорів (до 256). Оскільки скриншоти, логотипи й графіка інтерфейсу зазвичай і так не використовують більше окремих кольорів, файл стає на 50–70% меншим, виглядаючи так само. Прозорість (альфа-канал) повністю зберігається.
Це та сама техніка, що лежить в основі відомих сервісів на кшталт TinyPNG — відмінність тут у тому, що вона працює у вашому браузері через рушій з відкритим кодом, тож ваші зображення залишаються на вашому пристрої, і немає жодного денного ліміту файлів.
Навіщо його використовувати?
- Справжнє стиснення (типово 50–70%), а не плацебо-перекодування.
- Прозорість збережена — безпечно для логотипів, іконок та елементів інтерфейсу.
- Без завантаження на сервер, на відміну від сервісів на кшталт TinyPNG — а отже, без обмежень на кількість файлів.
- Регульований бюджет кольорів (16–256) із показом економії для кожного зображення.
- Підтримка пакетної обробки, безкоштовно, без водяного знака.
Як користуватися
- Перетягніть PNG-файли в область завантаження (рушій стиснення завантажується автоматично, один раз).
- Залиште 256 кольорів для візуально ідентичного результату або зменшіть значення для меншого розміру файлу.
- Кожен результат показує точну економію — натисніть "Завантажити".
- Якщо фотореалістичний PNG не стискається достатньо, конвертуйте його в JPG (див. PNG в JPG).
Приклад
Введення
app-screenshot.png — 980 КБРезультат
app-screenshot-compressed.png — 290 КБ (−70%), 256 кольорівСкриншоти й графіка інтерфейсу чудово піддаються квантизації; палітра охоплює кожен колір, який вони фактично використовують.
З нашого власного тестування
Наш тест при запуску використовував навмисно складне зображення: PNG 600×400 із 200 накладеними напівпрозорими кольоровими плямами — значно хаотичніше за типовий скриншот. Воно стиснулося з 31,1 КБ до 7,8 КБ (−75%) за 256 кольорів, зі збереженим альфа-каналом. Реальна графіка інтерфейсу стискається ще краще, бо використовує менше окремих кольорів, ніж наш стрес-тест. Чесний зворотний бік, який ми теж підтвердили: фотографічний контент показує помітну смугастість при 256 кольорах — саме тоді варто скористатися шляхом JPG/WebP, тому посилання на конвертер розміщені саме на розділ вище.
Типові сценарії використання
- Зменшення розміру скриншотів застосунку чи сайту перед додаванням їх до звіту про помилку чи сторінки документації.
- Стиснення набору логотипів чи іконок для сайту без втрати прозорого фону, від якого залежать розробники.
- Зменшення розміру експортів макетів інтерфейсу з дизайн-інструментів перед тим, як поділитися ними з командою.
- Скорочення ваги партії графіки інтерфейсу для стайлгайду чи репозиторію дизайн-системи.
Часті запитання
Як можна ще стиснути формат без втрат?
Роблячи його трохи "з втратами" розумним чином: квантизація підбирає ~256 кольорів, які найкраще передають зображення, і зіставляє кожен піксель із ними. Для графіки з обмеженим діапазоном кольорів результат візуально ідентичний — технічно з втратами, практично нерозрізненно.
Чи збережеться прозорість після стиснення?
Так — альфа-канал зберігається, включно з напівпрозорими пікселями (тіні, згладжені краї). Саме це й потрібно логотипам та елементам інтерфейсу.
Коли стиснення PNG працює погано?
На фотографіях і плавних градієнтах — вони використовують тисячі кольорів, тож 256 можуть дати смугастість. Для фотографічного контенту конвертація в JPG чи WebP заощаджує значно більше; саме для цього призначений наш конвертер PNG в JPG.
Чим це відрізняється від TinyPNG?
Та сама базова техніка (квантизація палітри), подібна економія. Практичні відмінності: ваші файли тут ніколи не завантажуються на сервер, немає обмеження в 20 файлів за раз, немає ліміту 5 МБ і немає платного тарифу — адже жоден сервер не виконує роботу.
Яку кількість кольорів обрати?
Почніть із 256 — візуально ідентично для майже будь-якої графіки. Зменшіть до 64 чи 32 для іконок і простих елементів інтерфейсу, щоб стиснути ще більше; слідкуйте за мініатюрою попереднього перегляду на предмет смугастості.