Аудит изображений AVIF

JPEG в AVIF: только где страница быстрее

AVIF наиболее полезен, если рассматривать его как аудит изображений, а не универсальную настройку экспорта. Это руководство поможет найти JPEG-фото, заслуживающие AVIF, выбрать процесс проверки и избежать публикации файлов, которые меньше, но хуже визуально.

Быстрый вердикт

Конвертируйте исключения, а не всю папку с медиа

Лучшее решение по JPEG в AVIF начинается с влияния на страницу. Конвертируйте крупные фото, которые всё ещё замедляют страницу после изменения размера. Обычные миниатюры, скриншоты UI, диаграммы и маленькие файлы оставляйте на более простом пути.

Сильный кандидат Крупное фотографическое изображение LCP

Используйте AVIF, когда фото героя или лендинга всё ещё доминирует по весу после изменения размера и экспорта в WebP.

Возможно Важное, но не доминирующее

Тестируйте AVIF только если текущий файл всё ещё существенно тяжёлый или на странице есть явная проблема с загрузкой.

Избегайте Маленькие, графические или непроверенные ресурсы

Пропускайте AVIF, если изображение маленькое, в основном UI, с большим количеством текста или вы не можете проверить результат перед публикацией.

Сначала аудит изображений

Задайте эти вопросы перед выбором AVIF

AVIF может быть отличным, но это не волшебное средство исправления. Формат важен только после правильного размера изображения, назначения роли и проверки в макете, где его увидят посетители.

Вопрос Почему это важно Действие
Правильный ли уже размер изображения? AVIF не исправит изображение 4000px, отображаемое в 900px. Сначала измените размер, затем сравните форматы.
Влияет ли это изображение на LCP или первое впечатление? Крупные фото в верхней части страницы влияют сильнее, чем украшения внизу. Приоритизируйте изображения героя, лендинга и кампании.
Является ли контент фотографическим? AVIF обычно лучше подходит для фотографий, а не для плоской графики UI или логотипов. Используйте PNG, SVG или WebP, когда важна чёткость краёв.
Можете ли вы проверить результат в контексте? AVIF может скрывать артефакты до тех пор, пока изображение не будет размещено в реальном макете. Проверьте ширину для мобильных, градиенты, лица и обрезку.
Есть ли у вас запасной вариант? Не все среды одинаково поддерживают современные форматы. Публикуйте с разметкой picture или её аналогом в вашем фреймворке.

Выбор кандидатов

Какие JPEG-изображения подходят для конвертации в AVIF?

Ищите изображения, где меньший файл меняет страницу, а не только файловый менеджер. Лучшие кандидаты — обычно фотографии, визуально важные и достаточно крупные, чтобы влиять на восприятие скорости загрузки.

Лучший кандидат

Фото героя LCP

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

Хороший кандидат

Изображение кампании на лендинге

Фото кампании или продукта оправдывает дополнительную проверку, если оно расположено в верхней части страницы и должно оставаться визуально безупречным.

Избирательный кандидат

Редакционное изображение

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

Плохой кандидат

Скриншоты с большим количеством текста

Скриншоты, захваты UI, диаграммы и иконки часто теряют чёткость текста до того, как выигрывают от сжатия AVIF.

Проверка качества

Не копируйте значения качества между инструментами AVIF

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

Цель — не самый маленький файл AVIF, а минимальный файл, который поддерживает страницу: достаточно чистые детали, приемлемые градиенты, отсутствие отвлекающей потери текстуры и видимого сдвига цвета.

Порядок проверки
  1. Сравнивайте с изменённым по размеру JPEG или WebP, а не с оригиналом с камеры.
  2. Проверьте изображение в размере для десктопа и мобильного устройства.
  3. Проверьте лица, небо, градиенты, тени, мелкие текстуры и цвета бренда.
  4. Подтвердите, что файл действительно загружается на странице, которую планируете публиковать.

Визуальные ошибки

Артефакты AVIF, которые стоит проверить перед публикацией

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

