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

Откройте отчёт WebPageTest почти любого сайта и посмотрите на распределение веса страницы: в большинстве случаев изображения занимают от половины до двух третей всего объёма. Это значит, что именно картинки чаще всего и тормозят загрузку, раздувают трафик и портят LCP. Хорошая новость: за последние годы появились форматы, которые при том же качестве весят на четверть-половину меньше привычных JPEG и PNG. Речь о WebP и AVIF. Перевод изображений на них — одна из самых рентабельных оптимизаций: минимум усилий, максимум эффекта. Разберём, чем они лучше, как их сравнивать и как внедрить без риска показать пользователю битую картинку.

Почему изображения — главный вес страниц

Текст, разметка и даже скрипты весят килобайты. А одно качественное фото товара или баннер легко тянет на сотни килобайт, а то и мегабайты, если их не оптимизировать. На странице каталога таких изображений десятки. В сумме получается тот самый многомегабайтный вес, который на мобильном интернете превращается в долгие секунды ожидания.

Именно поэтому работа с изображениями даёт самый большой выигрыш по объёму данных. Сжать JPEG на 30% сложно без потери качества, а вот перевести его в WebP или AVIF — и вы получаете ту же экономию почти бесплатно, потому что новые форматы изначально устроены эффективнее. Это базовый кирпич в фундаменте скорости, наряду с приёмами из материала про то, как оптимизировать изображения для SEO.

Что такое WebP и AVIF и чем они лучше

WebP — формат от Google, выпущенный ещё в 2010 году и сегодня поддерживаемый практически всеми браузерами. Он использует более совершенные алгоритмы сжатия, чем JPEG и PNG, поддерживает и потери (lossy), и сжатие без потерь (lossless), а также прозрачность (альфа-канал) и анимацию. Типичная экономия относительно JPEG — 25–35% при сопоставимом качестве, а относительно PNG для графики с прозрачностью — ещё больше.

AVIF — более новый формат на основе видеокодека AV1. Он сжимает ещё агрессивнее: относительно JPEG экономия нередко достигает 40–50% и выше при том же визуальном качестве. AVIF отлично справляется с фотографиями, поддерживает HDR, широкий цветовой охват, прозрачность и анимацию. Расплата за это — более медленное кодирование и чуть менее повсеместная (хотя уже очень широкая) поддержка браузерами. Оба формата напрямую улучшают LCP, потому что главное изображение первого экрана грузится быстрее — про это подробно в статье про ускорение главного контента страницы.

Сравнительная таблица форматов

Формат	Вес (относительно JPEG)	Прозрачность	Анимация	Поддержка браузеров
JPEG	базовый, 100%	нет	нет	повсеместная
PNG	часто больше JPEG	да	нет	повсеместная
WebP	на 25–35% меньше	да	да	практически все
AVIF	на 40–50% меньше	да	да	широкая, растёт

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

Отдельно стоит сказать про прозрачность и анимацию. Раньше для картинок с альфа-каналом приходилось использовать PNG, который для фотографичного содержимого весит непомерно много. WebP и AVIF поддерживают прозрачность нативно и при этом сжимают её эффективно, поэтому тяжёлые PNG с тенями и полупрозрачными краями — первые кандидаты на замену. Анимированные GIF, которые исторически весят чудовищно много, тоже отлично переводятся в WebP или AVIF с экономией в разы — или вообще заменяются на видео в формате MP4, что ещё легче. Если на сайте есть анимированные GIF баннеры, их перевод почти всегда даёт самый заметный единичный выигрыш по весу.

Перевод картинок на WebP и AVIF — это та редкая оптимизация, где вы режете вес страницы вдвое, не трогая ни дизайн, ни вёрстку, ни контент. Пользователь видит ровно то же самое изображение, но получает его в два раза быстрее.

Как внедрить: picture, srcset и fallback

Главный принцип безопасного внедрения — никогда не отдавать формат, который браузер может не понять, без запасного варианта. Для этого существует тег <picture> с несколькими источниками: браузер сам выбирает первый поддерживаемый формат, перебирая их сверху вниз.

Структура такая: внутри <picture> идут <source> с AVIF, затем с WebP, а завершает всё обычный <img> с JPEG как универсальный фолбэк. Браузер, понимающий AVIF, возьмёт его; не понимающий — спустится к WebP; самый старый — к JPEG из тега img. Это полностью безопасно: битых картинок не будет никогда. В тег img также прописывайте width, height и при необходимости srcset для адаптивных размеров под разные экраны.

• source с AVIF — самый лёгкий вариант для современных браузеров.
• source с WebP — широкая совместимость и хорошая экономия.
• img с JPEG/PNG — обязательный фолбэк, плюс атрибуты width, height, alt.
• srcset и sizes — для адаптивной выдачи разных разрешений под мобильные и десктоп.

Серверная конвертация, плагины и CDN

Прописывать <picture> вручную на большом сайте нереально. К счастью, есть автоматизированные способы отдавать современные форматы.

