AVIF в SEO – новият формат, който взриви интернет

Появи се нов формат за компресиране на изображения – AVIF, който взриви интернет. Chrome вече го поддържа. Компресира 50% по-добре от JPEG.
Какъв е форматът? Какви са плюсовете и минусите? Как да се приложи?

AVIF – най-новият формат за изображения в Интернет

Алиансът за отворени медии създаде формата AOMedia Video 1 или накратко AV1. Решиха да използват приложните технологии и за изображения. Така се появи форматът AV1 на файл с изображения или накратко AVIF. Този формат на изображението е безплатен формат за компресиране на изображения със загуба, базиран на библиотеката за компресиране на рамки AV1.

Защо AVIF е по-добър от другите формати? Ползите от компресията са:

• 20% по-добре от WEBP
• 50% по-добре от JPEG (но понякога JPEG компресира по-добре)

Средно AVIF компресира повечето изображения много по-добре.

Пример за данни, получени от тестването може да видите в AVIF теста.

В актуализирания браузър Chrome форматът AVIF вече се поддържа по подразбиране. Оптимизацията може да направите още сега.

Кои браузъри поддържат AVIF формат?

Засега само Chrome. Но браузърът има най-голям пазарен дял и поддръжката ще се появи скоро и във Firefox.

Защо да внедрим AVIF?

• Подобрено класиране чрез увеличаване на скоростта на изтегляне
• Подобряване на конверсията чрез увеличаване на скоростта
• Подобряване на поведенческите фактори чрез повишена скорост
• Намаляване на разходите за потребителски трафик
• Намаляване на натоварването на сървъра на сайта
• Намаляване на консумацията на батерията на устройствата
• Намаляване на разходите за изходящ трафик на сървъра

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

Има много възможности за изпълнение.

Метод 1. Най-доброто решение е да конфигурирате уеб сървъра: <img src=”/image.jpg”>. Ако сървърът е конфигуриран правилно, този раздел на сайта не трябва да се променя. Трябва да се прилага с помощта на прогресивен метод:

* Ако браузърът поддържа AVIF, да зарежда AVIF на страницата
* Ако браузърът не поддържа AVIF, но поддържа WEBP, тогава да зарежда WEBP на страницата
* Ако браузърът не поддържа AVIF или WEBP, зарежда се JPEG

От страна на сървъра трябва да бъде внедрено решение за автоматична пакетна обработка. Внедряването на такива решения се извършва от технически специалисти, задачата на оптимизатора е да зададе правилната цел.

Метод 2. Използвайте етикета на картината. Пример:
<picture>
<source srcset=”img/photo.avif” type=”image/avif”>
<source srcset=”img/photo.webp” type=”image/webp”>
<img src=”img/photo.jpg” alt=”Description of Photo”>
</picture>

С тази маркировка браузърът ще зареди първото изображение, което поддържа.

Метод 3. Ако на сайта има малко съдържание, има опция да се използва конвертор на изображения.
Squoosh вече поддържа и AVIF. Инструментът предоставя възможност за оптимизиране на изображения. Разработен е от Google и е безплатен – линк към услугата Squoosh.  Вече има и българска разработка изцяло безплатна, която може да конвертира в avif, който, за разлика от Squoosh, поддържа конвертиране на няколко изображения едновременно – mconverter.eu

Заключение

AVIF е заместител на WebP, JPEG и PNG. Форматът използва технологията за компресиране на новия кодек AV1 и контейнер HEIF с поддръжка на анимация, и live фото. Налични са анимация и прозрачност. Ако използвате AV1 AVIF файлове, изображенията ще бъдат 2 пъти по-малки от JPEG и 30% по-малки от WEBP.

Ползи от икономическа гледна точка – намаляване на икономическите разходи поради:

* Намаляване на обема на предавания трафик
* Намаляване на натоварването на сървъра
* Повишена лоялност от потребителите на сайта

AVIF в SEO – ползи от използването на AVIF от гледна точка на оптимизация на уеб страниците на търсачката. Подобрено класиране от:
* Увеличаване на скоростта на зареждане на страницата на уебсайта, чрез намаляване размера на файла
* Подобряване на преживяването на страниците
* Подобряване на поведенческите фактори

Какви са минусите?
* Нито WEBP, нито AVIF са прогресивни
* Потенциално големите файлове могат да увеличат скоростта на рендиране на изображенията на мобилни устройства, което води до влошено на фактора Page Experience. Ако изображението е голямо, тогава трябва да се използва JPG формат
* AVIF и WEBP не работят добре в режим без загуби и не се вписват добре с анимираните изображения

Предлагаме да го ползвате така:
* Ако 0-50 килобайта, използвайте AVIF;
* 50 килобайта и повече, ние използвайте JPEG XL поради прогресивните свойства

Но:
* Този фактор все още не се използва;
* Видео кодеците AVIF и AV1 ще бъдат включени в списъка с хардуерно ускорени формати. NVIDIA вече го използва. В бъдеще ускорението ще се появи на мобилни устройства.

Споделяме линк, където може да се задълбочите в изучаването на формата, има и подробно техническо сравнение на AVIF, JPG, PNG с примери тук.

Ако е било полезно за вас, може да споделите статията с приятели 🙂