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

64
Огляд формату зображення 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.

Історія АВІФ

AV1 був розроблений в 2015 році. Розробником є Альянс відкритих медіа (у співпраці з Google, Cisco і Xiph.org). Мета полягала в тому, щоб створити формат зображення з відкритим вихідним кодом без роялті. Наприклад, є такий формат, як JPEG XR — він дуже слабо стислий, але вимагає дорогого ліцензування. Розробники об’єднали можливості власних відеокодеків (VPX, Thor і Daala) і створили AV1 — відкритий і безкоштовний (так, теж доведеться платити за кодеки) аналог всіх комерційних кодеків.

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

Збільшення.avif
КатегоріяРастрове зображення
Пов’язані програмиMicrosoft Paint

Paint.net

VLC

Файловий провідник Windows

Браузери, які підтримують форматGoogle Chrome, Mozilla Firefox
Офіційний сайтhttps://aomedia.org/av1-features/

Переваги AV1

AVIF пропонує значне зменшення розміру зображення. Економія досягає ~ 50% з JPEG і ~ 20% з WebP.

Огляд формату зображення AVIF: переваги, порівняно з JPG, переваги SEO - Украина, Польша, Германия.

В середньому AVIF краще стискає більшість зображень, але іноді може втратити JPG.

Chrome, який має найбільшу частку ринку, підтримує AVIF за замовчуванням.

Тепер давайте розповімо вам, чому AVIF повинен бути реалізований на вашому сайті:

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

В принципі, ключовими перевагами AVIF є швидке завантаження за рахунок зменшення розміру файлу і зменшення навантаження на сервер.

Як вставити AVIF на свій веб-сайт?

Бажано реалізувати AVIF на сервері прогресивним способом. Тобто, якщо браузер підтримує AVIF, буде відображатися AVIF. Якщо цей формат не підтримується, webp підключається. Якщо жоден з них не підтримується, відображається «стандартна» JPG.

Це робиться шляхом здійснення автоматичної пакетної обробки на сервері.

Для такого завдання знадобиться технічний фахівець.

Приклад вбудовування в HTML за допомогою тега зображення:

<picture>

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

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

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

</picture>

Такий код гарантує, що браузер завантажить перший формат, який він підтримує. Якщо тег зображення не підтримується, img визначається за замовчуванням.

Ви можете використовувати конвертер зображень

Якщо ви вже користувалися цією послугою раніше, але у вас немає вибору AVIF, вам потрібно використовувати ctrl + f5 для оновлення сторінки і скидання кеша.

Однією з цікавих особливостей сервісу (крім того, що він безкоштовний) є спостереження за процесом зміни картини.

AV1 для SEO

Наскільки використання Avif допомагає SEO? Ну а якщо ви хоч трохи розбираєтеся в SEO-просуванні, то зрозумієте, що я вже відповів на це питання 🙂

Вся справа в тому, що AVIF зменшує розмір файлу і прискорює завантаження сторінки, що саме по собі впливає на продуктивність сайту в пошуку. Крім того, висока швидкість завантаження покращує поведінкові фактори і підвищує лояльність користувачів, заощаджуючи трафік і акумулятор.

Мінуси Авіфа

Я говорив тільки позитивні речі про цей формат. Тепер давайте розберемося з негативними аспектами. До них відносяться:

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

AVIF проти JPG

Як ви вже зрозуміли зі статті, AVIF стискає зображення краще, ніж JPG. Але JPG є прогресивним.

Це слідує важливому правилу: для великих файлів використовуйте JPG, для маленьких — AVIF.

Але AVIF і відеокодек, на якому він заснований, входять в список апаратно-прискорених форматів. Такі формати використовує Nvidia, тому в майбутньому прискорення з’явиться на мобільних пристроях.

Висновок

Отже, підіб’ємо підсумки. Netflix дійсно має рацію, називаючи AVIF найкращим форматом стиснення серед WebP, JPG та PNG. Якщо використовується роздільна здатність .avif, файли будуть вдвічі меншими за JPG і на 30% меншими, ніж WebP. Однак слід бути обережними з великими файлами і з тим, що цей формат все одно підтримується не всіма браузерами.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *