WebP
последнее обновление: 16.12.2025
Определение: WebP — это формат изображений для веба, который помогает уменьшать вес картинок при сохранении приемлемого качества. Его обычно используют на сайтах вместо “тяжёлых” JPEG/PNG, чтобы страницы загружались быстрее, особенно на мобильных устройствах.
Зачем это нужно
- Снижать вес изображений и ускорять загрузку страниц.
- Улучшать показатели производительности (в том числе LCP), когда “первый экран” зависит от картинки.
- Экономить трафик пользователям и уменьшать нагрузку на сервер.
- Упрощать работу с графикой: хранить и отдавать изображения в более современном формате.
- Использовать один формат для разных задач (фото, графика), когда это уместно.
Пример
Пример кода:
// Находим картинку и меняем источник на .webp (упрощённо)
const img = document.getElementById('heroImg');
// Подставляем более лёгкий формат
img.src = '/images/hero.webp';
// На практике обычно ещё задают размеры, чтобы не было CLS
img.width = 1200;
img.height = 600;
Скриншот
Подпись к скриншоту: DevTools “Network”: открыть запрос изображения .webp и показать тип (image/webp) и его размер
Частые ошибки
- Конвертировать в WebP без контроля качества и получать “мыло” или артефакты.
- Не оставлять запасной формат для редких старых браузеров (когда проекту это критично).
- Не задавать размеры изображений (или соотношение сторон), из-за чего появляется сдвиг верстки (CLS).
- Использовать WebP “везде подряд”, хотя иногда SVG лучше для иконок, а AVIF может дать ещё меньший вес для фото.
- Забывать про оптимизацию доставки: большие изображения отдавать всем подряд, вместо responsive-подхода.
Связанные термины
Наши услуги
- Доработка сайтов — переведём изображения в WebP/AVIF, настроим правильную выдачу и ускорим загрузку.
- SEO-продвижение сайтов — улучшим техническое качество и скорость страниц, что помогает поведенческим факторам.
- Техническая поддержка сайта — контролируем качество изображений и производительность после обновлений контента.