AVIF изображение. Формат, который взорвал интернет.

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? Цели:

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

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

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

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

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

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

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

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

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

Способ 2. Использовать тег "picture".

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

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

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

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

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

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