Обзор формата изображений AVIF: преимущества, сравнение с JPG, польза для SEO

Сегодня я хочу познакомить вас с AVIF — современным суперсжатым форматом изображений, который считается одним из самых легких и наиболее оптимизированных. По соотношению качества изображения и размера сжатого файла компания Netflix считает его лучше JPEG, PNG и даже нового WebP. 

Что это такое — восходящая технология, которую стоить внедрять на свои сайты, или сиюминутный тренд? Давайте разбираться.

Что такое AVIF

AVIF (AV1 Still Image File Format) стал использоваться зимой 2019 года одновременно с открытым видеокодеком AOMedia Video 1 (AV1), предназначенным для потокового интернет-видео. Собственно, AVIF использует сжатие на основе библиотеки этого кодека. Он хранит данные файлов в формате HEIF и сжимает последовательности изображений с помощью AV1.

.AVIF поддерживает:

• HDR (высокий динамический диапазон);
• формат без потерь (но лучше работает сжатие с потерями);
• разные цветовые пространства;
• зернистость;
• цветовую субдискретизацию (технология кодирования изображения, при которой изменения оттенка цвета менее важны, чем изменения яркости).

Одной из первых компаний, использующих AVIF, стала Netflix. После нее этот формат стали поддерживать браузеры Chrome и Firefox, а также разработки таких компаний, как VLC и Microsoft. 

История появления AVIF

AV1 был разработан в 2015 году. Разработчиком считается компания Alliance for Open Media (в сотрудничестве с Google, Cisco и Xiph.org). Целью было создать формат изображений с открытым исходным кодом и отсутствием лицензионных отчислений. Например, есть такой формат, как JPEG XR — он очень слабо сжимается, зато требует дорогостоящего лицензирования. Разработчики объединили возможности собственных видеокодеков (VPX, Thor и Daala) и создали AV1 — открытый и бесплатный (да, за кодеки тоже надо платить) аналог всех коммерческих кодеков.

Технические характеристики AVIF

Преимущества AV1

AVIF предлагает значительное уменьшение размера изображения. Экономия достигает ~50% с JPEG и ~20% с WebP. 

В среднем AVIF сжимает бОльшую часть изображений лучше, но иногда может проиграть JPG. Более подробное сравнение можно посмотреть здесь. 

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

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

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

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

Внедрять AVIF на сервер желательно прогрессивным методом. Т.е. если браузер поддерживает AVIF, то будет показываться AVIF. Если этот формат не поддерживается, то подключается WebP. Если не поддерживается ни то, ни другое, выводится «стандартный» JPG. 

Это делается с помощью имплементации автоматической пакетной обработки на сервере. Как это можно сделать на веб-сервере Nginx, вы можете узнать в инструкции по данной ссылке. 

Пример внедрения в HTML с помощью тега picture:

<picture>

    <source srcset="img/photo.avif" type="image/avif">

    <source srcset="img/photo.webp" type="image/webp">

    <img src="img/photo.jpg" alt="Описание фотографии">

</picture>

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

Можно воспользоваться конвертером изображений

Есть нет возможности со стороны сервера имплементировать сборку, а на сайте еще мало контента, можно пользоваться конвертером. Например, Squoosh от Google.

Одной интересной особенностью сервиса (кроме того, что он бесплатный) является наблюдение за процессом изменения картинки. 

AV1 для SEO

Насколько использование Авиф помогает SEO? Что ж, если вы хоть немного разбираетесь в SEO-продвижении, то поймете, что на этот вопрос я уже ответила :)

Все дело в том, что AVIF уменьшает объем файла и ускоряет загрузку страницы, что само по себе влияет на показатели сайта в поиске. Кроме того, высокая скорость загрузки улучшает поведенческие факторы и повышает лояльность пользователей за счет экономии трафика и батареи.

Минусы Avif

Я говорила только положительные вещи об этом формате. Теперь давайте разберемся и с негативными моментами. К ним относятся:

• AVIF, как и WEBP, не является прогрессивным. Прогрессивное сжатие изображения отличается тем, что данные записываются в выходной поток как набор сканов. С каждым последующим сканом изображению прибавляется детализация.
• Файлы большого размера могут долго грузиться на мобильных устройствах.
• Плохо работает в режиме «Без потерь».
• Не подходит к анимационным изображениям.

AVIF против JPG

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

Из этого следует важное правило: для больших файлов используйте JPG, для маленьких — AVIF. 

Зато AVIF и видеокодек, на котором он основан, входят в список аппаратно ускоряемых форматов. Такие форматы использует Nvidia, так что в будущем ускорение появится и на мобильных устройствах.

Вывод

Итак, подведем итоги. Netflix действительно права, называя AVIF лучшим форматом сжатия среди WebP, JPG и PNG. Если использовать разрешение .avif, то файлы будут в два раза меньше JPG и на 30% меньше WebP. Тем не менее следует быть осторожными с большими файлами и с тем, что этот формат до сих пор поддерживается не всеми браузерами.