Я Максим, веб-разработчик. Изображения — самый тяжёлый тип контента на большинстве сайтов. Фотографии товаров, баннеры, иллюстрации, фоны — всё это может составлять 70–80 процентов общего веса страницы. И формат, в котором хранятся эти изображения, напрямую влияет на скорость загрузки, Core Web Vitals, позиции в Яндексе и конверсию. Переход на WebP — одна из самых простых оптимизаций с ощутимым результатом. Давайте разберём тему подробно.

Что такое WebP и чем он лучше JPEG и PNG

WebP — формат изображений, разработанный Google. Он объединяет лучшие качества JPEG и PNG в одном формате.

Сжатие с потерями — как у JPEG. Фотографии товаров, баннеры, портреты — всё, что сейчас хранится в JPEG, можно перевести в WebP и получить файл на 25–35 процентов легче при том же визуальном качестве. На глаз разницу увидеть практически невозможно, но байты экономятся существенно.

Сжатие без потерь — как у PNG, но эффективнее. Иконки, логотипы, схемы, скриншоты с чёткими границами — всё это в WebP весит на 20–30 процентов меньше, чем в PNG.

Прозрачность (альфа-канал) — как у PNG. Это значит, что WebP может заменить PNG везде, где нужен прозрачный фон, при этом файл будет легче.

Анимация — как у GIF, но значительно эффективнее. Анимированные WebP весят в разы меньше, чем GIF-анимации. Если на сайте есть анимированные элементы — переход с GIF на WebP даёт колоссальный выигрыш.

Как WebP влияет на скорость и SEO

Давайте посчитаем конкретный пример. Типичная страница каталога интернет-магазина: 24 карточки товаров, у каждой одно изображение среднего размера (около 150 КБ в JPEG). Плюс баннер на 300 КБ, несколько иконок. Итого — примерно 4 МБ изображений.

Переводим всё в WebP с тем же качеством. Средний выигрыш — 30 процентов. Страница «похудела» на 1,2 МБ. Для пользователя на мобильном интернете это несколько секунд экономии. Для метрики LCP — заметное улучшение, потому что главное изображение загружается быстрее. Для общего веса страницы — результат, который Яндекс и Google видят и учитывают.

Яндекс прямо рекомендует использовать современные форматы изображений. В Яндекс Вебмастере, в разделе диагностики, можно увидеть предупреждения о тяжёлых изображениях. Переход на WebP — простейший способ закрыть эти предупреждения.

Core Web Vitals напрямую зависят от веса изображений. LCP — главная отрисовка контента — чаще всего определяется именно по изображению: hero-баннер, фотография товара, фоновая картинка первого экрана. Чем легче это изображение — тем быстрее LCP, тем лучше оценка, тем выше позиции.

Поддержка браузерами

В 2026 году WebP поддерживают все современные браузеры: Chrome, Firefox, Safari (с версии 14, вышедшей в 2020 году), Edge, Opera и все мобильные браузеры на Android и iOS. Доля браузеров, которые не понимают WebP, — менее одного процента.

Это значит, что WebP можно использовать как основной формат, а JPEG оставить только как фолбэк для крайне редких случаев. На практике для большинства сайтов JPEG-фолбэк уже не нужен, но если аудитория специфическая (государственные учреждения со старыми компьютерами) — стоит подстраховаться.

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

На Next.js

Если ваш сайт работает на Next.js — вам повезло. Встроенный компонент Image автоматически генерирует изображения в WebP (и даже AVIF, если включить). Ничего настраивать не нужно — Next.js делает конвертацию на лету при первом запросе и кеширует результат.

Достаточно использовать компонент Image вместо обычного тега img. Next.js также автоматически добавляет атрибуты loading, width, height и srcset для адаптивных изображений. Это работает и с локальными файлами, и с внешними URL.

На WordPress

WordPress — самая популярная CMS в мире, и для неё есть несколько проверенных решений.

ShortPixel — плагин, который автоматически конвертирует все загруженные изображения в WebP. Работает в фоновом режиме: вы загружаете JPEG — плагин создаёт WebP-версию и отдаёт её браузерам, которые поддерживают формат. Есть бесплатный тариф на 100 изображений в месяц.

Imagify — аналогичный плагин от команды WP Rocket. Конвертация и оптимизация изображений в облаке, включая WebP-версии. Интеграция с WP Rocket даёт дополнительный прирост от кеширования.

WebP Express — лёгкий плагин, который не оптимизирует изображения, а только конвертирует в WebP через библиотеку на сервере (GD или Imagick). Для тех, кто хочет минимальное решение без облачных сервисов.

На 1С-Битрикс

Битрикс с версии 23 поддерживает WebP в медиабиблиотеке. Для более ранних версий — модули из Маркетплейса, которые конвертируют изображения при загрузке. Также можно настроить конвертацию на уровне сервера через модуль PageSpeed для Nginx.

На кастомных сайтах через HTML

Для кастомных сайтов без CMS — используйте HTML-элемент picture с указанием нескольких форматов:

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="Красные кроссовки Nike Air Max 90" width="800" height="600" loading="lazy">
</picture>

Браузер проверяет форматы сверху вниз и выбирает первый поддерживаемый. Если поддерживается AVIF — загружает его. Если нет — пробует WebP. Если и WebP не поддерживается — загружает JPEG из тега img. Прогрессивное улучшение в чистом виде.

На уровне сервера

Альтернативный подход — настроить конвертацию на уровне веб-сервера. Nginx с модулем ngx_pagespeed (или его аналогом) может автоматически конвертировать JPEG и PNG в WebP для браузеров, которые отправляют заголовок Accept: image/webp. Вы загружаете на сервер обычные JPEG-файлы, а сервер отдаёт WebP-версии автоматически.

