Формат WebP: как перевести картинки сайта и ускорить загрузку без потери качества

WebP — формат изображений от Google, который весит меньше JPEG и PNG при той же картинке: по данным разработчиков, на 25–34 % меньше JPEG и на 26% меньше PNG. Его поддерживают все основные браузеры, Яндекс и Google. Переводить картинки сайта в WebP стоит почти всегда, но с резервной копией для старых устройств и без повторного сжатия уже сжатых файлов.

Что такое формат WebP

WebP — формат растровых изображений, который Google открыл для всех. Он умеет два вида сжатия: с потерями, как JPEG, и без потерь, как PNG. Ещё он поддерживает прозрачность и анимацию, поэтому одним форматом можно заменить сразу JPEG, PNG и GIF.

Сжатие с потерями в WebP построено на методе предсказания: кодек смотрит на соседние блоки пикселей, угадывает следующий и хранит только разницу. Сжатие без потерь восстанавливает изображение точно, пиксель в пиксель. Файл имеет расширение .webp и тип image/webp.

Почему формат важен для сайта? Картинки — самая тяжёлая часть большинства страниц. По данным web.dev, изображения составляют около 50% передаваемых байтов на средней веб-странице. Уменьшить их вес — самый простой способ ускорить загрузку, не трогая дизайн и код.

У формата есть пределы. Максимальный размер изображения WebP — 16383 на 16383 пикселя. Для сайта это не ограничение, но для печатной полиграфии и фотобанков с огромными исходниками WebP не подходит: там нужны TIFF или исходники без сжатия.

WebP — один формат вместо трёх: фото с потерями, графика без потерь, прозрачность и анимация в файлах меньшего веса.

Насколько WebP легче JPEG и PNG?

Разработчики формата приводят такие цифры: изображения WebP без потерь на 26% меньше по размеру, чем PNG, а WebP с потерями на 25–34 % меньше сопоставимых JPEG при том же уровне качества. Прозрачность в WebP без потерь стоит всего 22% дополнительных байтов, тогда как PNG с прозрачностью обычно тяжелее.

Цифры средние. На конкретной картинке выигрыш бывает и больше, и меньше: многое зависит от исходника и выбранного качества. Если фотографии на сайте уже сильно сжаты, переход даст меньше, чем обещает таблица.

Для страницы каталога с десятками фото разница складывается. Меньше килобайт — быстрее появляется главная картинка, а это напрямую влияет на метрику LCP, о которой подробно рассказывали в статье как проверить скорость загрузки сайта.

Факт. По данным Google, WebP без потерь легче PNG на 26%, а WebP с потерями легче сопоставимого JPEG на 25–34 %.

Кто поддерживает WebP: браузеры и поисковики

WebP поддерживают Google Chrome, Safari, Firefox, Edge и Opera. Дольше всех держался Safari: по данным Google, он поддерживает WebP с версии 14 на iOS 14 и macOS Big Sur. На старых iPhone и Mac, которые не обновлялись, картинка без резервного варианта не покажется.

Поисковики формат тоже понимают. В справке Google сказано, что в число совместимых форматов входят BMP, GIF, JPEG, PNG, WebP, SVG и AVIF. Яндекс в справке Вебмастера перечисляет форматы, которые индексирует, и WEBP среди них есть. Значит, переход на WebP не выкинет картинки из поиска по изображениям.

Сложнее с программами вне браузера. Старые версии офисных пакетов, некоторые мессенджеры и почтовые клиенты WebP не открывают или открывают как файл без превью. Поэтому, если клиенты скачивают с сайта картинки для работы — прайсы в виде изображений, схемы, макеты, — оставьте им вариант в JPEG или PNG.

Ещё одна деталь — превью ссылок. Когда ссылку на страницу пересылают в мессенджере, картинку для карточки берут из тега og:image. Надёжнее указывать там JPEG или PNG: не все площадки показывают WebP в превью.

Когда WebP не нужен или вредит

WebP подходит не для всего. Случаи, когда переходить не стоит или нужна осторожность:

• Векторная графика — логотипы, иконки, схемы лучше хранить в SVG: он масштабируется без потерь и часто весит ещё меньше.
• Уже пережатые JPEG — повторное сжатие с потерями добавит артефакты, а выигрыш в весе будет небольшим.
• Смена типа сжатия — Google предупреждает, что файл WebP может оказаться больше исходного при переходе из формата с потерями в формат без потерь или наоборот.
• Картинки для скачивания — если файл нужен клиенту в работе, дайте ему привычный формат.
• Печать и архив — для исходников и полиграфии формат не предназначен.

