Сжимаем картинки

Картинки - один из важнейших составляющих сайта. Логотипы, иконки, мемы, схемы - все это картинки. По данным w3techs только 3.6% сайтов не используются никакие картинки, так что вопрос оптимизации изображений существовал с рождения интернета. Уменьшение размера изображения ускоряет загрузку сайта, уменьшает фрустрацию пользователя и потенциально повышает авторитет сайта в глазах потенциального клиента. В этой статье я ставлю цель разобраться в способах оптимизации передачи картинок пользователю в вебе.

Какие есть методы запаковки изображения? Самый простой - bmp, где мы под каждый пиксель выделяем одинаковое количество бит, без сжатия, потерь, но логично, что файл из-за этого много весит. Скакнем на много поколений вперед и посмотрим формат jpeg. Jpeg использует сжатие с потерями путем определения похожих цветовых областей внутри изображения и преобразования их в фактически один и тот же цветовой код. За счет этого размер файла уменьшается, без уменьшения размера картинки. Напоследок рассмотрим формат png, самый распространённый формат в вебе. PNG хранит информацию в сжатом виде, но без потерь, в отличие от jpeg. Файл png состоит из сигнатуры и последовательности чанков. По этой причине при загрузке сайта большие файлы PNG отображаются постепенно, по мере прихода этих чанков. Для веба можно использовать прочие способы оптимизации PNG - обрезания alfa канала, оптимизации палитры или банальный даунскейл(что на самом деле хорошее решение, ибо с каждым годом мегапиксели на телефонах растут и растут). Для подробного ресерча можете почитать про TruePNG, CryoPNG, PngWolf и прочее. Однако форматы JPEG, PNG были разработаны аж в 20 веке, должны же были придумать новые способы, заточенные на веб, для передачи картинок. Самый распространенный из них - webp(9%) и AVIF(0.1%).

WebP. В 2010 году Google выпустили формат WebP как альтернативу PNG и JPEG. Он использует алгоритм сжатия ключевых кадров из видеокодека VP8, поэтому искажение исходного изображения выглядит иначе относительно других форматов. Webp обещает сжатие без потерь на 26% лучше, чем у PNG. Так же webp поддерживает прозрачность и анимацию, что позволяет так же обойтись без GIF(или APNG) Для работы напрямую с энкодером webm можно изучить гугловый cwebp.

AVIF. AVIF один из последних форматов, основанный на современной AV1. Он гарантирует значительное уменьшение размера файла при сохранении визуального качества изображения. Так же формат AVIF может использовать многопоточность для более быстрого кодирования и декодирования изображений на современных многоядерных процессорах. Но avif - ОЧЕНЬ долгий для декодинга формат. Может легко получиться, что страница будет тормозить с ним больше, чем WEBP с учетом скачивания дополнительных байтов.

JPEG XL. Jpeg XL основан на инновационных разработках Google PIK и Cloudinary FUIF, являясь наследников FUIF, но превосходит их. Однако сейчас никакой(кроме safari) браузер не поддерживает jpeg xl, но это вопрос времени, ибо для большинства браузеров уже есть флаги для активации этого формата. JXL - много обещающей формат, способный окончательно вытеснить PNG

Через несколько лет можно будет сказать, что формат PNG окончательно устарел, поскольку разница с WebP и JPEG XL очень существенная.

Комбинируя все подходы. Когда-то, еще очень давно(на кубке, если я не ошибаюсь) сотрудник МТС рассказывал мне об их передовом сервисе для оптимизации картинок. Дело в том, что они пережимают все картинки на лету в webp и avif под размеры верстки пользователя. Конечно с кешированием и т д. Похожие решения есть для nginx, imgproxy как отдельный сервис и т. д. Суть в том, что оптимизация картинок - нетривиальная вещь и может быть осуществлена без необходимости усложнения кодовой базы. Оптимизируйте, ускоряйте, кайфуйте.
@sanspie_notes