ToolBox Image — Как на самом деле работает сжатие изображений (за 5 минут)
JPEG, WebP, AVIF — что они делают, какие у них компромиссы и как выбрать правильный кодировщик.
Сжатие изображений в принципе является решённой проблемой, но выбор неправильного формата или настройки качества может привести к потере пропускной способности, замедлению сайта или появлению видимых артефактов. Вот практическое руководство о том, как работают основные форматы и когда их использовать.
С потерями и без потерь
Каждый формат изображения относится к одной из двух категорий. Форматы без потерь сохраняют каждый пиксель оригинала — декодированное изображение идентично источнику бит в бит. Форматы с потерями отбрасывают информацию, к которой человеческий глаз менее чувствителен, достигая гораздо меньших размеров файлов ценой некоторой точности.
Выбор зависит от случая использования. Фотографии и градиенты хорошо переносят сжатие с потерями, потому что артефакты трудно заметить при обычных размерах просмотра. Скриншоты, текст, логотипы и графика с чёткими краями требуют кодирования без потерь, чтобы оставаться чёткими.
JPEG: универсальный стандарт
JPEG был доминирующим форматом изображений в вебе на протяжении трёх десятилетий. Он использует алгоритм сжатия с потерями, основанный на дискретном косинусном преобразовании — той же технике, что используется в видеокодеках. Кодировщик делит изображение на блоки 8x8 пикселей, преобразует каждый блок в частотное пространство и отбрасывает высокочастотную информацию, которую человеческий глаз воспринимает менее остро.
Сильные стороны: Универсальная поддержка браузерами, отличное сжатие для фотографий, регулируемое качество.
Слабые стороны: Нет поддержки прозрачности, видимые блочные артефакты при низком качестве, плохое сжатие для текста и графики.
Лучше всего для: Фотографий, сложных градиентов, изображений для соцсетей, любых ситуаций, где универсальная совместимость важнее размера файла.