Что WebP даёт сайту
WebP был выпущен Google в 2010 году как ориентированная на веб замена JPG, PNG и GIF. Его режим с потерями основан на внутрикадровом кодировании видеокодека VP8: он предсказывает каждый блок пикселей по соседним и хранит только разницу, что эффективнее фиксированных блоков 8×8 в JPG. При том же визуальном качестве фото обычно получается на четверть-треть меньше.
На одном изображении такая экономия выглядит скромно. На странице она складывается: каталог товаров с 40 фото по 200 КБ после конвертации худеет примерно на 2–3 МБ. Меньшие изображения быстрее появляются на экране, что улучшает Largest Contentful Paint — метрику загрузки, которую учитывают поисковики, — и сокращает мобильный трафик посетителей.
Все современные браузеры показывают WebP, а большинство систем управления контентом принимают его при загрузке, включая WordPress начиная с версии 5.8 и крупные платформы интернет-магазинов. Для сайта, созданного в последние несколько лет, редко найдётся причина продолжать отдавать обычный JPG.
Когда лучше оставить JPG
WebP — формат доставки, а не архива. Храните оригиналы в JPG (а лучше — исходники с камеры) и конвертируйте копии для публикации. Оставайтесь на JPG, когда:
- Файл идёт в печать, в фотолабораторию или клиенту, который откроет его в старой настольной программе.
- Это вложение в письмо для людей, о почтовых программах которых вы ничего не знаете.
- Вы собираетесь позже снова редактировать изображение. Каждое сохранение с потерями стоит части деталей, а редакторы обращаются с JPG предсказуемее.
Если вам пришлют WebP обратно и его не удастся открыть, инструмент WebP в JPG проделает обратный путь.
Как конвертер обращается с вашими файлами
Изображение декодируется браузером, отрисовывается на canvas в исходном размере и кодируется в WebP встроенным кодировщиком браузера — в фоновом воркере, если он доступен. Файлы остаются на вашем устройстве.
Принимаются и JPG, и PNG. PNG на входе пригодится для скриншотов и графики с прозрачностью: альфа-канал сохраняется, так что вырезанное фото товара по-прежнему аккуратно ложится на любой фон. В JPG прозрачности нет, поэтому из JPG получается непрозрачный WebP.
Размеры в пикселях не меняются. Сам формат WebP ограничен 16383 px по каждой стороне, поэтому очень большие панорамы перед конвертацией нужно уменьшить. Метаданные — данные камеры из EXIF и GPS-координаты — в результат не копируются, и для изображений, публикуемых в интернете, обычно именно это и нужно.
Настройки качества, которые работают
Ползунок идёт от 10% до 100% и по умолчанию стоит на 85%. Шкала качества WebP не совпадает со шкалой JPG, поэтому не переносите просто то число, которое использовали для JPG. Несколько ориентиров:
- 80–85% — для фото на контентных страницах. В этом диапазоне WebP даёт основную экономию без видимых изменений при обычном размере просмотра.
- 70–75% — для миниатюр, сеток каталога и фоновых изображений, где картинка маленькая или частично закрыта текстом.
- 90–95% — для главных баннеров на больших экранах и скриншотов с мелким текстом. WebP с потерями хранит цвет в половинном разрешении, поэтому тонкие цветные линии и красный текст на тёмном фоне при более низких настройках могут выглядеть слегка размытыми.
Не используйте 100% для фото. Получится файл, который часто больше исходного JPG, без всякого видимого выигрыша, потому что собственные артефакты сжатия JPG сохраняются во всех подробностях.
Как выжать из конвертации максимум
JPG, который уже сильно сжат, почти не уменьшится. Конвертация JPG на 60 КБ, сохранённого с качеством 60, может дать всего несколько процентов, а второй круг сжатия с потерями может сделать блочность заметнее. Самый большой выигрыш дают качественные оригиналы.
Порядок шагов важнее точного значения качества:
- Начните с самой большой и качественной версии, какая у вас есть.
- Уменьшите до размера, в котором страница действительно показывает изображение, например 1600 px в ширину для полноширинной картинки или 600 px для карточки.
- Сконвертируйте в WebP с качеством 80–85% и сравните размеры до и после, показанные для каждого файла.
Поддерживается пакетная обработка с ограничением 50 МБ на файл. Все файлы в пачке используют одно качество, поэтому если у вас вперемешку фото и скриншоты, конвертируйте их в два захода с подходящими для каждого настройками.