Это удобно, когда менять HTML-код нет возможности или желания. Сервер сам определяет, поддерживает ли браузер WebP, и отдаёт нужный формат.

WebP vs AVIF: что выбрать

AVIF — формат следующего поколения, основанный на видеокодеке AV1. По сравнению с WebP он сжимает изображения ещё на 20–30 процентов эффективнее. Для фотографий разница особенно заметна — AVIF лучше передаёт градиенты и мелкие детали при агрессивном сжатии.

Однако у AVIF есть ограничения. Кодирование занимает заметно больше времени, чем WebP — если на сайте тысячи изображений и конвертация происходит на лету, это может стать узким местом. Поддержка браузерами чуть хуже, чем у WebP — Safari полноценно поддерживает AVIF с версии 16, и старые устройства Apple его не отобразят.

Мой подход: для новых проектов я использую связку AVIF + WebP + JPEG в теге picture. AVIF — для максимальной оптимизации, WebP — как надёжный средний вариант, JPEG — как последний фолбэк. Для существующих проектов, где нужно быстро улучшить скорость — перехода на WebP вполне достаточно. Разница между WebP и JPEG — 25–35 процентов. Разница между AVIF и WebP — ещё 20 процентов. Первый шаг даёт основной выигрыш.

Как конвертировать изображения

Для разовой конвертации небольшого количества файлов — онлайн-инструменты. Squoosh от Google — загружаете изображение, выбираете формат и качество, видите результат в реальном времени с визуальным сравнением до и после. Идеально для того, чтобы подобрать оптимальное качество сжатия.

Для массовой конвертации — командная строка. Утилита cwebp от Google конвертирует файлы пакетно. Типичная команда для конвертации всех JPEG в папке в WebP с качеством 80 процентов выполняется в одну строку в терминале и обрабатывает тысячи файлов за минуты.

Для автоматизации в проекте — Node.js библиотека Sharp. Она позволяет конвертировать, ресайзить и оптимизировать изображения программно. Идеальна для встраивания в сборку проекта или API-обработчик загрузки изображений. Sharp работает быстро и поддерживает все нужные форматы: JPEG, PNG, WebP, AVIF, TIFF.

Для CI/CD пайплайна — imagemin и его плагины. Конвертация запускается автоматически при сборке проекта, и в продакшен попадают уже оптимизированные файлы.

Оптимальные настройки качества

Качество сжатия WebP измеряется от 0 до 100. Чем выше — тем лучше картинка, но тяжелее файл. Для разных типов контента оптимальные значения различаются.

Фотографии товаров — качество 75–85. При таких значениях визуальная разница с оригиналом практически незаметна, а размер файла уменьшается в 3–5 раз по сравнению с несжатым изображением. Для карточек каталога, где изображения показываются в небольшом размере, можно опустить до 70.

Баннеры и hero-изображения — качество 80–90. Эти изображения показываются крупно, и артефакты сжатия могут быть заметны. Не стоит экономить на качестве того, что пользователь видит первым.

Иконки и графика с чёткими краями — лучше использовать WebP без потерь (lossless). Файл будет чуть тяжелее, чем lossy, но артефактов не будет.

Превью и миниатюры — качество 60–70. Маленькие изображения в списках и каруселях не требуют высокого качества. Агрессивное сжатие здесь оправдано.

Типичные ошибки при переходе на WebP

Конвертация без контроля качества. Бездумная конвертация всех файлов с одинаковым качеством — плохая идея. Баннер, сжатый до качества 50, будет выглядеть ужасно. Превью, сжатое с качеством 95, весит неоправданно много. Подбирайте качество под тип контента.

Забытый alt-тег при смене формата. При массовой конвертации иногда теряются alt-теги, если процесс затрагивает HTML. Проверяйте — alt-теги критичны для SEO и доступности.

Отсутствие JPEG-фолбэка при специфической аудитории. Если ваши клиенты — госучреждения или предприятия с устаревшими компьютерами, JPEG-фолбэк через тег picture обязателен.

Конвертация уже сжатых файлов. Если JPEG уже был сжат с качеством 60 — конвертация в WebP с качеством 80 не улучшит ситуацию. Лучше конвертировать из оригинала максимального качества.

Игнорирование SVG. Для иконок, логотипов, иллюстраций с простой графикой — SVG лучше любого растрового формата. SVG масштабируется без потери качества, весит минимально и отлично индексируется. Не нужно конвертировать SVG в WebP — это шаг назад.

Как проверить результат

После конвертации проверьте, что всё работает.

Chrome DevTools, вкладка Network — отфильтруйте по типу Img. В колонке Type должен быть webp для изображений, которые поддерживают этот формат. Если вместо webp видите jpeg — конвертация не срабатывает.

PageSpeed Insights — запустите анализ. В разделе «Диагностика» должно исчезнуть предупреждение «Используйте изображения в современных форматах» для тех страниц, где вы внедрили WebP.

Визуальная проверка — откройте страницу и внимательно посмотрите на изображения. Нет ли артефактов, блочности, размытия? Если есть — повысьте качество сжатия для проблемных файлов.

Сравнение веса — зафиксируйте общий вес страницы до и после перехода. Разница должна составлять 20–35 процентов от веса изображений.

Итог

WebP — это современный стандарт для веб-изображений. Переход на него прост, не требует больших вложений и даёт стабильный выигрыш в скорости загрузки, Core Web Vitals и позициях в поиске. Для нового проекта — используйте WebP по умолчанию. Для существующего — массовая конвертация через Sharp или плагин CMS решит задачу за день.

Если нужна комплексная оптимизация изображений на вашем сайте — обращайтесь, настрою конвейер обработки под ваш проект.