Будущее изображений в интернете. AVIF в SEO — новый формат, который взорвал интернет
17 сентября 2020

Будущее изображений в интернете. AVIF в SEO — новый формат, который взорвал интернет

Появился новый формат для сжатия изображений AVIF, который взорвал интернет.

Chrome уже поддерживает.

Сжимает на 50% лучше, чем JPG. Что за формат? Какие плюсы и минусы? Как внедрить?

Разберемся с вопросом далее.

AVIF — формат для изображений в интернете


Что произошло? На различные видеокодеки есть авторские права. Такие права предусматривают использования кодеков на платной основе. К примеру, с 1 устройства — 1 доллар. Такой подход не устраивал крупные корпорации. Итого был создан альянс, в который вошли такие компании как Apple, Intel, Google, Microsoft, Arm, AMD, Nvidia, Amazon, Facebook, Cisco, Netflix, Mozilla.

В результате альянс Alliance for Open Media создал формат AOMedia Video 1, или кратко — AV1. Применяемые технологии решили использовать и для изображений. Так появился формат AV1 Still Image File, или коротко — AVIF. Данный формат изображений является свободным форматом сжатия изображений с потерями качества, основанный на библиотеке для сжатия кадров AV1.

Спецификация AVIF получила версию 1.0.

Чем AVIF лучше других форматов? Преимущества по сжатию такие:

  • На 20% лучше, чем WEBP;
  • На 50% лучше, чем JPG. Но иногда JPG сжимает лучше.

В среднем AVIF сжимает большую часть изображений значительно лучше.

Пример данных, полученных на основе тестирования — AVIF test.

В обновленном браузере Chrome формат AVIF уже по умолчанию поддерживается. Оптимизацию можно делать уже сейчас.

Какие браузеры поддерживают формат AVIF? Список браузеров, который поддерживают формат — AVIF. Пока только Chrome. Но доля на рынке у браузера самая большая, а также поддержка появится в Firefox.

Зачем внедрять AVIF? Цели:

  • Улучшение ранжирования за счет повышения скорости загрузки;
  • Улучшение показателя конверсии посредством повышения скорости;
  • Улучшение поведенческих факторов посредством повышения скорости;
  • Уменьшение расходов пользователя на трафик;
  • Уменьшение нагрузки на сервер сайта;
  • Уменьшение расхода батареи устройства;
  • Уменьшение расходов на исходящий трафик сервера.

Зачем внедрять формат AVIF на сайте

Как внедрить на сайте?


Вариантов по внедрению множество.

Способ 1. Наилучшее решение заключается в настройках веб-сервера. В таком варианте нет надобности даже менять верстку на страницах сайта. Разметка на сайте не изменяется.

Как вариант, пример встройки изображения:

<img src="/image.jpg">

При правильной конфигурации сервера данный участок на сайте изменять не надо.

Также внедрять следует используя прогрессивный метод. Что конкретно имеется ввиду? Принцип действия:

  • Если браузер поддерживает AVIF, то на странице выводить AVIF;
  • Если браузер не поддерживает AVIF, но поддерживает WEBP, то на странице выводить WEBP;
  • Если браузер не поддерживает ни AVIF, ни WEBP, то выводится JPG.

Как реализовать такое решение на сайте? Решение в виде автоматической пакетной обработки следует имплементировать на стороне сервера. Вариант с использованием NGINX в примере.

Внедрением подобных решений занимаются технические специалисты. Задача оптимизатора заключается в правильной постановке цели.

Способ 2. Использовать тег picture. Пример:

<picture>
	<source srcset="img/photo.avif" type="image/avif">
	<source srcset="img/photo.webp" type="image/webp">
	<img src="img/photo.jpg" alt="Description of Photo">
</picture>

При использовании такой разметки браузер загрузит первое изображение, которое поддерживает. Если браузер не поддерживает picture, то указан img по умолчанию.

Что делать, есть нет возможности для имплементации решения на стороне сервера?

Способ 3. Если контента на сайте мало, есть вариант использовать конвертер изображений.

Теперь Squoosh поддерживает и формат AVIF. Инструмент предоставляет возможность оптимизации изображений. Разработкой занимался Google.

Ссылка на сервис — Squoosh.

На сайте применяется сервис-воркер. Если раньше использовали сервис, и при выборе нет AVIF, то обновите через ctrl+f5 со сбросом кеша.

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

Кстати в MegaIndex есть бесплатный инструмент, применяя который можно провести аудит сайта по другим параметрам.

Ссылка на сервис — MegaIndex Аудит.

Пример отчета далее:

Аудит сайта на предмет тега title

Рекомендованный материал в блоге MegaIndex по ускорению загрузки изображений ссылке — Появился новый атрибут тега img, который позволяет ускорить загрузку сайта. Пример реализации.

Выводы


AVIF — замена WebP, JPG и PNG. Формат использует технология для сжатия нового кодека AV1 и контейнер HEIF с поддержкой анимации, live фото. Доступны анимация и прозрачность. Если использовать AV1 AVIF-файлы, то изображения будут меньше в 2 раза в сравнении с JPG, и на 30% в сравнении с WEBP.

Сравнение AVIF, JPG и WEBP

