Курс: Продающий лендинг для вашего бизнеса Бесплатно
Создайте сайт с нуля за 40 минут и запустите продажи

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

4 комментария
AV1 AVIF

Сегодня я хочу познакомить вас с 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

Расширение

.avif

Категория

Растровые изображения (raster image)

Связанные программы

Microsoft Paint

Paint.net

VLC

Windows File Explorer

Браузеры, которые поддерживают формат

Google Chrome, Mozilla Firefox

Официальный сайт

https://aomedia.org/av1-features/

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

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

avif vs webp vs jpg

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

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

Теперь давайте расскажу вам, зачем 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.

Если вы уже использовали этот сервис ранее, но у вас не появился выбор AVIF, нужно с помощью ctrl+f5 обновить страницу и сбросить кэш. 

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

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. Тем не менее следует быть осторожными с большими файлами и с тем, что этот формат до сих пор поддерживается не всеми браузерами.

Комментарии

Kolia 0
27 фев в 15:26
"В среднем AVIF сжимает бОльшую часть изображений лучше, но иногда может проиграть JPG. Более подробное сравнение можно посмотреть здесь. "

Я прочитал статью, на которую вы прикрепили ссылку. Дело в том, что AVIF не может проиграть при конвертации, но это может сделать WebP в 2.7% случаев. Об этом говорится в разделе "The results" в оригинальной статье.
Андрей Жинжер 0
05 марта в 10:29
Не стОит выдавать желаемое за действительное. Основной проблемой WebP является саботаж Apple со своим Safari. Пока не ясно почему AVIF ждёт другая судьба. Никому никакого дела нет до качества формата и до сих под все используют JPG которому наверно уже лет 20.
Андрей Жинжер 0
05 марта в 10:31
Ну а ваш код для 3-х форматов для одной картинки осталось только дополнить подгрузкой адаптивных версий и будет реальная борода с медиазапросами, которую нужно использовать в реально работе.
А если в интернет магазине тысячи товаров, и у каждого товара по несколько фотографий, в сумме получается очень прилично, десятки гигов точно. Получается дополнительно нужно держать несколько форматов AVIF, WebP, JPG и PNG... вывод получается какой то не кошерный :)
С помощью соцсетей
У меня нет аккаунта Зарегистрироваться
Нажимая кнопку «Зарегистрироваться», я даю согласие на обработку своих персональных данных, указанных в форме регистрации.
С помощью соцсетей
У меня уже есть аккаунт Войти
Нажимая кнопку «Зарегистрироваться», я даю согласие на обработку своих персональных данных, указанных в форме регистрации.
Инструкции по восстановлению пароля высланы на Ваш адрес электронной почты.
Пожалуйста, укажите email вашего аккаунта
Ваш баланс 10 ТК
1 ТК = 1 ₽
О том, как заработать и потратить Таймкарму, читайте в этой статье
Чтобы потратить Таймкарму, зарегистрируйтесь на нашем сайте