Как сжать PNG-файл и чем за это платишь

PNG уже сжат, причём без потерь: внутри работает алгоритм, который ничего не выбрасывает. Поэтому «сжать PNG», оставшись в PNG, почти нечем — уменьшить вес можно, только сменив формат. Наш компрессор пишет JPEG и WebP: первый весит мало, но не умеет прозрачности, второй сохраняет прозрачность и обычно тоже легче исходника. Выбор между ними определяется не весом, а содержимым картинки.

Локально в браузередо 100 МБбез регистрации

Коротко о цифрах

Форматы вывода компрессора: JPEG и WebP; PNG не предлагается — он уже без потерь
Прозрачность: JPEG заливает её белым, WebP сохраняет альфа-канал
Проверка на подмену: тип полученного файла сверяется с запрошенным, при расхождении — отказ
Ограничение старых браузеров: канвасный WebP появился в Safari только в 16.4

Что делать с прозрачностью

У JPEG нет альфа-канала. Если просто перекодировать в него картинку с прозрачным фоном, каждый прозрачный пиксель станет чёрным — классический результат, который потом пытаются объяснить сбоем инструмента. Мы подкладываем под изображение белый фон перед кодированием, поэтому логотип на прозрачном превращается в логотип на белом, а не в чёрный прямоугольник.

Если белая подложка не годится — например, картинку будут класть на цветной фон, — остаётся WebP: он умеет прозрачность и при этом весит заметно меньше PNG. Обратная сторона в поддержке: браузер должен уметь кодировать WebP в канвасе, и старые версии Safari этого не умели.

Когда PNG менять не нужно

Скриншоты интерфейсов и схемы с плоскими заливками PNG хранит эффективно, а JPEG портит: вокруг букв появляются ореолы, которые в тексте видно сразу.
Иконки и логотипы с резкими краями теряют в JPEG именно то, ради чего их делали, — чёткость границ.
Картинка с прозрачностью, которую положат на неизвестный фон, обязана остаться в формате с альфа-каналом.
Скан или фотография, случайно сохранённые в PNG, — наоборот, идеальный кандидат на перевод в JPEG: там выигрыш кратный.

Защита от подмены формата

Браузерная функция записи картинки не сообщает об ошибке, если её просят о формате, который она не умеет: она молча отдаёт PNG. Для фотографии это означает файл в несколько раз крупнее исходного, названный результатом сжатия, — худший вид неудачи, потому что он выглядит как успех.

Поэтому мы сравниваем тип полученных данных с запрошенным и отказываемся, если они не совпали. Лучше честное сообщение о том, что браузер не умеет нужный формат, чем «сжатый» файл, который стал тяжелее.

Частые вопросы

Можно ли сжать PNG, оставив его PNG?

Заметно — нет. Формат уже применяет сжатие без потерь, и выигрыш даёт разве что уменьшение размера картинки или сокращение палитры, а не смена настроек кодировщика.

Почему после перевода в JPEG фон стал белым?

Потому что JPEG не хранит прозрачность вообще. Белая подложка — осознанный выбор: без неё прозрачные пиксели превратились бы в чёрные, что почти всегда хуже.

Что выбрать для скриншота с текстом?

Оставить PNG. Плоские цвета он хранит эффективно, а JPEG добавит вокруг букв заметные ореолы, ради экономии, которая на скриншоте обычно невелика.

WebP всегда легче PNG?

Почти всегда для фотографий и часто для графики, но на очень маленьких иконках разница может исчезнуть. Проверяйте на своей картинке, а не по общему правилу.