• Серверная конвертация и согласование. Сервер может на лету отдавать WebP/AVIF тем браузерам, которые их поддерживают, ориентируясь на заголовок Accept. Это делают модули вроде mod_pagespeed для Apache или конфигурации nginx с проверкой Accept.
• Плагины WordPress. ShortPixel, Imagify, Smush, EWWW и LiteSpeed Cache конвертируют картинки в WebP/AVIF и сами подставляют нужный формат. Это самый простой путь для сайтов на движке — детали в гайде про оптимизацию сайта на WordPress для SEO.
• CDN с авто-WebP. Cloudflare, и многие image-CDN умеют автоматически конвертировать и отдавать оптимальный формат каждому посетителю. Тему сетей доставки мы разбирали в материале про CDN для SEO и ускорения сайта.

Какой путь выбрать, зависит от стека. Для WordPress проще всего плагин, для самописного сайта на nginx — серверная конвертация или image-CDN. Главное — чтобы формат подбирался под возможности браузера автоматически и с гарантированным фолбэком.

Ещё один важный аспект при массовой конвертации — что делать с уже накопленной библиотекой изображений. На действующем сайте обычно лежат тысячи старых JPEG и PNG. Хорошие плагины умеют конвертировать их пакетно в фоновом режиме, не нагружая сервер разом. Планируйте такую массовую обработку на период низкой посещаемости и обязательно держите оригиналы — на случай, если понадобится перегенерировать версии с другим уровнем качества. Не удаляйте исходники сразу после конвертации, пока не убедитесь, что современные форматы корректно отдаются и индексируются на всех типах страниц.

Lossless против lossy и выбор качества

Оба формата поддерживают два режима. Lossy (с потерями) даёт максимальную экономию и подходит для фотографий, где небольшие потери незаметны глазу. Lossless (без потерь) сохраняет каждый пиксель и нужен для графики, скриншотов, логотипов с чёткими краями, где артефакты бросаются в глаза.

Что касается уровня качества, для lossy-режима на практике хорошо работает диапазон 75–85 для WebP и чуть ниже для AVIF за счёт его эффективности. Слишком высокое качество съедает выигрыш в весе, слишком низкое — даёт видимые артефакты. Оптимум ищется визуальным сравнением на репрезентативных картинках вашего сайта. Не гонитесь за единым числом — для разных типов изображений оптимальное качество отличается.

AVIF: плюсы и нюансы

AVIF — самый эффективный из массовых форматов, но у него есть особенности, которые стоит учитывать перед тотальным переходом.

• Плюс — максимальное сжатие. Лучшее соотношение качество/вес среди доступных форматов, особенно на фотографиях и градиентах.
• Плюс — современные возможности. HDR, широкий цветовой охват, прозрачность, анимация.
• Нюанс — медленное кодирование. Конвертация в AVIF требует заметно больше процессорного времени, чем в WebP. Для больших библиотек изображений это значимо: лучше конвертировать заранее и кэшировать, а не на лету.
• Нюанс — поддержка. Уже очень широкая, но не стопроцентная, поэтому фолбэк на WebP и JPEG обязателен.

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

Чек-лист внедрения современных форматов

1. Оцените в WebPageTest, какую долю веса страниц занимают изображения.
2. Выберите способ конвертации: плагин для WordPress, серверная конвертация или image-CDN.
3. Настройте отдачу AVIF и WebP с обязательным фолбэком на JPEG/PNG через <picture> или согласование по Accept.
4. Подберите уровень качества визуальным сравнением для фото и графики отдельно.
5. Используйте lossless для логотипов и скриншотов, lossy — для фотографий.
6. Не забудьте про width, height и alt у изображений, чтобы не страдал CLS и доступность.
7. Проверьте в DevTools, что браузеру реально отдаётся современный формат (колонка Type в Network).
8. Перемерьте LCP и общий вес страницы, сравните с исходными значениями.

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

Услуги LSI Продвижение

Наша команда предлагает полный спектр услуг по SEO-продвижению и технической доработке сайтов. Мы работаем только белыми методами, ориентируемся на реальный бизнес-результат — трафик, заявки и продажи, а не только позиции в отчёте, — и выстраиваем продвижение системно, под конкретные задачи и нишу вашего проекта. Начать можно с бесплатной диагностики, чтобы понять текущее состояние сайта и точки роста, а затем перейти к комплексной работе. Выберите подходящую услугу из списка ниже:

• Бесплатный SEO аудит сайта — автоматическая проверка на 50+ параметров за 2 минуты
• Комплексный SEO аудит — глубокий ручной анализ с рекомендациями от эксперта
• Продвижение сайтов — вывод в ТОП Яндекса и Google по целевым запросам
• SEO консультация — разбор вашего сайта с конкретными рекомендациями
• LSI тексты — экспертный контент, оптимизированный для поисковых систем
• Доработка сайта — техническая оптимизация и исправление ошибок
• Создание сайта под ключ — разработка с нуля с SEO-оптимизацией
• Стоимость продвижения — прозрачные тарифы и условия
• Портфолио и кейсы — реальные результаты наших клиентов