AVIF или WebP: какой формат изображений выбрать в 2026

Представьте две одинаковые на вид фотографии товара. Одна весит 800 КБ, другая 180 КБ. Для глаза разницы нет, а для сайта она огромная. На странице каталога обычно 20-40 изображений, и если каждое лишнее, то страница раздувается до нескольких мегабайт. Посетитель с телефона на не самом быстром интернете просто закрывает вкладку, не дождавшись загрузки. По статистике, значительная часть людей уходит со страницы, которая грузится дольше трёх секунд, и чаще всего виноваты именно тяжёлые картинки.

Скорость загрузки давно стала фактором ранжирования. Поисковики измеряют, как быстро прорисовывается основной контент страницы, и картинки тут на первом месте по влиянию. Чем легче изображения, тем быстрее появляется страница, тем выше шанс, что посетитель останется и что-то купит. Это работает в обе стороны: быстрый сайт получает больше посетителей из поиска, а быстрая страница лучше удерживает тех, кто уже пришёл. Картинки в этом уравнении почти всегда самое слабое звено, потому что текст и стили весят килобайты, а одна непережатая фотография может весить мегабайт.

Есть и чисто денежная сторона вопроса. Каждый мегабайт, который вы отдаёте посетителю, это трафик. На большом сайте с тысячами посещений в день вес картинок напрямую влияет на расходы хостинга и на скорость работы сервера. Уменьшив изображения вдвое, вы вдвое снижаете нагрузку и затраты, ничего не теряя в качестве картинки.

Старый добрый JPG свою службу отслужил, но по эффективности сжатия он безнадёжно отстал. Современные форматы при том же визуальном качестве дают файлы вдвое легче и меньше. Вопрос только в том, какой из новых форматов выбрать и как не сломать сайт для тех, у кого старый браузер. Давайте по порядку, без лишней теории, только то, что пригодится на практике.

Краткий словарь форматов, чтобы дальше было понятно

Прежде чем сравнивать, пробежимся по героям рассказа. Их пять, и у каждого своя роль.

• JPG (он же JPEG). Ветеран с 1992 года. Сжатие с потерями, без прозрачности и анимации. Открывается абсолютно везде, но по эффективности безнадёжно устарел.
• PNG. Сжатие без потерь, поддерживает прозрачность. Незаменим для логотипов, иконок и графики с резкими линиями, но фотографии в нём весят очень много.
• WebP. Формат от Google, появился в 2010 году, массово прижился к середине 2010-х. Умеет и сжатие с потерями, и без потерь, плюс прозрачность и анимацию. Золотая середина по совместимости.
• AVIF. Молодой формат на базе видеокодека AV1, появился в 2019 году. Сжимает сильнее всех при том же качестве, поддерживает прозрачность, анимацию, расширенный цвет и HDR. Главный минус, медленное кодирование.
• JPEG XL (JXL). Перспективный формат-новичок, который умеет почти всё и обратно совместим с JPG, но пока слабо поддерживается браузерами. О нём отдельно поговорим ниже.

WebP появился раньше современных конкурентов и успел стать практически стандартом. Если вы хотите один формат, который просто работает везде и не доставляет хлопот, это он.

Сильные стороны WebP

• Почти полная поддержка браузеров. WebP понимают более 97 процентов браузеров по всему миру. Поддержка появилась в Chrome ещё в 2010-2014 годах, в Firefox с версии 65 (2019), в Safari с версии 14 на macOS Big Sur (2020), а на iPhone полноценно с iOS 14. Это значит, что подавляющее большинство ваших посетителей увидят картинку без всяких ухищрений.
• Заметная экономия веса. По сравнению с JPG того же качества WebP легче примерно на 25-35 процентов. Для большинства сайтов это уже огромный скачок: страница, которая весила 4 МБ, начинает весить под 2.5 МБ.
• Быстрое кодирование. Перегнать картинку в WebP быстро, в разы быстрее, чем в AVIF. Это критично, когда изображения конвертируются на лету, например когда пользователь загружает аватар или фото отзыва и ждёт результат прямо сейчас.
• Поддержка прозрачности и анимации. WebP умеет и альфа-канал (прозрачный фон), и анимацию, поэтому он подходит и как замена PNG с прозрачным фоном, и как замена тяжёлым GIF-анимациям. Анимированный WebP в разы легче того же ролика в GIF.
• Режим без потерь. У WebP есть и lossless-режим, прямой конкурент PNG. Он даёт файлы в среднем на 20-26 процентов легче PNG при идеально точном сохранении пикселей, что отлично подходит для скриншотов и графики.
• Зрелая экосистема. Формат существует достаточно давно, чтобы все популярные системы управления сайтами, плагины и инструменты умели с ним работать без бубна. Вы вряд ли столкнётесь с тем, что какой-то сервис его не понимает.

