PNG

Формат появился в середине 1990-х как свободная замена GIF: алгоритм сжатия GIF был запатентован, и разработчики программ рисковали получить требование об оплате. PNG сделали открытым, добавили к нему полноценную прозрачность и больше цветов. В 1996 году он стал рекомендацией W3C.

Сжатие без потерь означает, что после сохранения каждый пиксель остаётся точно таким, каким был. Хорошо сжимаются большие однотонные области, плохо — фотографии с шумом и плавными переходами.

Когда выбирать PNG

• Скриншоты интерфейсов и схемы с текстом: JPEG размоет буквы и добавит артефакты вокруг линий.
• Картинки с прозрачным фоном, если нет векторного исходника.
• Исходники, которые будут ещё не раз редактироваться: повторное сохранение не ухудшает качество.

Логотипы и иконки лучше делать в SVG: вектор чётче на любом экране и обычно легче. Для фотографий подходят JPEG, WebP и AVIF. Анимированный вариант формата, APNG, современные браузеры поддерживают, но для анимации на сайте его выбирают редко.

Как уменьшить вес

PNG бывает полноцветным и палитровым — до 256 цветов. Утилита pngquant переводит изображение в палитру с минимальными видимыми потерями, и файл нередко худеет в несколько раз:

pngquant --quality=65-80 --output logo-min.png logo.png

Вторая ступень — современные форматы. Браузер выберет WebP, если умеет, а иначе возьмёт PNG:

<picture>
  <source srcset="scheme.webp" type="image/webp">
  <img src="scheme.png" alt="Схема проезда" width="800" height="450">
</picture>

Ошибка: фотографии в PNG

Самая частая находка при аудите скорости — фото товаров или баннеры, сохранённые в PNG «для качества». Один такой баннер весит несколько мегабайт, тогда как в WebP без заметной разницы он занял бы в разы меньше. Плагины конвертации в WordPress и сжатие изображений в Битриксе решают часть проблемы, но правильный формат на входе всегда лучше. Проверка таких мест — обязательный шаг, когда занимаешься ускорением сайта.