Формат WebP: как конвертировать и внедрить на сайт
Что такое WebP
WebP — формат изображений от Google, обеспечивающий сжатие на 25–35% лучше JPEG при том же качестве. Поддерживает прозрачность (как PNG) и анимацию (как GIF). Использование WebP — один из самых эффективных способов ускорить загрузку сайта.
Преимущества WebP
- Меньший размер — JPEG 200 КБ → WebP 130–150 КБ при том же качестве
- Прозрачность — замена PNG с прозрачностью, но в 3–5 раз легче
- Поддержка браузерами — Chrome, Firefox, Safari, Edge — все современные браузеры
- Рекомендация Google — PageSpeed Insights рекомендует WebP как «next-gen format»
Как конвертировать изображения в WebP
Онлайн-сервисы
- squoosh.app — от Google, визуальное сравнение до/после, настройка качества
- tinypng.com — пакетная конвертация, бесплатно до 20 изображений
- convertio.co — конвертация любых форматов
Программы
- Photoshop — «Сохранить как» → WebP (с 2022 года)
- GIMP — бесплатный, поддерживает WebP
- XnConvert — пакетная конвертация, бесплатно
Командная строка
Утилита cwebp от Google: cwebp -q 80 input.jpg -o output.webp. Качество 75–85 — оптимальный баланс размера и качества.
Внедрение WebP на сайте
HTML-тег picture (рекомендуем)
Позволяет указать WebP как основной формат с fallback на JPEG:
<picture>
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Описание" loading="lazy" width="800" height="600">
</picture>Браузер загрузит WebP, если поддерживает, иначе — JPEG. Сочетайте с lazy loading для максимального эффекта.
WordPress-плагины (автоматизация)
- ShortPixel — автоматическая конвертация при загрузке + CDN + отдача WebP
- Imagify — от авторов WP Rocket, конвертация + сжатие
- EWWW Image Optimizer — конвертация на сервере, без лимитов (но нагружает CPU)
- WebP Express — бесплатный, конвертация + rewrite rules для отдачи WebP
Подробнее о полезных плагинах WordPress.
Серверная отдача через .htaccess
Для Apache: если рядом с image.jpg лежит image.jpg.webp — сервер автоматически отдаст WebP-версию браузерам, которые её поддерживают. Настраивается через mod_rewrite.
Рекомендации по качеству
| Тип изображения | Качество WebP | Примечание |
|---|---|---|
| Фотографии товаров | 80–85 | Баланс качества и размера |
| Hero-баннеры | 85–90 | Видны на полный экран, качество важнее |
| Иконки и графика | Lossless (без потерь) | Или SVG вместо растра |
| Фоновые изображения | 70–75 | Часто размыты, можно сильнее сжать |
| Миниатюры | 75–80 | Маленький размер — меньше артефактов |
AVIF — следующее поколение
AVIF — ещё более эффективный формат (на 20% легче WebP). Поддержка в браузерах растёт: Chrome, Firefox — да, Safari — с 2023 года. Пока рекомендуем использовать WebP как основной формат, AVIF — как дополнительный для прогрессивных проектов.
Хотите оптимизировать изображения на сайте? Обращайтесь в DZ Digital — настроим автоматическую конвертацию и отдачу WebP.
WebP хуже по качеству, чем JPEG?
При правильной настройке качества (80–85) разница незаметна глазу. WebP использует более эффективные алгоритмы сжатия. В слепых тестах пользователи не отличают WebP 80 от JPEG 90.
Нужно ли хранить оригиналы в JPEG?
Да, храните оригиналы в JPEG/PNG максимального качества. WebP-версии генерируйте автоматически плагином. Если в будущем появится лучший формат (AVIF) — пересоздадите из оригиналов.
WebP влияет на SEO?
Косвенно — да. WebP ускоряет загрузку → улучшает Core Web Vitals → повышает позиции. Google Images индексирует WebP наравне с JPEG и PNG. Не забывайте заполнять alt-теги для всех изображений.