Где WebP проигрывает

Главная претензия к WebP в том, что есть формат, который сжимает ещё сильнее. На очень больших объёмах картинок (тысячи товаров в каталоге) каждый сэкономленный процент веса превращается в реальную экономию на трафике и в более быструю загрузку. Когда речь идёт о паре десятков картинок, разница между WebP и более агрессивным сжатием почти незаметна. Но если у вас крупный каталог или фотогалерея на сотни снимков, эти проценты складываются в десятки и сотни мегабайт, и тут WebP уступает.

Ещё один нюанс: WebP с потерями качества иногда чуть хуже справляется с очень плавными градиентами на больших фотографиях, чем самый современный формат. На практике это заметно редко и только при сильном сжатии, но знать об этом стоит, если вы работаете с художественными снимками. У WebP также есть техническое ограничение по размеру: максимум 16383 на 16383 пикселя, чего хватает почти всегда, но гигантские панорамы в него не влезут.

Полезно понимать, откуда вообще берётся эта экономия. WebP использует более умные алгоритмы предсказания соседних пикселей, чем старый JPG, и эффективнее упаковывает повторяющиеся участки изображения. Грубо говоря, формат лучше угадывает, каким будет следующий кусочек картинки, и хранит только разницу, а не всё подряд. Для пользователя это означает одно: та же визуальная чёткость при меньшем весе, без всяких настроек со своей стороны.

Где WebP особенно выручает на практике

Есть несколько типовых сценариев, где переход на WebP даёт самый быстрый и заметный эффект, причём почти без риска что-то сломать.

• Блог и информационные статьи. Тут картинки в основном иллюстративные, их не так много, и максимальная совместимость важнее последнего процента сжатия. WebP закрывает задачу полностью.
• Превью и миниатюры в каталоге. Маленькие картинки списком, где главное, чтобы они появились мгновенно и одинаково у всех. WebP кодируется быстро и грузится быстро.
• Сайты на готовых платформах. Если у вас типовая система управления сайтом, перевод картинок в WebP чаще всего делается одним готовым решением, которое автоматически отдаёт WebP тем, кто его поддерживает, и обычный JPG остальным. Это самый простой путь получить выигрыш в скорости вообще без ручной работы.
• Замена тяжёлых GIF. Анимированные баннеры и короткие зацикленные ролики в GIF весят чудовищно много. Тот же ролик в анимированном WebP легче в несколько раз, а выглядит так же или лучше.

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

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

AVIF, это более новый формат, построенный на технологиях современного видеокодирования: он использует внутрикадровое сжатие из кодека AV1, того самого, на котором работают современные стриминги. Его главный козырь, агрессивное сжатие, и тут он лидер.

Чем AVIF лучше

• Самое сильное сжатие. При одинаковом визуальном качестве файлы AVIF на 20-30 процентов легче, чем WebP, и примерно на 50 процентов легче, чем JPG. То есть AVIF может быть вдвое легче привычной JPG-картинки, и глаз разницы не заметит.
• Хорошо держит сложные изображения. На фотографиях с плавными градиентами (небо, кожа, размытый фон) AVIF почти не оставляет тех уродливых артефактов и квадратиков, которыми грешит JPG при сильном сжатии. Вместо квадратной блочности он даёт мягкое размытие, которое глаз воспринимает гораздо терпимее.
• Прозрачность и анимация. AVIF поддерживает альфа-канал (прозрачный фон) и анимацию, как и WebP, так что им можно заменить и PNG, и GIF.
• Широкий цвет и HDR. Это то, чего у WebP нет совсем. AVIF умеет 10- и 12-битную глубину цвета, расширенные цветовые пространства и HDR. Для каталога обуви это неважно, а вот для фотогалереи, портфолио фотографа или сайта про путешествия живые насыщенные снимки на современных экранах смотрятся заметно богаче.
• Хорошая работа на низких битрейтах. При очень сильном сжатии AVIF разваливается красивее всех: даже когда вес ужат до предела, картинка остаётся приемлемой, тогда как JPG в той же ситуации превращается в мозаику.

Подводные камни AVIF

• Медленное кодирование. Это главный минус. Перегнать картинку в AVIF в 5-10 раз медленнее, чем в WebP, а на максимальных настройках качества и того больше. Почему это важно именно для UGC (контента, который создают пользователи): когда человек прямо сейчас загружает фото отзыва или аватар и ждёт, лишние секунды на кодирование портят весь опыт. Для статичных картинок сайта это не проблема, вы один раз сконвертировали и забыли, а вот для обработки в реальном времени задержка ощутима.
• Поддержка чуть ниже, но уже отличная. К 2026 году AVIF понимают около 95 процентов с лишним браузеров. Chrome поддерживает с версии 85 (2020), Firefox с версии 93 (2021), Safari с версии 16 на iOS 16 и macOS Ventura (2022). Это очень хороший показатель, но всё же на пару процентов ниже, чем у WebP. Значит, нужен запасной вариант для тех, у кого формат не открывается.
• Старый софт не открывает. Многие десктопные программы, почтовые клиенты, мессенджеры и фоторедакторы до сих пор не умеют открывать AVIF. Если посетитель скачает такую картинку на компьютер, она может не открыться в его привычной смотрелке. Поэтому AVIF хорош для показа на сайте, но как файл для скачивания или пересылки он пока спорный.
• Чуть выше требования к ресурсам при просмотре. Распаковка AVIF немного нагружает процессор устройства сильнее, чем WebP. На современных телефонах и компьютерах это незаметно, но на совсем старых и слабых устройствах теоретически может чуть замедлить отрисовку. На фоне выигрыша в весе это мелочь, но честно упомянуть стоит.

Чтобы было нагляднее, представим типичную карточку товара с одной фотографией 1200 на 1200 пикселей. В формате JPG приличного качества она весит около 350 КБ. Тот же кадр в WebP, примерно 230 КБ. А в AVIF, около 140 КБ. То есть AVIF здесь легче JPG в два с половиной раза и легче WebP в полтора. Умножьте это на сотни товаров, и масштаб экономии становится очевиден.

Как сконвертировать картинки в AVIF и WebP

Способов несколько, и выбор зависит от того, сколько у вас картинок и насколько вы хотите автоматизировать процесс.

1. Онлайн-конвертер для разовых задач. Самый простой путь, когда нужно перегнать несколько изображений: загружаете картинку, получаете AVIF или WebP, скачиваете и кладёте на сайт. Идеально для картинки первого экрана, баннеров и десятка-другого ключевых фото. Наш инструмент конвертации делает это прямо в браузере, без установки чего-либо.
2. Пакетная обработка папки. Если картинок сотни, имеет смысл прогнать их пачкой. Многие конвертеры умеют принять целую папку и выдать готовый набор файлов в новом формате с теми же именами.
3. Автоматизация на стороне сайта. Для крупных каталогов разумно настроить, чтобы сайт сам создавал AVIF и WebP при загрузке каждой новой картинки и отдавал нужный вариант по типу браузера. Тогда о ручной конвертации можно забыть совсем.

На что обращать внимание при конвертации: задавайте качество в районе среднего-высокого, не выкручивайте сжатие на максимум ради лишних килобайтов (это даёт мыло), и обязательно сохраняйте оригинал в JPG или PNG как фолбэк. Размер картинки в пикселях тоже важен: нет смысла держать фото 4000 пикселей шириной, если на странице оно показывается в 800. Сначала уменьшите до нужного размера, потом конвертируйте, так выигрыш будет максимальным.

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

Чтобы не теряться в характеристиках, держите практическое правило. Оно покрывает почти все реальные ситуации.

Шпаргалка: формат под тип контента

Если нужно решить за пару секунд, ориентируйтесь по типу картинки.

• Фото товаров в каталоге: AVIF с фолбэком на WebP. Картинок много, грузятся часто, экономия максимальная.
• Большие баннеры и обложки: AVIF. Это самые тяжёлые элементы, и они сильнее всего выигрывают от агрессивного сжатия.
• Иконки, логотипы, простая графика: SVG, если возможно, иначе PNG или WebP без потерь.
• Иллюстрации в статьях: WebP, при больших объёмах AVIF. Совместимость тут ценнее экстремального сжатия.
• Фото, которые загружают пользователи (UGC): WebP, потому что важна мгновенная обработка.
• Картинки в письмах: только JPG или PNG, новые форматы почта не понимает.
• Превью для соцсетей (og:image): JPG или PNG, иначе превью может не построиться.
• Анимация: анимированный WebP или AVIF вместо GIF, экономия в разы.

Берите AVIF, когда

• Картинки статичные и редко меняются: фото товаров в каталоге, иллюстрации в статьях, баннеры, изображения в шапке и подвале.
• Изображений много, и каждый сэкономленный килобайт умножается на тысячи просмотров.
• Вы готовите картинки заранее (один раз сконвертировали при загрузке на сайт), а не на лету.
• Нужны живые насыщенные фото с широким цветом или HDR, например в портфолио или фотогалерее.
• Главная цель, выжать максимум скорости и минимум трафика.

