Автор: Эдуард

(frontend-разработчик)

Формат WebP: как картинки тормозят сайт и что с этим делать

Когда сайт грузится медленно, чаще всего виноваты не сервер и не код, а обычные фотографии. Особенно это касается интернет-магазинов: на странице каталога висят 20-30 фото товаров, и если каждое весит 2-3 МБ в JPEG, это 40-90 МБ на одну страницу. На мобильном интернете такая страница открывается десятки секунд, и многие закрывают вкладку, не дождавшись.

Любая картинка на сайте - это файл, который браузер скачивает до того, как показать его. Чем тяжелее файл, тем дольше загрузка. WebP - способ упаковать ту же картинку так, чтобы она весила меньше и скачивалась быстрее.

Что такое WebP и откуда он взялся

WebP - формат изображений, который Google представил в 2010 году. В его основе алгоритм видеокодека VP8, который Google получил вместе с компанией On2 Technologies. Идея была простой: если VP8 хорошо сжимает отдельные кадры видео, тот же принцип можно применить к статичным картинкам.

Позже в формат добавили сжатие без потерь. Оно устроено иначе и с VP8 уже не связано. Сейчас WebP поддерживает:

• сжатие с потерями (lossy) и без потерь (lossless);
• прозрачность (альфа-канал) в обоих режимах;
• анимацию;
• метаданные EXIF и XMP, встроенный цветовой ICC-профиль.

Как устроено сжатие в WebP

Сжатие с потерями опирается на простое наблюдение: у соседних пикселей яркость и цвет обычно почти одинаковые.

1. Изображение делится на макроблоки - квадраты 16×16 пикселей для яркости и 8×8 для цвета.
2. Внутри каждого блока кодек предсказывает содержимое по уже обработанным соседним пикселям сверху и слева.
3. Сохраняется только разница между предсказанием и реальной картинкой. Все, что предсказуемо, из файла удаляется.
4. Эта разница проходит математическое преобразование (вариант дискретного косинусного преобразования), квантование и энтропийное кодирование. На квантовании и теряется часть деталей, почти незаметная глазу.

Отсюда и выигрыш: на фото с небом, стенами, однотонным фоном предсказание почти всегда попадает, и файл получается заметно легче JPEG.

WebP, JPEG, PNG, GIF и AVIF: сравнение

* Анимированный PNG (APNG) существует, но на сайтах почти не используется. Данные о поддержке браузерами - caniuse.com, август 2026.

Поэтому на большинстве сайтов WebP остается разумным компромиссом, а AVIF подключают вторым форматом через тег picture.

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

С 2021 года Google учитывает в ранжировании Core Web Vitals - набор метрик скорости и стабильности страницы. Одна из ключевых метрик - LCP (Largest Contentful Paint), время загрузки самого крупного элемента на первом экране. Хорошим считается LCP до 2,5 секунды. Самый крупный элемент - это часто главное фото: баннер, фото товара, обложка статьи. Чем легче это фото, тем ниже LCP.

Яндекс не публикует скорость как отдельный фактор ранжирования. Но медленная страница повышает долю отказов, а поведение пользователей поисковик учитывает.

Проверить, сколько весят картинки и мешают ли они загрузке, можно бесплатно в PageSpeed Insights. Если в отчете есть рекомендация «Используйте современные форматы изображений», значит WebP даст ощутимый выигрыш.

Как перевести картинки в WebP

Конвертация файлов

• Онлайн. Бесплатный сервис Squoosh от Google - можно сравнить исходник и результат бок о бок и подобрать качество.
• Photoshop. Начиная с версии 23.2: «Файл → Сохранить как → WebP».
• CMS. WordPress принимает WebP с версии 5.8, а плагины умеют конвертировать всю медиатеку автоматически. Для других CMS тоже есть модули конвертации - уточните у разработчика своего сайта.
• Командная строка. Утилита cwebp от Google для пакетной конвертации: cwebp -q 80 photo.jpg -o photo.webp.

Качество 75-85 для фото обычно дает хороший баланс веса и картинки, но проверяйте результат глазами на своих изображениях.

Вставка на сайт

Самый простой вариант - указать WebP-файл напрямую:

<img src="photo.webp" alt="Описание картинки" width="800" height="600" loading="lazy">

Атрибуты width и height резервируют место под картинку, чтобы страница не «прыгала» при загрузке. loading="lazy" откладывает загрузку картинок ниже первого экрана.

Надежный вариант с запасным форматом для старых браузеров:

   <picture>
        <source srcset="photo.webp" type="image/webp">
        <img src="photo.jpg" alt="Описание картинки" width="800" height="600">
    </picture>

Браузер берет WebP, если умеет его показывать, а если нет - обычный JPEG.

Когда переход оправдан | Где WebP дает заметный результат

Лендинг на 5-10 картинок

Выигрыш небольшой. Имеет смысл перевести главное изображение первого экрана - оно влияет на LCP.

Интернет-магазин, каталог, блог

Максимальный эффект: сотни фото. Начинайте со страниц с поисковым трафиком - популярных карточек, категорий, статей в топе.

Картинки уже оптимизированы

Если PageSpeed Insights не ругается на изображения, ищите узкое место в скриптах, шрифтах или сервере - WebP почти ничего не даст.

Переход на WebP делается один раз: дизайн и верстку переделывать не нужно, а выигрыш в скорости остается.