Сжать PNG для сайта

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

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

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

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