WebP для скорости сайта: как ускорить загрузку и поднять позиции в поиске

Почему именно картинки тормозят сайт

Откройте любой современный сайт и посмотрите, из чего складывается его вес. Скрипты, шрифты, стили — всё это важно, но в большинстве случаев главный «тяжеловес» страницы — это изображения. По данным проекта Web Almanac (HTTP Archive), на изображения приходится значительная доля веса медианной страницы, а только картинки на главной странице мобильной версии тянут в среднем около 900 КБ.

В чём здесь проблема? Каждый килобайт нужно скачать по сети. На быстром Wi-Fi это незаметно, но на мобильном интернете в метро или на даче лишний мегабайт картинок легко превращается в несколько секунд ожидания белого экрана. А по статистике, чем дольше грузится страница, тем больше людей закрывают её, так и не увидев.

Что даёт WebP: −25–35% к весу

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

• На 25–35% легче JPEG при одинаковом визуальном качестве (по метрике SSIM). Это касается фотографий и любых «пёстрых» изображений.
• На 26% легче PNG в режиме без потерь. То есть логотипы, иконки и скриншоты тоже становятся компактнее без ухудшения.
• Примерно в 3 раза легче PNG, если речь о картинке с прозрачностью (альфа-каналом) и допустимо лёгкое сжатие.

Откуда такая экономия? WebP умеет и сжатие с потерями (как JPEG), и без потерь (как PNG), и прозрачность, и даже анимацию — но использует более современные алгоритмы. Грубо говоря, это «один формат вместо трёх», который при этом упаковывает данные плотнее.

Здесь важно понимать практический эффект. Если на странице 1,5 МБ картинок, перевод их в WebP способен скинуть 400–500 КБ. Для пользователя это означает, что страница покажется готовой ощутимо раньше — а вы при этом не трогали ни дизайн, ни вёрстку.

LCP и Core Web Vitals: при чём тут SEO

Скорость сайта — это не только про удобство. Google официально учитывает её при ранжировании через набор метрик Core Web Vitals. И главная из них для картинок — это LCP (Largest Contentful Paint).

LCP измеряет, за сколько секунд отрисуется самый крупный видимый элемент в первом экране. На большинстве сайтов это именно крупное изображение — баннер в шапке, обложка статьи, главное фото товара. То есть скорость, с которой загрузится ваша главная картинка, напрямую становится одной из ключевых метрик Google.

Логика простая: тяжёлая главная картинка в JPEG на 600 КБ грузится дольше, чем та же картинка в WebP на 400 КБ. Перевели в WebP — LCP стал меньше — Core Web Vitals улучшились. А значит, у страницы выше шанс подняться в выдаче и не отпугнуть посетителя.

Как подключить WebP через <picture> с fallback

WebP поддерживают около 95–96% браузеров — практически все актуальные версии Chrome, Firefox, Edge, Safari и мобильных браузеров. Но чтобы оставшиеся проценты пользователей (например, на очень старых iPhone) тоже видели картинки, используют тег <picture> с запасным вариантом.

Принцип такой: внутри <picture> вы перечисляете несколько источников, а браузер берёт первый, который умеет открыть. Если WebP не поддерживается — он молча падает на обычный JPEG или PNG.

<picture>
  <source srcset="/img/hero.webp" type="image/webp">
  <img src="/img/hero.jpg" alt="Описание картинки"
       width="1200" height="630" loading="lazy">
</picture>

Что здесь важно:

• <source> с type="image/webp" — это «предпочтительный» вариант. Браузер с поддержкой WebP возьмёт именно его.
• <img> внутри — обязательный fallback. Старый браузер проигнорирует <source> и покажет JPEG.
• width и height резервируют место под картинку и защищают от «прыжков» вёрстки (это улучшает другую метрику Core Web Vitals — CLS).
• loading="lazy" откладывает загрузку картинок ниже первого экрана. Но не вешайте lazy на LCP-картинку — её, наоборот, нужно грузить как можно раньше.

srcset и ретина: одна картинка под все экраны

Вторая половина оптимизации — отдавать картинку нужного размера. Нет смысла грузить изображение шириной 2000 px на телефон с экраном 400 px. Здесь помогает атрибут srcset: вы готовите несколько версий картинки, а браузер сам выбирает подходящую под экран и плотность пикселей (ту самую «ретину»).

<picture>
  <source
    type="image/webp"
    srcset="/img/photo-480.webp 480w,
            /img/photo-800.webp 800w,
            /img/photo-1200.webp 1200w"
    sizes="(max-width: 600px) 480px, 800px">
  <img src="/img/photo-800.jpg" alt="Описание"
       width="800" height="533" loading="lazy">
</picture>

Атрибут sizes подсказывает браузеру, какого размера будет картинка в макете, а srcset со значениями 480w / 800w / 1200w даёт ему выбор. Телефон возьмёт лёгкий вариант 480w, десктоп с ретиной — 1200w. Сочетание WebP + srcset — это, по сути, максимум, который можно выжать из картинок без потери качества.

Автоматизация: CDN и плагины

Прописывать <picture> вручную для каждой картинки — нормально для небольшого лендинга, но утомительно для блога с сотнями статей. Для таких случаев есть автоматические решения:

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

Как массово конвертировать сайт в WebP

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

Для скриншотов, логотипов и графики с прозрачностью используйте конвертер PNG → WebP — он сохранит чёткость и альфа-канал. А если позже понадобится вернуть универсальный формат (например, для редактора, который не открывает WebP), пригодится обратное преобразование WebP → JPG. Полный список доступен на странице всех форматов.

Чек-лист внедрения

Соберём всё в короткий план, который можно выполнить по пунктам:

• Найдите LCP-элемент. Через PageSpeed Insights или DevTools определите главную картинку первого экрана и начните с неё.
• Сконвертируйте картинки в WebP. Фото — из JPEG, графику и прозрачность — из PNG. Можно пакетно через онлайн-конвертер.
• Подключите через <picture>. Обязательно с <img>-fallback в JPEG/PNG для совместимости.
• Добавьте srcset и sizes для адаптивных и ретина-экранов, где это уместно.
• Проставьте width/height у всех картинок, чтобы избежать «прыжков» вёрстки (CLS).
• Используйте loading="lazy" для картинок ниже экрана — но не для LCP-картинки.
• Включите автоматику. Плагин CMS или CDN с отдачей WebP по заголовку Accept.
• Проверьте результат. Повторно прогоните PageSpeed Insights — LCP и общий вес страницы должны упасть.

Это та редкая оптимизация, где соотношение «усилие/результат» почти идеальное: один формат, несколько строк разметки, минус сотни килобайт и плюс к скорости, удобству и SEO одновременно.