Преимущества с точки зрения экономики. Снижение экономических затрат за счет:

  • Уменьшение передаваемого объема трафика;
  • Уменьшение нагрузки на сервер;
  • Повышение лояльности со стороны пользователей сайта.

AVIF в SEO.. Преимущества от использования AVIF в плане поисковой оптимизации страниц сайта. Улучшение ранжирования за счет:

  • Повышение скорости загрузки страницы сайта за счет уменьшение объема файла;
  • Улучшение Page Experience;
  • Улучшение поведенческих факторов.

Рекомендованный материал в блоге MegaIndex на тему оптимизации изображений по ссылке далее — SEO оптимизация изображений — Как получать трафик за счет SEO оптимизации изображений.

AVIF и SEO — Оптимизация изображений в поисковой оптимизации сайтов

Какие минусы? Такие:

  • Ни WEBP, ни AVIF не является прогрессивными;
  • Потенциально большие файлы могут увеличить скорость рендеринга на мобильных устройствах, что приведет к ухудшению фактора Page Experience.

Еще AVIF и WEBP плохо работают в режиме без потерь и плохо подходит к анимационным изображениям.

AVIF или JPG? Лучше AVIF, но у формата JPG есть преимущество. Формат JPG является прогрессивным. Приходят данные — отрисовывает. Приходят новые — обновляет, улучшая картинку. Так данных больше, значит эффективность восприятия лучше. Иными словами говоря, JPG дублирует информацию, менее эффективно укладывает графику. Но дает более эффективное восприятие графики в результате.

Отсюда, важный нюанс в логике. Если изображение большое, то следует использовать формат JPG.

Предлагаю такой сценарий использования:

  • Если 0-50 килобайт, используем AVIF;
  • 50 килобайт и больше, используем JPG XL в силу свойства прогрессивности.

Но:

  • Пока данный фактор не используется;
  • AVIF и видеокодек AV1 будут входить в список аппаратно ускоряемых форматов. NVIDIA уже использует. В перспективе ускорение появится и на мобильных устройствах.

Внедряйте возможность оптимизации изображений в инфраструктуре проекта:

  • Добавьте конвертирование В процесс сборки проекта;
  • Настройте серверные заголовки.

За счет предсказательных алгоритмов AVIF работает лучше за WEBP. Еще идет работы над кодеком WEBP v2. Если интересно узнать какой будет результат, напишите в комментариях.

Если интересно углубиться в исследование формата, есть детальное техническое сравнение AVIF, JPG, PNG на примерах.

Остались ли у вас вопросы, замечания или комментарии по теме использования формата AVIF? Напишите в комментариях.

Обсуждение

headweb
10:51 18 сентября 2020
Копирайтинг конечно у вас хромает.
И как получать формат AVIF ?
Дмитрий Угниченко
16:27 18 сентября 2020
В данный момент тексты не проверяются. Спасибо за отклик! Улучшим :)
Как перевести? Если картинок мало, то через squoosh.
pogozhev777
17:35 19 сентября 2020
Это вроде не копирайтинг, а просто перевод с английского чужой статьи.
sibweb38
11:33 18 сентября 2020
Как настроить серверный заголовки?
radsad
12:25 18 сентября 2020
Есть ли плагин конвертации в AVIF для Вордпресса?
k.filippova
12:30 18 сентября 2020
Существует модуль конвертации для Битрикса?
Дмитрий Угниченко
16:26 18 сентября 2020
Пока нет
bolshakov
12:34 18 сентября 2020
Подтверждаю, хромает.
"Рекомендованный материал в блоге MegaIndex по ускорения загрузки изображений ссылке"
Дмитрий Угниченко
16:25 18 сентября 2020
Спасибо за отклик! Поправил
ctac22
12:35 18 сентября 2020
О AVIF на хабре писали еще в 2018, но до сих пор особо ничего не поменялось. Пока его начнут поддерживать хотя бы основные браузеры пройдет еще года 2.
Дмитрий Угниченко
16:27 18 сентября 2020
Уже стал поддерживать Chrome. Вскоре Firefox и Edge.
SEOmasterskaya
13:02 18 сентября 2020
Народ, а почему в файле теста, у формата AVIF (lib) все показатели красные, а у WebP всегда зеленые?
Значит AVIF (lib) вообще худший результат по сжатию и качеству показывает? Или я что-то нерпавильно понял?
l2toplist
22:27 18 сентября 2020
все это херь собачий, самый прогрессивный вариант, это создать некий фоновый конвертер, который будет преобразовывать эти изображения автоматом, под каждый браузер.
А грузить по 3 картинки на хостинге еще в разметку их пихать тупой напряг.
Альянс Безопасность
15:32 22 сентября 2020
Скорость интернета возрастает с каждым годом, какой тогда смысл в этой возне ради того, чтобы картинка весила на условные 35 КБ меньше?
Это как с 4К разрешением на ютубе. Смысл его, если большая часть юзеров использует мобильные девайсы?
Игорь
12:11 30 сентября 2020
Хорошая фишка. Приедет настройщик, попрошу разъяснить и внедрить. Спасибо.
Для добавления комментария, пожалуйста, авторизуйтесь