WebP и AVIF: руководство по современным форматам изображений

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+.

Стратегия выбора формата

Приоритет по поддержке

1. AVIF — для браузеров с поддержкой
2. WebP — для остальных современных
3. 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.