Полосы на небе или градиентах Гладкие фоны могут показывать ступенчатость при чрезмерном сжатии.
Восковая кожа или текстура продукта Портреты и поверхности продуктов могут потерять естественные детали, даже если файл сначала кажется чётким.
Размытие мелких деталей Листья, ткань, волосы и мелкие повторяющиеся узоры могут размазываться, создавая ощущение худшего качества, чем экономия байтов оправдывает.
Сдвиг цвета или контраста Изображения кампаний и фотографии продуктов требуют проверки цвета на соответствие бренду после конвертации.
Ошибки обрезки и фокусной точки Меньший файл не выигрывает, если адаптивная обрезка скрывает важную часть изображения, которая продаёт страницу.

Доставка

Публикуйте AVIF с запасным вариантом, а не слепой заменой

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

Предзагружайте AVIF только если это действительно LCP-изображение. Предзагрузка всех конвертированных файлов может замедлить страницу.

HTMLРазметка picture с запасным AVIF
<picture>
  <source srcset="/images/landing/hero.avif" type="image/avif">
  <source srcset="/images/landing/hero.webp" type="image/webp">
  <img
    src="/images/landing/hero.jpg"
    width="1600"
    height="900"
    alt="Product photo in the landing page hero"
    loading="eager"
    fetchpriority="high">
</picture>

Конфиденциальность и контроль

Держите неопубликованные изображения кампаний вне случайных загрузок

Крупные JPEG-файлы часто не нейтральны. В них могут быть неопубликованные продукты, работы клиентов, подсказки о локации, материалы кампании или имена файлов с внутренним контекстом. Загрузка в конвертер должна быть осознанным решением, а не по умолчанию.

Локальный рабочий процесс сохраняет исходные файлы, имена и этапы проверки рядом с проектом. Это особенно полезно, когда одна и та же посадочная страница требует нескольких попыток экспорта для достижения правильного визуального баланса.

Практический рабочий процесс

Повторяемый процесс конвертации JPEG в AVIF без превращения каждого изображения в отдельный проект

  1. 01
    Собирайте только тяжёлые кандидаты

    Начинайте с короткого списка крупных JPEG-фото, которые важны после обычного изменения размера и экспорта в WebP.

  2. 02
    Экспортируйте варианты AVIF отдельно

    Храните AVIF в отдельной папке, чтобы исходные JPEG и обычные WebP было легко сравнивать.

  3. 03
    Проверка на реальной странице

    Разместите кандидат в реальном компоненте или шаблоне и проверьте видимый результат, а не только превью конвертера.

  4. 04
    Публикация с запасной разметкой

    Отдавайте AVIF там, где поддерживается, и сохраняйте запасной WebP или JPEG для предсказуемой работы.

  5. 05
    Задокументируйте правило

    Запишите, какие роли изображений получают AVIF, чтобы следующее обновление не превратилось в угадайку.

Граница формата

Используйте WebP как базовый формат и AVIF как расширение

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

Эта граница сохраняет быстрый рабочий процесс статьи и позволяет спасти изображения, доминирующие по весу или LCP.

Обычные изображения статей Используйте WebP, если конкретный файл не слишком тяжёлый.
Крупное фотографическое изображение Попробуйте AVIF после изменения размера и сравните визуальный результат.
Скриншоты и UI Предпочитайте PNG или WebP, когда важны текст и чёткие края.
Непроверенные пакетные экспорты Не публикуйте AVIF слепо только из-за меньшего размера папки.

Чеклист перед публикацией

Проверьте это перед заменой JPEG на AVIF

Исходное изображение было изменено по размеру Файл AVIF близок к максимальному отображаемому размеру, а не к оригиналу с камеры.
Страница использует AVIF Проверки сети или исходного кода страницы подтверждают, что новый файл действительно загружается.
Существует запасной вариант WebP или JPEG остаются доступными для используемого пути доставки.
Качество проверено Финальная страница проверена на артефакты на десктопе и мобильных устройствах.
Метаданные всё ещё актуальны Альтернативный текст, изображения Open Graph и ссылки на изображения в JSON-LD не были случайно нарушены.
Оригинал сохранён Исходные JPEG остаются доступными для будущей обрезки, изменения размеров и повторного экспорта.

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

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

Практические ответы для решений по публикации JPEG в AVIF