Что за формат WebP и как его использовать на своем сайте.

Страница грузится медленно и вы задаётесь вопросом «почему страница весит так много?» — скорее всего, виновниками были изображения. WebP появился именно как ответ на этот вопрос: Google выпустил формат в 2010 году с единственной целью — сделать картинки в вебе легче, не жертвуя качеством. Спустя 15 лет WebP стал фактическим стандартом для изображений в вебе, поддерживается всеми современными браузерами и экономит от 25 до 35% трафика по сравнению с JPEG.

В статье разберём: что умеет WebP, насколько он действительно легче JPEG и PNG, как подключить его на сайте и что делать с браузерами, которые его не поддерживают (спойлер: таких почти не осталось).

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

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

Технически WebP — это контейнер RIFF с данными, закодированными VP8 (для lossy) или VP8L (для lossless). Расширение файла — .webp , MIME-тип — image/webp . Формат открытый, бесплатный и без лицензионных отчислений.

Lossy («с потерями») — алгоритм выбрасывает часть данных, которые человеческий глаз всё равно не заметит: лишние оттенки, мелкие детали в тенях. Файл становится меньше, но вернуть выброшенное уже нельзя. Именно так работает JPEG — и именно поэтому сохранённая фотография немного хуже оригинала. Lossless — алгоритм без потерь.

Что умеет WebP

WebP — не просто «JPEG, но меньше». Это полноценный формат, закрывающий почти все сценарии работы с изображениями в вебе:

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

Другими словами, WebP заменяет сразу JPEG, PNG и GIF — один формат для всех случаев. Единственное, где он пока уступает — это AVIF, но об этом в конце статьи.

Насколько WebP экономит место

Google проводил масштабное тестирование на базе 1 миллиона веб-изображений. Результаты:

• Lossy WebP в среднем на 25–34% меньше, чем JPEG при эквивалентном качестве
• Lossless WebP в среднем на 26% меньше, чем PNG
• Lossless WebP с прозрачностью — на 22% меньше, чем PNG с alpha-каналом
• Анимированный WebP — в 2–5 раз меньше, чем GIF

На практике разница зависит от конкретного изображения: простые однотонные картинки сжимаются лучше, сложные фотографии — скромнее. Но в среднем перевод сайта на WebP уменьшает суммарный объём изображений на 20–30%, что напрямую влияет на скорость загрузки.

Зачем это важно для SEO

Google с 2021 года учитывает Core Web Vitals в ранжировании. Ключевой метрик — LCP (Largest Contentful Paint) — часто определяется временем загрузки главного изображения на странице. Переход на WebP снижает LCP без каких-либо правок в коде или дизайне. Бесплатный выигрыш.

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

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

Долгие годы главным камнем преткновения был Safari — Apple упрямо игнорировала WebP почти десять лет, в то время как конкуренты давно добавили поддержку. Но в 2020–2021 годах всё изменилось:

• Chrome — с версии 17 (2012)
• Firefox — с версии 65 (2019)
• Edge — с версии 18 (2018)
• Opera — с версии 11.1 (2012)
• Safari на iOS — с версии 14.0 (сентябрь 2020)
• Safari на macOS — с версии 14.0 (ноябрь 2020)

По данным Can I Use сейчас WebP поддерживают 97%+ всех пользователей. Единственное исключение — Internet Explorer, который к этому моменту следует считать историческим артефактом: Microsoft завершила его поддержку в 2022 году.

Если вам не нужна поддержка Internet Explorer (а она, как правило, больше не нужна) — просто используйте <img> напрямую:

<img src="photo.webp" alt="Описание изображения" loading="lazy">

Всё. Никаких оговорок, никаких полифиллов — браузер загрузит WebP, как обычную картинку.

Если нужна подстраховка (например, сайт предназначен для аудитории со старыми устройствами), используйте элемент <picture> . Браузер пробует источники сверху вниз и использует первый поддерживаемый:

<picture>
    <source srcset="photo.webp" type="image/webp">
    <img src="photo.jpg" alt="Описание изображения" loading="lazy">
</picture>

Chrome, Firefox, Safari — загрузят WebP. Гипотетический браузер без поддержки WebP получит JPEG. Тег <img> внутри <picture> — обязательный fallback; без него конструкция не работает.

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

Fallback — запасной вариант на случай, если основной не сработал. В контексте изображений: браузер сначала пробует загрузить WebP, а если не умеет — берёт PNG или JPEG из тега img. Пользователь не замечает переключения — он просто видит картинку.

<picture>
    <source srcset="logo.webp" type="image/webp">
    <img src="logo.png" alt="Логотип" loading="lazy">
</picture>

Для фоновых изображений в CSS можно использовать директиву @supports :

.hero {
    background-image: url('hero.jpg');
}

