Что такое WebP
WebP — формат изображений, разработанный Google в 2010 году специально для веба. При сопоставимом качестве он даёт файлы на 25–35 % меньше JPEG и до 45 % меньше PNG. Поддерживает и сжатие с потерями, и без них, а также прозрачность и анимацию.
Долгое время его сдерживала слабая поддержка в Safari. С выходом Safari 14 в 2020 году формат стал работать во всех современных браузерах — сейчас это около 97 % пользователей.
Почему вес изображений важен
На типичном сайте изображения занимают больше половины веса страницы. Это напрямую влияет на скорость загрузки, а она — на позиции в поиске и на конверсию.
- Core Web Vitals. Метрика LCP измеряет время отрисовки самого крупного элемента, которым обычно оказывается именно картинка. Google учитывает её при ранжировании
- Отказы. Исследования показывают: каждая дополнительная секунда загрузки заметно увеличивает долю ушедших посетителей
- Мобильный трафик. На медленном соединении разница между 200 КБ и 600 КБ ощущается сразу
- Расходы на хостинг. Меньше вес — меньше исходящего трафика
Сравнение форматов
| Формат | Сильные стороны | Когда применять |
|---|---|---|
| WebP | Малый вес, прозрачность, анимация | Универсальный выбор для сайта |
| JPEG | Поддерживается везде, включая старые устройства | Фотографии, запасной вариант |
| PNG | Сжатие без потерь, прозрачность | Скриншоты, графика с чёткими границами |
| AVIF | Ещё меньше WebP на 20 % | Когда поддержка Safari не критична |
| SVG | Векторный, масштабируется без потерь | Логотипы, иконки, схемы |
Какое качество выбрать
Значение 75–85 % подходит для большинства задач: разница с оригиналом незаметна глазу, а вес падает в несколько раз. Ниже 60 % появляются артефакты на градиентах и в областях с мелкими деталями. Выше 90 % размер растёт быстро, а визуальный прирост почти отсутствует.
Про изменение размера
Загружать на сайт фотографию 4000 пикселей по ширине, чтобы показать её в блоке шириной 800, — самая частая и самая дорогая ошибка. Браузер скачивает полный файл и уменьшает его уже на устройстве.
Ориентиры по ширине: для полноэкранных изображений достаточно 1920, для блоков контента — 1280, для карточек товаров — 800, для превью и миниатюр — 400. Учитывайте экраны с двойной плотностью: для них берут удвоенную ширину, но с более сильным сжатием.
Как подключить с запасным вариантом
Чтобы старые браузеры получили JPEG, а современные WebP, используют тег <picture>:
<picture><source srcset="foto.webp" type="image/webp"><img src="foto.jpg" alt="Описание"></picture>
Браузер сам выберет первый поддерживаемый вариант. Атрибут alt обязателен: он нужен для доступности и для поиска по картинкам. Для изображений ниже первого экрана добавляйте loading="lazy".
Безопасность
Конвертация выполняется целиком в браузере через canvas. Файлы не загружаются на сервер, не сохраняются и никуда не передаются — можно обрабатывать любые изображения, включая внутренние документы и материалы клиентов.