WebP и AVIF — современные форматы изображений с лучшим сжатием, чем JPEG и PNG. Они уменьшают размер страницы и ускоряют загрузку. В этой статье — сравнение форматов, поддержка браузерами и практические рекомендации по внедрению.
Сравнение форматов
| Формат | Сжатие | Прозрачность | Анимация | Поддержка |
|---|---|---|---|---|
| JPEG | Базовый | Нет | Нет | Все браузеры |
| PNG | Без потерь | Да | Нет | Все браузеры |
| WebP | На 25–35% меньше JPEG | Да | Да | Все современные |
| AVIF | На 50% меньше JPEG | Да | Да | Chrome, Firefox, Safari 16+ |
WebP разработан Google, AVIF основан на видеокодеке AV1. Оба поддерживают сжатие с потерями и без потерь.
WebP: особенности и использование
Преимущества
- На 25–35% меньше размер при том же качестве, что JPEG
- Поддержка прозрачности (альфа-канал)
- Поддержка анимации (альтернатива GIF)
- Поддержка во всех актуальных браузерах (Chrome, Firefox, Safari, Edge)
Недостатки
- Старые браузеры (IE11) не поддерживают — нужен fallback
- Медленнее декодируется, чем JPEG (на современных устройствах разница незаметна)
Конвертация в WebP
Онлайн: Image Compressor на reChecker — сжатие с выбором формата.
Командная строка (cwebp):
cwebp -q 80 input.jpg -o output.webp
Плагины CMS:
- WordPress: ShortPixel, Imagify, Smush
- Другие: настройка на уровне CDN или сборки
AVIF: особенности и использование
Преимущества
- На 50% меньше размер по сравнению с JPEG при сопоставимом качестве
- Лучшее сжатие, чем WebP
- Поддержка HDR и широкого цветового охвата
Недостатки
- Медленное кодирование (дешифровка в браузерах оптимизирована)
- Поддержка: Chrome 85+, Firefox 93+, Safari 16+, Edge 85+
Конвертация в AVIF
Командная строка (avifenc из libavif):
avifenc --min 20 --max 30 input.jpg output.avif
Онлайн: различные конвертеры, поддержка в ImageMagick 7+.
Стратегия выбора формата
Приоритет по поддержке
- AVIF — для браузеров с поддержкой
- WebP — для остальных современных
- JPEG/PNG — fallback для старых браузеров
Реализация через picture
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Описание изображения">
</picture>
Браузер выберет первый поддерживаемый формат. Порядок: AVIF → WebP → JPEG.
Качество и параметры сжатия
WebP
-q 80— хороший баланс качества и размера для фотографий-q 90— высокое качество, больший размер-lossless— без потерь (для графики с чёткими границами)
AVIF
- Качество задаётся в диапазоне (например, min 20, max 30)
- Ниже значение — меньше размер, ниже качество
- Для веба обычно 25–35
Влияние на производительность и SEO
- Меньший размер — быстрее загрузка, лучше LCP
- Core Web Vitals учитываются в ранжировании
- Проверка: Web Vitals на reChecker
- Анализ изображений: Проверка изображений reChecker
CDN и автоматическая конвертация
Многие CDN (Cloudflare, imgix, KeyCDN) поддерживают автоматическую конвертацию в WebP/AVIF по заголовку Accept:
Accept: image/avif,image/webp,image/*
Сервер отдаёт оптимальный формат без изменения разметки — достаточно использовать один URL в src.
Чек-лист внедрения
| Действие | Проверка |
|---|---|
| Конвертация в WebP | Сравнить размер до/после |
| Добавление AVIF | Для браузеров с поддержкой |
| Fallback на JPEG/PNG | Проверить в старых браузерах |
| Атрибуты width/height | Для предотвращения CLS |
| Alt-теги | Для всех изображений |
Подробнее об оптимизации изображений — в руководстве по оптимизации изображений. О lazy loading — в статье про отложенную загрузку.
Интеграция в сборку
Для статических сайтов и приложений конвертация в WebP/AVIF может быть частью сборки:
// Пример с sharp (Node.js)
const sharp = require('sharp');
await sharp('input.jpg')
.webp({ quality: 80 })
.toFile('output.webp');
await sharp('input.jpg')
.avif({ quality: 35 })
.toFile('output.avif');
Next.js, Gatsby и другие фреймворки имеют плагины для автоматической конвертации при сборке.
Сравнение качества при разном сжатии
| Формат | Качество 80 | Качество 60 | Качество 40 |
|---|---|---|---|
| JPEG | Базовый размер | -25% | -40% |
| WebP | -30% от JPEG | -45% | -55% |
| AVIF | -50% от JPEG | -60% | -70% |
Рекомендуется тестировать визуально — цифры усреднённые, результат зависит от типа изображения.
Часто задаваемые вопросы
Нужно ли поддерживать fallback для старых браузеров?
Для большинства сайтов в 2026 году — нет. IE11 и старые Safari составляют менее 1% трафика. Если аудитория использует старые устройства — оставьте picture с fallback.
Что лучше: WebP или AVIF?
AVIF даёт лучшее сжатие при том же качестве. WebP имеет более широкую поддержку. Рекомендуется использовать оба через picture: AVIF для поддерживающих, WebP для остальных современных браузеров.
Влияет ли формат на индексацию в Google Images?
Нет. Google индексирует изображения в любом формате. Важнее alt, контекст и качество контента.
Заключение
WebP и AVIF значительно уменьшают размер изображений при сохранении качества. Рекомендуется использовать picture с source для AVIF и WebP и fallback на JPEG/PNG. Проверяйте результат через проверку изображений и Image Compressor на reChecker.