Сжатие графики для веба: конвертация в WebP и AVIF

Конвертация в WebP и AVIF — стандартная процедура сжатия графики для веба: современные форматы кодируются в разы эффективнее JPEG и PNG при том же визуальном качестве, а автоматизация конвертации сводится к пакету утилит командной строки и правилу в пайплайне публикации; эффект сверяется по метрикам скорости страницы до и после внедрения.

Почему JPEG уже не отвечает за вес страницы

WebP — формат изображений от Google, который поддерживает сжатие с потерями и без потерь, альфа-канал и анимацию. Формат работает во всех актуальных браузерах уже несколько лет, и по данным HTTP Archive Web Almanac именно на него приходится основная доля новых изображений на страницах. AVIF развивает эту идею дальше: это AV1 Still Image (контейнер от альянса AOM), который при сопоставимом качестве часто даёт ещё меньший размер файла, особенно на фотографиях с градиентами. Технические подробности по обоим форматам собраны в справочнике MDN по типам изображений для веба.

Практический смысл для владельца сайта один: вес изображений — самый тяжёлый компонент средней веб-страницы, и именно картинки обычно дают основной вклад в LCP. Поэтому конвертация графики — первая строка любого плана по скорости: без неё даже безупречный аудит Core Web Vitals не выведет метрики в зелёную зону.

WebP против AVIF против JPEG

Задача «один формат навсегда» не ставится: у каждого формата своя роль, и связка из двух современных форматов плюс JPEG как запасной вариант закрывает все браузеры без единой строчки JavaScript. Ключевые различия:

Выбор сводится к простому правилу: максимальная экономия нужна на больших фото — ставьте AVIF первым, WebP вторым в ; нужна скорость сборки и предсказуемость — достаточно одного WebP.

Автоматизация: от ручной конвертации до пайплайна

База автоматизации — пакетные утилиты. Конвертер cwebp из пакета webp кодирует файл одной командой; полный список опций есть в официальной документации WebP. Конвертер avifenc из libavif работает аналогично для AVIF. Ручной вариант для разовой чистки архива:

sudo apt install webp libavif-bin
cwebp -q 80 photo.jpg -o photo.webp
avifenc -q 55 photo.jpg photo.avif

Пакетная конвертация целой директории с сохранением структуры:

for f in images/*.jpg; do
  cwebp -q 80 "$f" -o "${f%.*}.webp"
done

Следующий уровень — встраивание в процесс публикации. Для статических сайтов добавляйте шаг конвертации в сборку, для WordPress существуют плагины оптимизации изображений, которые конвертируют при загрузке и раздают WebP автоматически. Методика проверки веса страницы и рекомендация «предлагайте изображения в современных форматах» описаны в руководстве оптимизации LCP от web.dev. Если сайт уже стоит за CDN, часть работы снимается кеширующим слоем — о том, что даёт бесплатный тариф Cloudflare, читайте в отдельном разборе бесплатного CDN Cloudflare.

Раздача с fallback: picture и type

Поддержка форматов определяется не сервером, а браузером — через атрибут type в . Браузер выбирает первый подходящий вариант и загружает только его:

Оригинальный JPEG остаётся запасным вариантом и никуда не удаляется. Экономить на атрибуте alt не стоит: он нужен и доступности, и поисковому пониманию картинок — о том, где брать легальные исходники изображений, мы писали в материале про стоки картинок.

Подвохи и частые ошибки

• Пережать. Слишком низкое качество «для экономии» даёт видимые артефакты на лицах и тексте. Ориентиры: 80–85 для фото WebP, 50–60 для AVIF (его шкала q жестче), 90 для графики с текстом — и всегда визуальная проверка на «сложном» кадре.
• Забыть про размеры. Сжатие формата не заменяет ресайз: уменьшение 4000-пиксельной камеры до 1200 px по ширине даёт выигрыш на порядок больше, чем перекодирование.
• Двойное сжатие. Конвертация из JPEG в JPEG с потерями каждый раз деградирует; держите оригиналы без потерь (PNG/TIFF из источника) и конвертируйте из них.
• Мусор после миграции. Старые JPEG останутся в индексе картинок и ссылках; удалять их стоит после замены ссылок, а не в момент конвертации — иначе быстро плодятся битые ссылки, о которых подробно рассказано в статье про битые ссылки и 404.

Контрольный чек-лист

• [ ] Все контентные изображения выдаются в WebP или AVIF, JPEG остаётся fallback
• [ ] У заполнен атрибут type
• [ ] Исходники хранятся без потерь, конвертация идёт из них, а не из пережатых JPEG
• [ ] Картинки перед конвертацией ужаты до реальных размеров отображения
• [ ] Конвертация встроена в пайплайн публикации, а не выполняется «руками по случаю»
• [ ] LCP главной и типовой страницы проверен до и после внедрения

Часто задаваемые вопросы

Какое качество выставлять при конвертации в WebP?

Для фотографий обычно достаточно cwebp -q 80, для скриншотов и иллюстраций с текстом — 85–90, чтобы не «замыливались» мелкие детали. JPEG в этом диапазоне сжимается хуже, поэтому сравнивайте не проценты, а результат визуально. Автоматизацию стоит проверять контрольной конвертацией одного «сложного» изображения из каждой типовой группы.

Нужен ли fallback на JPEG для старых браузеров?

Решает браузер через атрибут type в элементе source: если WebP или AVIF не поддерживается, браузер просто пропустит source и возьмёт оригинальный JPEG из img. Всё, что старше, чем WebP-поддержка (например, устаревшие Safari), получит оригинал. Ни JavaScript, ни серверные проверки для этого не нужны.

WebP или AVIF: что выбрать в 2026 году?

Разумна связка: AVIF первым в picture, WebP вторым, JPEG как запасной вариант. AVIF заметно эффективнее на фотографиях, но кодируется медленнее; WebP быстрее и поддерживается повсеместно. Новым проектам достаточно связки из обоих форматов — инструменты сжатия и CDN-профили сейчас поддерживают оба.

Вывод

Сжатие графики — редкий случай оптимизации, где усилия измеряются минутами, а эффект тянется месяцами: автоматическая конвертация в WebP и AVIF делает каждый новый пост и каждую новую страницу легче без единого изменения дизайна. Настройте конвертацию один раз, держите оригиналы без потерь и периодически прогоняйте аудит внешних ссылок, чтобы миграция не оставила после себя битых путей.