@supports (background-image: url('test.webp')) {
    .hero {
        background-image: url('hero.webp');
    }
}

Более современный подход — добавлять класс .webp к <html> через JavaScript (например, используя Modernizr ) и переключать фоны через CSS. Но с учётом 97%+ покрытия браузеров, во многих проектах проще просто использовать WebP без как есть.

Если нужно быстро конвертировать несколько файлов без установки ПО:

• Convertio — популярный конвертер с русским интерфейсом. Поддерживает пакетную загрузку, бесплатно до 100 МБ на файл.
• FreeConvert — конвертирует в WebP с настройкой качества и размера, поддерживает пакетную обработку до 25 файлов бесплатно.

Adobe Photoshop поддерживает WebP нативно начиная с версии 23.2 (2022). Для сохранения выбирайте File → Save As / Файл → Сохранить как и в выпадающем списке форматов выберите WebP (*.webp). Вкладка Export As / Экспортировать как WebP не содержит — это распространённая ошибка. GIMP поддерживает WebP через встроенный плагин — без дополнительных установок.

Google предоставляет консольный инструмент cwebp в составе библиотеки libwebp . Установить можно через Homebrew на macOS, apt/yum на Linux или скачать бинарник для Windows с сайта Google.

# Базовая конвертация JPEG → WebP с качеством 80
cwebp -q 80 photo.jpg -o photo.webp

# Конвертация PNG → WebP без потерь (lossless)
cwebp -lossless logo.png -o logo.webp

# Конвертация всех JPEG в текущей папке (bash)
for f in *.jpg; do cwebp -q 80 "$f" -o "${f%.jpg}.webp"; done

Параметр -q задаёт качество от 0 до 100. Значения 75–85 — оптимальный баланс между размером и качеством для большинства фотографий.

Для автоматизации в Node.js-проектах (Webpack, Vite, сборка сайта) библиотека sharp — лучший выбор. Она быстрая, основана на libvips и поддерживает все нужные форматы:

import sharp from 'sharp';

// Конвертация одного файла
await sharp('photo.jpg')
    .webp({ quality: 80 })
    .toFile('photo.webp');

// Lossless WebP
await sharp('logo.png')
    .webp({ lossless: true })
    .toFile('logo.webp');

Продвинутый вариант — отдавать WebP автоматически всем браузерам, которые его поддерживают, не переименовывая файлы. Nginx умеет это из коробки через модуль ngx_http_image_filter_module или с помощью условного rewrite:

# Nginx: отдавать WebP, если браузер поддерживает и файл .webp существует
map $http_accept $webp_suffix {
    default   "";
    "~*webp"  ".webp";
}

server {
    location ~* \.(jpg|jpeg|png)$ {
        add_header Vary Accept;
        try_files $uri$webp_suffix $uri =404;
    }
}

При таком подходе вы храните оба файла ( photo.jpg и photo.webp ), а Nginx сам выбирает нужный по заголовку Accept запроса. Разметку менять не нужно — URL остаётся прежним.

Пока WebP завоёвывал рынок, технологии не стояли на месте. В 2019 году появился AVIF — формат на базе видеокодека AV1. Он сжимает ещё лучше: в среднем на 20–50% меньше, чем WebP при эквивалентном качестве, и заметно превосходит его на высоких степенях сжатия.

Звучит как замена? Частично. У AVIF есть свои ограничения:

• Медленное кодирование — создание AVIF значительно дольше, чем WebP. Для больших каталогов это критично.
• Поддержка браузеров — Chrome с 2020, Firefox с 2021, Safari с 2023. Покрытие хорошее, но чуть меньше WebP.
• Декодирование на слабых устройствах — на старых смартфонах AVIF может тормозить из-за вычислительной нагрузки.

Оптимальная стратегия — использовать AVIF как первичный вариант для современных браузеров, WebP как fallback, и JPEG/PNG как запасной:

<picture>
    <source srcset="photo.avif" type="image/avif">
    <source srcset="photo.webp" type="image/webp">
    <img src="photo.jpg" alt="Описание" loading="lazy">
</picture>

Браузер пробует форматы сверху вниз. Поддерживает AVIF — отлично, загружает AVIF. Нет AVIF, но есть WebP — загружает WebP. Совсем старый браузер — получает JPEG. Все счастливы, никто не обделён.

WebP прошёл путь от «Google-эксперимента» до стандарта де-факто за 15 лет. Сейчас это минимальный базовый уровень для любого нового проекта: подключить его легко, выигрыш ощутимый, а поддержка повсеместная. Если ваш сайт всё ещё отдаёт PNG и JPEG без альтернатив — самое время это исправить. Если интересна история других форматов — читайте про JPEG 2000 и AVIF.