Отдельно о прогрессивной загрузке. WebP не поддерживает прогрессивное декодирование, как JPEG или PNG, когда картинка сначала появляется размытой, а потом проявляется. Вместо этого WebP отрисовывается по мере загрузки строками. На большинстве сайтов разницы никто не заметит, но для огромных фото на медленном интернете прогрессивный JPEG иногда выглядит приятнее.

Мнение. Если у сайта сотни фотографий товаров в JPEG, переводите их в WebP с потерями. Логотипы и иконки оставьте в SVG, а файлы, которые клиенты скачивают для работы, — в JPEG и PNG.

WebP или AVIF: что выбрать?

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

Для большинства сайтов разумный выбор — WebP как основной формат и JPEG или PNG как резервный. AVIF имеет смысл добавить третьим вариантом, если на сайте много крупных фотографий и вы готовы держать три версии каждой картинки. Элемент picture позволяет перечислить форматы по порядку: браузер возьмёт первый, который поддерживает.

Отчёт Lighthouse в PageSpeed Insights сейчас оценивает экономию сразу для AVIF и WebP, поэтому после перехода на WebP он может всё ещё советовать «современные форматы». Это не ошибка перехода: Lighthouse не показывает картинку в отчёте, только если экономия меньше 8 КБ.

Как конвертировать картинки в WebP?

Способ зависит от того, сколько картинок и как часто они появляются. Варианты от простого к автоматическому:

Главная настройка при конвертации — качество. По web.dev, его задают числом от 0 до 100, где 0 — худшее, а 100 — лучшее. Подбирайте значение на нескольких типичных картинках сайта и сравнивайте глазами: для фото товаров и баннеров компромисс будет разным.

Пример пакетной конвертации всех JPEG в папке с качеством 80:

for f in *.jpg; do cwebp -q 80 "$f" -o "${f%.jpg}.webp"; done

Исходники не удаляйте. Они понадобятся для резервной версии и на случай, если через год захочется перейти на другой формат или другое качество.

Как подключить WebP на сайте

Самый надёжный способ — элемент picture. В нём перечисляют варианты картинки, а браузер берёт первый поддерживаемый. Web.dev советует именно так: WebP для новых браузеров и резервное изображение для старых.

<picture>
  <source type="image/webp" srcset="/upload/sofa.webp">
  <img src="/upload/sofa.jpg" alt="Диван угловой серый" width="800" height="600" loading="lazy">
</picture>

Атрибуты alt, width и height пишутся в теге img, а не в source: именно img остаётся основным элементом. Если убрать его, картинка не покажется вовсе. Отложенную загрузку loading="lazy" ставят всем картинкам ниже первого экрана, но не главному изображению страницы.

Второй способ — подмена на сервере. Сервер читает заголовок Accept, и если браузер указал image/webp, отдаёт WebP по тому же адресу. Вёрстка при этом не меняется, но нужно настроить заголовок Vary: Accept, иначе прокси и CDN могут отдать WebP старому браузеру.

Для фоновых картинок в CSS picture не работает. Там используют функцию image-set или отдельные классы, которые скрипт добавляет после проверки поддержки формата.

С чего начать перевод картинок в WebP

Начните с замера: прогоните главную, каталог и пару карточек через PageSpeed Insights и посмотрите, сколько весят картинки и какую экономию обещает отчёт. Если экономия заметная, переход окупится.

Затем выберите способ. Для сайта на CMS проще всего модуль, который создаёт WebP при загрузке и сам подставляет picture. Для самописного сайта — конвертация на сервере с подменой по заголовку Accept. Начните с самых посещаемых страниц, а не со всего архива сразу.

После перехода проверьте сайт в Safari, на старом Android и в режиме без кэша, сравните метрики и вес страниц. Другие причины медленной загрузки, кроме картинок, разобраны в статье почему сайт медленно загружается. Если не хочется разбираться с модулями и настройками сервера, перевод картинок и проверку мы возьмём на себя в рамках поддержки сайта.

Источники

• Формат изображения для интернета WebP — Google for Developers
• Часто задаваемые вопросы о WebP — Google for Developers
• Используйте изображения WebP — web.dev, Google
• Рекомендации по поисковой оптимизации изображений для Google Картинок — Google
• Картинки — Яндекс Вебмастер
• Подавайте изображения в современных форматах — Chrome for Developers
• Image file type and format guide — MDN Web Docs, Mozilla
• Сети доставки контента (CDN) — web.dev, Google