Зачем переходить с WebP на AVIF
Команды, которые уже раздают WebP, иногда добавляют AVIF как более плотный source. Выигрыш не гарантирован: на уже хорошо сжатом WebP новый encode может дать считанные проценты или даже проиграть при высоком качестве.
Как перекодировать
Загрузите WebP, выставьте качество AVIF, дождитесь результата. Для UI с прозрачностью проверьте края. Для фото сравните вес с исходным WebP в блоке результата — там ваш факт, а не чужой бенчмарк.
Сравнивайте визуально
Lossy → lossy. Смотрите градиенты, шум ISO, мелкий текст на фото. Если разницы нет, а AVIF тяжелее — оставьте WebP. Если AVIF легче при той же картинке — имеет смысл в picture.
Прозрачность
По возможности сохраняется. Сложные полутона теней проверяйте на двух фонах. При сомнении экспортируйте контрольный PNG через WebP → PNG и сравните.
Скорость и железо
Encode AVIF заметно медленнее WebP. Пакет из десятков 4K кадров лучше ресайзить заранее. Прогресс в кнопке показывает номер файла.
Пайплайн сайта
Не удаляйте WebP, пока не закроете fallback. Старые Safari и встроенные WebView могут предпочесть WebP. AVIF — дополнительный source, не единственный файл на все случаи.
Как решать, нужен ли переход
Возьмите 5 типичных кадров витрины, не один удачный. Если на трёх AVIF легче при той же картинке, а на двух нет — считайте медиану, не лучший кейс. Рекламные «−80% всегда» к вашей полке товаров не относятся.
UI-WebP lossless в AVIF lossy часто выглядит хуже. Графику с текстом либо оставьте WebP, либо проверяйте попиксельно.
CDN и кэш
Два файла на один слот (webp + avif) удваивают объекты в кэше. Это нормально, если экономия трафика больше стоимости хранения. Не плодите третий «ещё более новый» формат без замера.
Пользователь конвертирует локально; на CDN вы кладёте уже готовые байты. Имена лучше стабильные, чтобы не сбрасывать кэш всей витрины зря.
Практические прогоны WebP → AVIF
Соберите выборку: шумное фото, гладкое небо, карточка товара с текстом на кадре, UI-иконка. Иконку, скорее всего, оставите WebP. Небо может выиграть в AVIF. Текст на фото проверяйте особенно: оба кодека lossy, второй проход проявляет кашу раньше, чем хочется.
Не обещайте бизнесу фиксированный процент экономии. Покажите таблицу «файл / webp KB / avif KB / вердикт». Это честнее лендингов конкурентов. Если медиана не в пользу AVIF — не внедряйте формат ради моды.
На CDN держите оба объекта, пока не закроете аналитику по User-Agent. Удалять WebP в первый же день рискованно. Кэш прогревайте на hero, не на всей медиатеке сразу.
Кодирование AV1 на слабом ноутбуке лучше гонять пачками по 5–10 файлов, а не все 200 сразу. Ресайз до реальной ширины макета экономит и время, и нервы. Запишите quality, которым закрыли витрину, чтобы следующие сезоны не снимали профиль с нуля.
Пять кадров витрины важнее чужого «−80%»
Возьмите шум, небо, товар с ценником на фото, UI-иконку, коллаж. Если AVIF выигрывает на трёх и проигрывает на двух — смотрите медиану и тип контента, не один удачный закат. Иконку с текстом чаще оставьте WebP.
Второй проход проявляет кашу раньше
Исходный lossy WebP уже с потерями. AVIF не «восстанавливает», он кодирует текущий растр. Смотрите градиенты и мелкий текст. Если разницы нет, а AVIF тяжелее — не внедряйте.
Не удаляйте WebP в первый день
Старые Safari-контуры и WebView могут предпочесть WebP. Два объекта в кэше — нормальная цена picture. Прогревайте hero, не всю медиатеку сразу.
Запишите профиль
Таблица в тикете: файл, сторона, quality, вес WebP, вес AVIF, вердикт. Иначе следующий сезон начнёт с нуля. Кодируйте пачками по 5–10, не 200 сразу на слабом ноутбуке.
Стоп-кран
Нет выигрыша на медиане — оставьте WebP. Есть выигрыш на фото и проигрыш на UI — внедряйте AVIF только в фото-слоте. Хаб: конвертер WebP.
Короткий итог WebP → AVIF
Имеет смысл только после замера на вашей витрине. Lossy поверх lossy требует глаз, не чужих процентов. WebP оставьте fallback. Иконки с текстом часто лучше не трогать. Пачку кодируйте порциями и с ресайзом под макет. Если медиана не в пользу AVIF — не внедряйте формат ради моды и отчёта.
Частые вопросы
AVIF всегда легче WebP?
Нет. Смотрите ваш результат. На уже плотном WebP выигрыш может быть нулевым.
Это lossy поверх lossy?
Да, если исходный WebP lossy. Сравнивайте визуально, не только по килобайтам.
Прозрачность перейдёт?
По возможности да. Тени проверяйте на двух фонах.
Почему медленно?
Кодирование AV1. Ресайз до display size ускоряет пачку.
Удалять ли WebP после AVIF?
Не сразу: WebP часто остаётся fallback в picture.
Сервер видит файлы?
Нет.
Пакет?
Да.
Для кого страница?
Команды, которые уже на WebP и добавляют AVIF source.