ПОЗВОНИТЬ
  • Новини
  • AVIF зображення. Формат, який підірвав інтернет.

AVIF зображення. Формат, який підірвав інтернет.

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.

 

 

 

МАЄТЕ ПИТАННЯ?