WebP — это относительно новый формат изображений, предложенный Google. С учетом распространения Chrome-браузеров (сейчас где-то 60-70%), это уже доминирующая технология. Формат универсальный, и в половине случаев WebP по размеру меньше как PNG (без потерь качества), так и JPEG (с потерями качества).
В прошлом году мы уже писали про оптимизацию PNG-изображений: какие результаты для сайта можно получить за счет простых инструментов. Сегодня речь пойдет про WebP.
Краткая история
В 1991 году выходит спецификация контейнера общего назначения RIFF, который позволяет упаковывать произвольные бинарные данные (в основном, графические). Но он не используется ни для формата JPEG, ни PNG, ни других производных.
В 2008 году разрабатывается видео-кодек VP8, и в 2010 году Google открывает его исходные кода, предлагая новый формат видео — WebM — на базе этого кодека.
Чуть позже, используя наработки WebM, в 2010 году Google уже предлагает новые формат изображений — WebP, — который основан на контейнере RIFF и использует архитектуру WebM.
Особенности WebP
За счет использования RIFF-контейнера размер изображений может быть меньше (чем аналоги PNG и WebP), и свободы для записи различных данных больше (в частности, есть поддержки анимации для PNG). Наибольший интерес представляет два режима WebP: с потерями качества и без потерь качества.
За счет более мощных предсказательных фильтров WebP позволяет существенно уменьшить размер изображения в случае больших зон повторений или другого предсказуемого поведения (что является расширением функционала PNG). В частности, возможно 2-3 кратное уменьшение исходного PNG просто за счет более совершенной фильтрации. По тестам Айри, примерно в половине случаев удается уменьшить размер уже максимально оптимизированного PNG-файла еще на 20-30%.
Для формата с потерями качества (пережатие JPEG-фотографий) наблюдается тот же эффект. При меньших рудиментах WebP-изображений имеет меньший размер.
Поддержка браузерами
По данным Liveinternet, Chrome-браузеры используются в 2/3 случаев. Это означает, что для 2/3 пользователей изображения можно сделать, в среднем, еще на 10-15% (относительно уже оптимизированного варианта, который на 30-40% меньше исходных изображений).
Для перекодировки изображения в webp-формат можно использовать как утилиту cwebp или ImageMagick, так и, практически, любой графический редактор. Формат WebP введен уже давно, его поддержка в редакторах широко распространена.
Для проверки, поддерживает ли браузер webp, можно использовать заголовок Accept: если он содержит webp, то браузер загрузит и откроет webp-изображение. В Айри уже внедрена поддержка webp «из коробки»: webp-изображения отдаются в том случае, если они меньше исходных (без ухудшения качества) и только для тех браузеров, которые поддерживают такие изображения.