Как уменьшить вес PNG без потери качества — все способы

PNG‑логотип весит три мегабайта, страница грузится вечность, а «Сжать» в редакторе почему‑то ничего не меняет. Знакомо? PNG — формат без потерь, поэтому по умолчанию он большой, но сжимать его можно — и часто в 3‑5 раз без видимой глазу разницы. Разбираем, откуда берётся вес, какие инструменты реально работают и в каких случаях правильный ответ — вообще не PNG.

Почему PNG такой тяжёлый

PNG хранит изображение без потерь: каждый пиксель восстанавливается в точности. Это его суперсила (нет артефактов, есть прозрачность) и его проклятие: фотография или градиент в PNG весят в разы больше, чем в JPG. Подробное сравнение форматов — в статье PNG или JPG — что лучше.

Вес PNG складывается из трёх факторов:

1. Размеры в пикселях. Вес растёт квадратично: картинка 4000×4000 — это 16 мегапикселей против одного у 1000×1000.
2. Число цветов. PNG‑24 хранит 16,7 млн цветов; PNG‑8 — максимум 256. Для логотипов и графики 256 цветов почти всегда достаточно.
3. Эффективность упаковки. Один и тот же пиксельный массив можно закодировать компактнее или расточительнее — на этом играют оптимизаторы.

Уровень 1Проверьте размеры — самая частая причина

Прежде чем сжимать, откройте свойства файла. Если картинка для сайта имеет 4000 пикселей по ширине, а показывается в блоке шириной 400 — никакой компрессор не спасёт: уменьшите сам размер. Правило: экспортируйте в 2× от размера показа (для Retina‑экранов) — для блока 400 px нужен файл 800 px. Какие размеры нужны разным площадкам — в статье размеры логотипа для сайта и соцсетей.

Уменьшить размеры умеет что угодно: Просмотр на Mac (Инструменты → Настроить размер), Figma (экспорт с нужным множителем), любой онлайн‑редактор.

Уровень 2Умное сжатие

Онлайн: TinyPNG и Squoosh

TinyPNG — самый известный компрессор: перетащили файлы (до 20 за раз бесплатно) — получили результат, обычно минус 50‑80%. Секрет — квантование: сервис сокращает палитру до ~256 оптимально подобранных цветов с дизерингом. Формально это сжатие с потерями, но на логотипах и интерфейсной графике разницу не видно даже под лупой.

Squoosh (проект Google) даёт больше контроля: ползунок числа цветов, мгновенное сравнение «до/после» половинками экрана, плюс конвертация в WebP и AVIF тут же. Работает локально в браузере — картинки никуда не загружаются, что важно для конфиденциальных макетов.

Утилиты: pngquant и oxipng

Для пакетной обработки и автоматизации:

• pngquant — то же квантование, что у TinyPNG, в командной строке: pngquant --quality=65-85 *.png. Сотни файлов за секунды.
• oxipng / OptiPNG — оптимизация без потерь: перепаковывают данные эффективнее, выигрывая 5‑30% без единого изменённого пикселя. Годится, когда потери недопустимы принципиально.
• Связка «pngquant, затем oxipng» — стандартный конвейер сборки сайтов.

Экспорт из редакторов

В Photoshop выбирайте «Export As → PNG‑8», когда цветов немного, — это то же квантование на этапе экспорта. Figma экспортирует только PNG‑24, поэтому её экспорт почти всегда стоит догонять компрессором.

Уровень 3Может, вам не нужен PNG?

Иногда лучший способ сжать PNG — перестать им пользоваться:

Растровый логотип можно перевести в вектор — тогда вопрос веса закрывается навсегда: как перевести логотип в вектор. А если оптимизируете SVG‑файлы, у нас есть отдельная инструкция: как оптимизировать SVG.

Практический чек‑лист

1. Узнайте, в каком размере картинка реально показывается, и экспортируйте в 2× от него.
2. Прогоните через TinyPNG/Squoosh (разово) или pngquant (пакетно).
3. Посмотрите результат глазами на 100% и 200% масштаба — особенно градиенты и полупрозрачные края: именно там квантование может дать полосы.
4. Для сайта — отдавайте WebP с PNG‑фолбэком.
5. Оригиналы храните отдельно и не пережимайте повторно.

Кстати, все PNG‑логотипы в нашем каталоге уже оптимизированы, а карточки сетки грузятся лёгкими WebP‑превью — скачивая файл, вы получаете полновесный оригинал, а страницы при этом летают. Как правильно скачивать логотипы в нужном формате — в статье как скачать логотип с сайта.