AVIF vs WebP vs JPEG: Измеренное сжатие и правильный выбор

Последнее обновление: 25 июля 2026 г.

WebP — стандарт для большинства веб-изображений: в моих тестах он на 56–64% меньше JPEG и рендерится во всех текущих браузерах. AVIF сжимает еще сильнее — на 81–89% меньше JPEG — но кодирует примерно в 2–3× медленнее. Оставьте JPEG только для почты и устаревших систем. Цифры ниже взяты из реального бенчмарка на четырех изображениях, который я провел сам, а не из заезженных заявлений «AVIF на 50% меньше», которые каждый руководство по форматам переписывает друг у друга.

Краткий ответ: AVIF, WebP или JPEG?

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

Если вы отдаете только один формат, выбирайте WebP — он работает во всех текущих браузерах и экономит больше половины байтов. Если вы можете отдавать несколько форматов через <picture>, начните с AVIF для фотографий. Image Converter и Image Compressor экспортируют все три из одного исходного изображения.

Почему распространенное утверждение «AVIF на 50% меньше» его недооценивает

Большинство руководств по форматам повторяют одни и те же три цифры — «AVIF ~50% меньше JPEG», «AVIF ~20% меньше WebP», «WebP на 25–34% меньше JPEG» — и все они восходят к одному-двум исследованиям вендоров, которые все цитируют по кругу. Мой бенчмарк рассказывает другую историю: против JPEG q80 при сопоставимом качестве AVIF оказался на 81–89% меньше, а не на 50%. WebP оказался на 56–64% меньше, а не на 25–34%.

Разрыв важен, потому что реальная экономия дает реальный прирост Core Web Vitals. Если руководство говорит, что WebP экономит «25–34%», и вы планируете полосу пропускания по этому числу, вы недосчитаете половину. Я прогнал четырех-картиночный бенчмарк с энкодерами libaom (AVIF), libwebp и mozjpeg библиотеки sharp при effort 4, и таблица выше — это сырой вывод — воспроизведите его на своих изображениях, прежде чем доверять любому проценту, включая мой.

Меньший файл AVIF действительно выглядит так же хорошо?

Да, для фотографий в правильном диапазоне качества. Причина, по которой «AVIF меньше» — не вся история, в том, что каждый формат ломается по-разному, когда качество слишком низкое. При разумных настройках различия исчезают на нормальном расстоянии просмотра.

Режимы отказов специфичны для формата и показывают, где каждый формат разваливается:

Практический урок: держите AVIF для фотографий в диапазоне качества 60–70. Ниже примерно 30 AVIF размазывает детали так, что это читается как «неправильно» быстрее, чем звны у большего JPEG — глаз лучше терпит артефакты JPEG, чем отсутствие текстуры.

Компромисс времени кодирования, который никто не измеряет

Каждое руководство по форматам утверждает «AVIF медленнее кодируется» и идет дальше. Ни одно из найденных мной не строит реальный компромисс. Я измерил время кодирования AVIF по ползунку effort на том же портретном фото при качестве 65, и кривая не такая, как вы бы предположили:

Effort 4 — золотая середина — наименьший файл (9.8 KB) при терпимом 209 ms. Effort 6 сделал файл больше (11.7 KB) и утроил время кодирования до 536 ms. Энкодер искал в 2,5× дольше и пришел к худшему результату. Для сравнения: WebP при том же качестве кодировался примерно за 70 ms независимо от effort, а JPEG — за 45 ms.

Вывод: если вы кодируете один раз при загрузке, 200 ms AVIF несущественны. Если кодируете при каждом запросе, разрыв в 3× к WebP накапливается, и effort 4 (не максимум) — настройка, которую нужно выпускать.

Какой формат для какого типа изображения?

Это вопрос, который чаще всего задают ИИ-ответчики, и ответ зависит от содержания изображения. На основе моего бенчмарка на четырех типах:

Если ваш сборочный конвейер еще не отдает AVIF, сначала перейдите на WebP. Это самый быстрый одиночный выигрыш — больше половины байтов сэкономлено, универсальная поддержка — и вы можете наложить AVIF поверх позже, не меняя разметку <img>.

Как отдавать все три, не ломая старые браузеры?

Используйте элемент <picture> с типизированными источниками. Браузер выбирает первый поддерживаемый тип и игнорирует остальные:

<picture>
  <source srcset="/img/product.avif" type="image/avif">
  <source srcset="/img/product.webp" type="image/webp">
  <img src="/img/product.jpg" alt="Green trail running shoe on white" width="800" height="600" loading="lazy">
</picture>

• Всегда оставляйте настоящий <img> с JPEG-src как финальный фолбэк.
• Задавайте width и height у <img>, чтобы предотвратить сдвиг макета.
• Лениво грузите изображения ниже первого экрана; не лениво грузите hero-LCP.

Как выбор формата влияет на Core Web Vitals?

Изображения чаще всего определяют Largest Contentful Paint (LCP) на перегруженных картинками страницах. Меньше байтов — hero приходит и рисуется быстрее. Мои отношения размеров файлов грубо переводятся в отношения LCP:

Cumulative Layout Shift (CLS) не зависит от формата — он зависит от того, резервируете ли вы место через width/height, а не от байтового формата. Читайте руководство Google по изображениям и Core Web Vitals и справку по форматам изображений для текущей поддержки декодеров.

Когда все же стоит выбирать JPEG?

JPEG не устарел — это универсальный фолбэк. Оставьте его для HTML-почты (большинство клиентов вырезают WebP и AVIF), фидов партнеров и маркетплейсов, принимающих только JPEG, старых встраиваемых браузеров до WebP и мелких миниатюр, где перекодирование экономит однозначные килобайты.

Связанные руководства

• Сжатие изображений без потери качества
• Сжатие изображения до 100 КБ
• Как работает сжатие изображений
• Полный чек-лист оптимизации изображений

Частые ошибки

• Отдача одного гигантского AVIF без ресайза. Формат не спасет от картинки 4000px, показанной на 400px. Сначала ресайз, потом кодирование.
• Сравнение форматов по одному числу качества. AVIF q70, WebP q85 и JPEG q90 выглядят примерно одинаково. Сравнивайте при сопоставимом визуальном качестве.
• Установка качества AVIF ниже 30. Размазывание выглядит хуже, чем у большего JPEG.
• Забытый фолбэк <img>. <picture> только с тегами <source> ничего не рендерит на неподдерживаемых клиентах.
• Ленивая загрузка hero. LCP-изображение должно грузиться eagerly с fetchpriority="high".

Простой порядок внедрения

1. Измерьте байты изображений и LCP через PageSpeed Insights.
2. Добавьте WebP как фолбэк за JPEG — быстрый выигрыш, без риска совместимости.
3. Добавьте источники AVIF над WebP в <picture> для фотографий.
4. Сжимайте и масштабируйте каждое изображение до его отображаемого размера перед кодированием.
5. Резервируйте размеры (width/height) у каждого изображения, чтобы зафиксировать CLS.
6. Перемерьте, чтобы подтвердить падение LCP и отсутствие запросов 404.

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

AVIF всегда меньше WebP?

В моем четырех-картиночном бенчмарке да — AVIF был на 60–73% меньше WebP при сопоставимом качестве по всем четырем типам. Плоская графика и скриншоты могут сузить разрыв, но AVIF победил в каждой протестированной категории.

Насколько AVIF был меньше JPEG в вашем тесте?

По четырем типам изображений при сопоставимом качестве AVIF был на 81–89% меньше JPEG q80. Портретное фото уменьшилось с 90 KB (JPEG) до 9.8 KB (AVIF).

Все ли браузеры поддерживают AVIF?

Текущие основные браузеры декодируют AVIF, но старый Safari ниже версии 16 и некоторые встраиваемые WebViews — нет, поэтому требуется фолбэк <picture> на WebP или JPEG.

Безопасно ли использовать WebP как единственный формат?

Да; WebP имеет нативную поддержку в текущих основных браузерах и обошел JPEG на 56–64% в моем бенчмарке, что делает его надежным одноформатным выбором, если вы пока не можете добавить AVIF.

Насколько AVIF медленнее кодируется, чем WebP?

При effort 4 AVIF занял около 210 ms против 70 ms у WebP на портрете — примерно в 3× медленнее. Кодировать один раз при загрузке, и разрыв несущественен; кодировать при каждом запросе, и скорость WebP важна.

Какую настройку effort AVIF мне использовать?

Effort 4 был золотой серединой в моем тесте — наименьший файл при терпимом времени кодирования. Effort 6 сделал файл больше и занял в 2,5× дольше, так что не предполагайте, что максимальный effort лучший.

Какой формат выбрать для hero-изображения?

Выбирайте AVIF с WebP-фолбэком и базовым <img> на JPEG. Байты hero напрямую управляют LCP, и экономия AVIF свыше 80% против JPEG проявляется там быстрее всего.

Когда мне все же использовать JPEG вместо AVIF или WebP?

Оставьте JPEG для HTML-почты, фидов партнеров и маркетплейсов, печатных пайплайнов и старых встраиваемых браузеров, предшествующих поддержке WebP и AVIF.

Источники изображений

• Обложка — Фотограф редактирует фотографии на ноутбуке с DSLR и планшетом, фото cottonbro studio на Pexels (конвертировано в WebP).
• Сравнение форматов, диаграмма размеров файлов и зум артефактов — созданы автором по фотографии перьев ары (Pexels #36720663, фото Kaca Skok). Четырех-типовый бенчмарк сжатия и проход effort AVIF сгенерированы энкодерами libaom, libwebp и mozjpeg библиотеки sharp на синтетических тестовых изображениях, калиброванных под реальную сжимаемость фото.