Берите WebP, когда

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

Берите PNG, когда

• Это логотип, иконка, скриншот или графика с резкими линиями и плашками цвета.
• Нужна идеально чистая прозрачность без малейших артефактов по краям.
• Картинку потом будут редактировать, и важно сохранить пиксели точь-в-точь.

Когда оставить JPG

JPG по сжатию устарел, но он открывается абсолютно везде, даже в самых древних программах и устройствах. Имеет смысл держать JPG только как самый последний запасной вариант для исключительных случаев или когда картинку нужно отдать в систему, которая ничего нового не понимает (например, при выгрузке фото товаров на некоторые маркетплейсы, которые принимают только классические форматы). Для самого сайта JPG как основной формат в 2026 году уже не выбирают.

А что с JPEG XL?

JPEG XL (JXL), это новый формат, на который многие возлагают надежды, и не зря. Технически он впечатляет: сжимает примерно на уровне AVIF или чуть лучше на фотографиях, кодируется быстрее AVIF, умеет прозрачность, анимацию, широкий цвет и HDR, прогрессивную загрузку (картинка проявляется постепенно, а не сверху вниз) и, что особенно ценно, может без потерь пережать существующий JPG, ужав его примерно на 20 процентов и сохранив возможность вернуться к оригиналу. Звучит как идеальный формат.

Проблема одна, но решающая: поддержка браузеров. На 2026 год JPEG XL из коробки понимает Safari (с версии 17), а вот Chrome поддержку убрал, и Firefox включает её только за флагом. Это значит, что отдавать JXL основной массе посетителей пока нельзя без надёжного фолбэка, и на практике овчинка чаще не стоит выделки. Вывод: держите JPEG XL на радаре как очень перспективный формат, но для рабочего сайта в 2026 году ставка на AVIF плюс WebP надёжнее. Как только Chrome вернёт поддержку, картина может измениться, и тогда стоит пересмотреть стратегию.

Спорные ситуации

Иногда задача не укладывается в правило ровно. Вот частые развилки и как их разруливать.

• Каталог большой, но фото загружают продавцы сами. Тут разумен гибрид: при загрузке принимать любой формат, на лету делать быстрый WebP для немедленного показа, а ночью фоновым процессом перегонять накопленное в AVIF. Так пользователь не ждёт, а посетители в итоге получают самый лёгкий вариант.
• Логотипы, иконки, простая графика с резкими линиями. Для таких изображений с малым числом цветов часто всё ещё хорошо подходит формат векторной графики (SVG) или PNG, а из растровых, WebP в режиме без потерь. Выигрыш AVIF на простой графике меньше, чем на фотографиях.
• Картинки для email-рассылок. Почтовые программы новые форматы поддерживают плохо: ни AVIF, ни WebP в письмах рассчитывать нельзя. Оставляйте классический JPG или PNG. Это тот случай, где совместимость важнее веса.
• Картинки для социальных сетей и превью ссылок. Роботы соцсетей, которые строят превью при репосте, часто понимают только JPG и PNG. Картинку для og:image держите в классическом формате, иначе превью может не появиться.

Мифы, из-за которых тянут с переходом

Вокруг новых форматов накопилось несколько заблуждений, которые мешают людям сделать простой и выгодный шаг. Разберём самые частые.

• Миф: новые форматы хуже по качеству. Наоборот. При равном весе AVIF и WebP выглядят лучше JPG, а при равном качестве весят меньше. Картинка кажется хуже только если выкрутить сжатие до предела, но это проблема настроек, а не формата.
• Миф: это сложно внедрить. На минимальном уровне это один онлайн-конвертер и замена файла. Полная схема с picture чуть сложнее, но делается по шаблону, который мы привели выше, и потом просто копируется.
• Миф: половина посетителей не увидит картинки. Это верно только если отдавать новый формат без фолбэка. С цепочкой picture картинку гарантированно видят сто процентов посетителей, просто кто-то получает лёгкий AVIF, а кто-то запасной JPG.
• Миф: поисковики не любят новые форматы. Ровно наоборот, инструменты проверки скорости сами рекомендуют переходить на современные форматы, и быстрый сайт ранжируется лучше.
• Миф: раз есть AVIF, WebP больше не нужен. Нужен, и как раз как фолбэк к AVIF, и как быстрый формат для пользовательских загрузок. Они работают в паре.