AVIF - сучасний формат зображення для веб-сайтів.

Формат зображення AVIF для веб-сайтів підвищує SEO, PageSpeed та користувацький досвід.

Matthias Petri
опубліковано:

Менше 0,1 відсотка всіх веб-сайтів використовує формат AVIF і використовує найкращий можливий варіант для форматів малюнків для вимірюваної покращення швидкості роботи веб-сайту, користувацького досвіду та онлайн-видимості в Google. Всі інші веб-оператори ще не використовують потенціал, який надає формат AVIF для зображень. Ця стаття призначена виправити це і заохотити вас серйозно ознайомитися з форматом AVIF і, найкраще, використовувати його для зображень на своєму веб-сайті.

Чи тестували коли-небудь URL вашого веб-сайту у Google PageSpeed Insights, щоб перевірити свою продуктивність? Якщо ні, спробуйте це прямо зараз зі своїм власним веб-сайтом.

Давайте згадаємо, ви ж ше не бачите цього значення для вашого веб-сайту, чи не так?

Результат PageSpeed Insights для TutKit - настільний комп'ютер

Чим менше ваше значення, тим більше потребує ваш веб-сайт для оптимізації для покращення вашої швидкості роботи, щоб підвищити PageSpeed. Якщо ви посунетесь вниз на сторінці інструменту тесту, ви, можливо, знайдете рекомендації щодо покращення швидкості роботи вашого сайту від Google, включаючи сучасні формати для зображень - особливо у випадку, якщо ви все ще використовуєте формати файлів JPG або PNG для зображень на вашому сайті.

PageSpeed-Insights рекомендує використання AVIF.

Це одна з численних причин, чому ви ще не досягли максимальних результатів з PageSpeed Insights для вашого веб-сайту і, ймовірно, не виходить із Core Web Vitals.

Як на нашому веб-сайті агентства 4eck-media.de, так і на TutKit.com завантажуються зображення у форматі AVIF - швидко, ультрамало і з якістю, яка виправдовує очікування. І AVIF допомагає нам досягнути найвищої швидкості роботи.

Цей відносно новий формат для зображення у мережі важко знати, через що час розкрити сучасний формат зображення AVIF для веб-сайтів з усіма його перевагами для SEO, PageSpeed і користувацького досвіду.

Зміст статті про AVIF:

    Що таке формат зображень AVIF?

    AVIF - це новий формат зображень, який був випущений у 2020 році Альянсом відкритих медіа (AOMedia). Формат базується на безвтратному алгоритмі стиснення AV1 і має ряд переваг над іншими поширеними форматами зображень, такими як JPEG і PNG, а також форматом WebP.

    Зображення AVIF значно менше, ніж зображення у форматі JPEG з тією ж якістю зображення. Це через те, що AV1 пропонує набагато ефективніше стиснення. Таким чином, зображення у форматі AVIF можуть бути на 50% меншого розміру, ніж зображення у форматі JPEG при тій же якості.

    Зображення AVIF також мають більш глибшу гаму кольорів, ніж зображення у форматі JPEG. Таким чином, зображення AVIF можуть зберігати глибину кольору до 12 біт, тоді як зображення у форматі JPEG підтримують лише 8 біт глибини кольору. Це призводить до більш широкої гами кольорів і реалістичніших кольорів у зображеннях AVIF.

    Крім того, зображення AVIF здатні зберігати альфа-канали. Альфа-канали використовуються для визначення прозорості зображень. Це робить зображення AVIF ідеальними для використання в графічних додатках, де потрібна прозорість.

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

    Ось деякі з переваг формату AVIF порівняно з іншими поширеними форматами зображень:

    • Кращі ставлення стискання: Зображення у форматі AVIF значно менші за зображення у формataх JPEG і PNG при тій самій якості зображення.
    • Вища глибина кольору: Зображення у форматі AVIF підтримують до 12 біт глибини кольору, водночас як зображення у форматах JPEG і PNG підтримують лише 8 біт глибини кольору.
    • Підтримка альфа-каналів: Зображення у форматі AVIF можуть зберігати прозорість, замінюючи цим основу, з якої сьогодні все ще використовуються зображення у форматах PNG або WebP на веб-сайтах.
    • Формат із відкритим кодом: AVIF - це формат із відкритим кодом, який підтримується широким колом виробників програмного забезпечення та обладнання.
    • AVIF - переконливий формат для веб-сайтів, який має багато переваг порівняно з іншими поширеними форматами (включаючи WEBP).

    Можна передбачити, що в майбутньому формат AVIF буде відігравати все більшу роль у зберіганні та відображенні зображень на веб-сайтах - особливо тому, що Google розмістив його в рекомендаціях у результатaх PageSpeed Insights та наразі всі популярні браузери у поновлених версіях підтримують AVIF.

    Тому варто бути підготовленими заздалегідь до вбудування на свій веб-сайт, щоб вже зараз використовувати переваги для SEO, PageSpeed та користувацького досвіду.

    Чому формат AVIF приносить користь для SEO, PageSpeed та користувацького досвіду?

    Найбільшою перевагою стане відмінність між зображеннями у перегляді. Наприклад, я згенерував зображення через Midjourney про стайку Клоунаємочок у роздільній здатності 1024x1024 у форматі PNG.

    • Оригінальний PNG: 1,43 МБ
    • Оптимізовано за допомогою TinyPNG: 393 КБ - заощаджено 73 %
    Покращення PNG-зображення за допомогою TinyJPG.

    Оригінальний файл PNG я конвертував за допомогою squoosh.app з результатом:

    • Оптимізовано за допомогою Squoosh як WebP: 84 кб - заощаджено 94 %
    • Оптимізовано за допомогою Squoosh як AVIF: 42 кб - заощаджено 97 %
    Порівняння стиснення WebP та AVIF через Squoosh.

    В результаті AVIF-зображення з однаковою оптичною якістю лише вдвічі менше, ніж WebP-зображення. У багатьох інших тестах виявлено, що артефакти стиснення, які з'являються при занадто високому стисненні у файлах JPG, починають проявлятися лише тоді, коли якість опускається нижче 30 в напрямку 20 або нижче. На якості 30 навіть тексти в піксельних графіках залишаються чіткими без артефактів стиснення.

    Такі заощадження на веб-сайтах, де багато зображень, не можуть бути недооцінені.

    AVIF для поліпшення показників SEO, PageSpeed і користувацького досвіду

    Google вже у 2021 році підвищив важливі основні показники (Core Web Vitals) сайту до фактора ранжування. До них відносяться, наприклад, швидкість завантаження, тобто значення, наскільки швидко головний вміст будується для вашого користувача. Google називає часи до 2,5 секунд як хороше значення, яким мають прагнути оператори веб-сайтів для своїх користувачів.

    Більші обсяги даних зображень призводять до більш довгих часів завантаження. Ці Core Web Vitals вважаються невдалими.

    Крім того, є ще другий проблемний випадок. Якщо більші обсяги даних зображень, які, наприклад, базуються на PNG або JPEG, розміщені на веб-сайті, може статися так, що текстовий вміст вже завантажений, поки зображення будується повільніше. Це може призвести до так званих кумулятивних змін макету, коли невеликі зсуви, пов'язані з відображенням зображення, змушують нижні області веб-сайту вниз, де вони знаходяться. Такі кумулятивні зміни макету не подобаються Google та вони позначають їх як помилки CLS, які призводять до того, що Core Web Vitals також не пройдено.

    Крім того, кожному відвідувачеві веб-сайту приємно, коли сторінки швидкі та вміст миттєво доступний за кілька кліків. Крім того, ви можете розміщувати зображення в кращій якості на веб-сайті без такого глибокого стиснення, щоб вже були помітні артефакти стиснення. Розмір файлу залишається маленьким порівняно з PNG або JPEG навіть при втратній конвертації або звичайному стисненні. Ізображення у форматі AVIF тому підвищує користувацький досвід з різних аспектів для кожного користувача. Так Google змушує нас пройти Core Web Vitals, щоб зробити щось для наших відвідувачів, щоб вони не були роздратовані відвідуванням нашого веб-сайту.

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

    Підтримка браузерами зображень у форматі AVIF

    Особливо якщо мова йде про передові технології, кожний оператор веб-сайту дещо вагається і радше зачекає ще кілька місяців. З одного боку, він не хоче ставати бета-тестером якихось серйозних випусків, наприклад, систем управління магазинами або CMS, з іншого боку, ніколи не гарантовано, що не виникне проблем з певними браузерами або пристроями.

    У випадку з форматом AVIF-зображень дійсно важливо, чи підтримують цей формат уже популярні браузери. Веб-сайт caniuse.com надасть вам про це інформацію: https://caniuse.com/avif

    Підтримка AVIF в браузерах
    Знімок екрану: https://caniuse.com/avif

    Приблизно 85 відсотків у глобальному використанні браузера вже підтримують AVIF. У Німеччині на 2 вересня цей показник склав 80,33 % ... ну, це ж Німеччина, де все ще є проблеми з мобільною мережею в повсякденному житті, і де багато регіонів все ще страждають від повільного інтернету (включаючи мій регіон: поки я працюю в офісі з гігабітом, вдома приходить лише 9 Мбіт/с).

    Таким чином, ви бачите, що AVIF вже підтримується в основних браузерах протягом деякого часу.

    Скільки веб-сайтів вже використовують формат AVIF?

    Подібно до caniuse.com, w3tech.com надає статистичну інформацію про використання певних технологій. Як і для форматів зображень, що використовуються на веб-сайтах.

    Використання AVIF на веб-сайтах
    Знімки екрану з https://w3techs.com/

    Отже, відсоток усіх веб-сайтів, що використовують (на вересень 2023 року): 

    • PNG: 82,1%
    • JPEG: 78 %
    • SVG: 55,2 %
    • GIF: 21,7 %
    • WebP: 9,2 %
    • ICO та BMP: по 0,2 %
    • AVIF: 0,1 % (округлено)

    На сьогодні менше, ніж 0,07 відсотка усіх веб-сайтів використовують формат AVIF. Чооо? Це справді дуже мало. Але, друзі, це надає вам можливість стати на технологічний передовик у використанні сучасних форматів зображень. Як вже видно на графіку праворуч, використання щомісяця зростає ... але все ще в проміле. Це обов'язково прискориться незабаром.

    Цікаво, що навіть не до 10 відсотків усіх веб-сайтів слідують рекомендаціям Google щодо сучасних веб-форматів. Усі інші позбавляються від швидкості завантаження і користувацького досвіду та, ймовірно, не пройшли тестування Core Web Vitals, що негативно впливає на онлайн-видимість.

    AVIF проти WebP - що краще для вашого веб-сайту?

    Давайте зробимо ще один прямий тест для наочності. Зображення праворуч у верхній частині TutKit.com до конвертації у формат AVIF як PNG-файл важило понад 600 КБ через прозорість.

    TutKit в області голови

    Тепер воно виводиться як файл WebP об'ємом 159 КБ (наш запасний варіант!). Навіть якщо краще оптимізувати його використовуючи інструмент, такий як TINYPNG, який так само може зменшити розмір файлів WebP, ми залишимося на 128 КБ. Щонайменше, зменшення на 20 відсотків.

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

    Чому варто обирати AVIF замість WebP?

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

    Також варто звернути увагу на те, що caniuse.com написав безпосередньо на сторінці WebP: „AVIF and JPEG XL are designed to supersede WebP.“ AVIF та JPEG XL повинні замінити WebP. 

    Підтримка браузера для WebP
    Знімок екрану: https://caniuse.com/webp

    Перш ніж поставите питання собі, чи не помиляєтеся, обираючи AVIF через участь JPEG XL у змаганні, можу вас одразу заспокоїти. Браузерна сумісність з JPEG XL практично не існує з 0,08 відсотка.

    Підтримка браузера JPEG-XL
    Знімок екрану: https://caniuse.com/jpegxl

    У Squoosh ви вже можете конвертувати зображення у формат JPEG XL, і воно має приблизно такі ж значення, як у форматі WebP (див. зображення нижче). 

    AVIF залишається переможцем форматів. Скористайтеся ним найближчим часом і використовуйте всі переваги для своїх веб-сайтів!

    Squoosh.app - найкращий інструмент для конвертації JPG, PNG, WebP у AVIF

    Коли ми раніше в команді використовували онлайн-інструмент TinyJPG або TinyPNG для оптимізації зображень у форматах JPG, PNG або навіть WebP для використання на веб-сайтах, тепер я великий поціновувач Squoosh від Google. 

    Squoosh - це безкоштовний конвертер зображень, розроблений Google. Цей інструмент працює як онлайн-сервіс, але також може бути запущений локально на вашому комп'ютері або сервері (node.js!). Він може конвертувати зображення в різні формати, включаючи JPEG, PNG, GIF та WebP. І найкраще - він конвертує ваші зображення також в формат AVIF.

    Squoosh.app - конвертер зображень від Google для AVIF

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

    Просто перетягніть зображення і виберіть необхідний формат. Кілька клацань - і ваше зображення готове, конвертоване та оптимізоване.

    Ось як виглядає ситуація, коли ви додаєте зображення у форматі WebP і конвертуєте та стискаєте його у формати AVIF (ліворуч) та JPEG XL (праворуч). З допомогою ползунка ви можете порівняти, який рівень якості є належним, щоб зберегти видиму якість. За замовчуванням одним боком є початковий файл для порівняння. Отже, ви маєте повний контроль над результатом.

    Порівняння стиснення Squoosh
    Під час прямого порівняння AVIF та JPEG XL знову є чіткий переможець: AVIF

    Використовуйте також Squoosh для догляду за вмістом та веб-розробки, щоб зменшити розмір зображень завдяки сучасним веб-форматам, таким як WebP або AVIF, та покращити час завантаження веб-сайтів. Ви також можете зменшити розмір ваших JPG-файлів, подібно до TinyJPG, якщо, наприклад, ви хочете завантажити їх на соціальні мережі. Перевага перед TinyJPG полягає в тому, що у вас є повний контроль над стисканням та ви можете експериментувати з різними параметрами оптимізації, щоб досягти найкращої якості при мінімальному розмірі.

    Ось деякі переваги Squoosh:

    • Підтримує різноманітні формати зображень, у які можна конвертувати 
    • Використовує різні техніки для зменшення розміру зображення.
    • Дозволяє попередній перегляд стиснутих зображень
    • Надає набір параметрів оптимізації
    • Інструмент є безкоштовним та простим у використанні.

    Є ще один недолік серед усіх позитивних рис: наразі Squoosh завжди може обробляти лише одне зображення і не підтримує пакетну обробку. Я сподіваюся, що ця функція все-таки з'явиться.

    Пакетне конвертування на сервері у PHP-фреймворках з JPG і PNG в AVIF та WebP

    Ми власноруч конвертували на нашому сайті TutKit.com зображення, які були вбудовані у портал у форматах JPG та PNG - всього більше 14 000 окремих файлів - в AVIF-формат на серверному рівні, а також як резерв для старих браузерів у формат WebP. Також ми вирішили технічно, що наші редактори можуть продовжувати завантажувати зображення у форматі JPG або PNG, як це звичайно робили наші дизайнери, та маркувати їх метаданими у порталі. Під час виведення система автоматично вставляє зображення у форматі AVIF і для всіх старих (або непідтримуваних) браузерів надає вигляд у форматі WebP.

    Щоб це працювало на серверному рівні, використовуйте найновіші версії програмного забезпечення. Нові функції imagecreatefromavif та imageavif для формату AVIF доступні лише у PHP 8.1+ і у випадку, якщо розширення GD з підтримкою AVIF було скомпільовано. Вони потребують версії libavif 0.8.2 або вище.

    Також враховуйте сумісність з операційними системами. Підтримка AVIF надається у пакунках libavif-dev/libavif-devel:

    • з Ubuntu 21.04  
    • з Debian 11 
    • з Alpine 3.13 
    • з Fedora 34

    Ось оцінка PageSpeed для мобільної версії TutKit.com. Потрібно підкреслити, що якщо на екрані комп'ютера все ще можна досить легко досягти значення понад 90, то для мобільних пристроїв це дійсно виклик. Ми продовжуємо працювати над тим, щоб покращити це значення ближче до 100, оскільки ми розуміємо: швидкість загрузки сторінки важлива для користувацького досвіду і таким чином сприяє нашим успіхам у SEO.

    PageSpeed-інформація для TutKit - мобільна версія

    Те, що звучить відверто з впровадженням AVIF тут у нашому PHP-фреймворку Laravel, відзначилося за кількістю білетів - понад 60 штук - у нашому інструменті JIRA, які стосувалися конвертації та впровадження (включаючи дослідження, розробку, усунення помилок, тестування). Таким чином, якщо плагіни в значній мірі спрощують роботу в класичній CMS, такій як WordPress, то в разі розгортування розширеної індивідуальної розробки, можливо, як у нас, знадобиться до три тижнів часу. Переваги використання AVIF варто слідувати!

    До речі: Можливо, я скоро таки напишу статтю, чому ми в порталах, таких як TutKit.com, віддаємо перевагу PHP-фреймворку натомість WordPress або інших CMS.

    Плагіни для використання AVIF у WordPress

    Система управління контентом WordPress з версією на вересень 2023 року не підтримує завантаження AVIF-зображень з природи - на відміну від, наприклад, CMS Contao, яке підтримує AVIF з версії 5.0.0. Тому наразі вам потрібно виконати два кроки при ро

    Тут ви можете знайти плагін підтримки AVIF - наразі у нього є лише 1 956 завантажень і менше ніж 800 встановлень - можна бачити, що AVIF є абсолютно новим для користувачів WordPress.

    Наразі 43,1% всіх веб-сайтів працюють на CMS WordPress. Як тільки WordPress на рівні системи підтримуватиме AVIF, AVIF розпочне свій торжественний шлях і витісне JPG, PNG та WebP. - Маттіас Петрі


    ОНОВЛЕННЯ 05.04.2024: З WordPress 6.5 WordPress нарешті підтримує також AVIF! Таким чином, плагіни підтримки будуть потрібні лише для старих версій WordPress. Тому оновлення до WordPress 6.5 та вище відтепер буде ще більш вигідним.

    Плагін Local Image Sharp для веб-сайтів на Strapi

    Ми також використовуємо AVIF на нашому веб-сайті агентства 4eck-media.de, який використовує CMS Strapi на базі node.js. Плагін Local Image Sharp для Strapi дозволяє використовувати зображення AVIF на веб-сайтах Strapi. Плагін використовує sharp-Image-Processing-Toolkit для конвертації зображень в зображення AVIF.

    Плагін Local Image Sharp має низку функцій, включаючи:

    • Автоматична конвертація зображень в зображення AVIF
    • Налаштування якості та стиснення зображення
    • Підтримка різних форматів зображень

    Для встановлення плагіну завантажте його з магазину плагінів Strapi та встановіть, як будь-який інший плагін Strapi.

    Локальне зображення "Sharp" на ринку Strapi

    Ми налаштували це так, що продовжуємо завантажувати зображення в систему Strapi як JPG або PNG. Система конвертує зображення в AVIF та WEBP у шість різних роздільностей для відображення в браузері як AVIF відповідно до пристрою (комп'ютер, планшет, мобільний). Для старих браузерів ми також маємо запасні WebP-зображення, які відображаються.

    Краще використовуйте <picture>-тег, що містить <source>- та <img>-тег, для відображення зображень у відповідних розмірах та двох форматах AVIF та WebP з посиланням на JPEG або PNG.

    Зображення у сучасному веб-форматі, разом із кешуванням, стали одними з найважливіших прискорювачів для відмінної продуктивності нашого веб-сайту агентства:

    PageSpeed-інструменти для 4eck-media - робочий стіл

    Примітка щодо мета-тумбочок та структурованих даних

    Так як до сьогодні Google Блоки не підтримує формат AVIF для зображень, ми продовжуємо вказувати "image" як схемний маркер завжди з обов'язковим JPG-файлом. Так само мета-тумбочка, яку ми вказуємо для кожної сторінки товару для запропонування Google попереднього перегляду, все ще містить формат JPG.

    Безпека важлива. Вже було повідомлено у форумах, що після переходу на AVIF повна видимість онлайн-зображень зникла. Ми не можемо підтвердити цей досвід. Онлайн-видимість залишилась постійною, але запити краулінгу Googlebot для зображень зросли. Цікаво, що ми бачимо, як Googlebot кралиться через WebP-зображення, які є в контексті як запасні для старих браузерів. Здається, Google наразі кралить вебп-зображення для індексу.

    Тому моя рекомендація полягає у тому, щоб також додати JPG-джерело в мета-дані для тумбочок та структурованих даних.

    Інструменти та програмне забезпечення для редагування AVIF-зображень

    Зображення часто редагуються, тож сумісність з форматом AVIF, очевидно, бажана в різних програмах для редагування зображень. Іноді ви завантажуєте існуюче зображення з веб-сайту, щоб внести зміни. Тому важливо, щоб ваше улюблене програмне забезпечення для зображень також могло відкривати його, що є ключовою функцією сумісності з AVIF. І якщо потім воно зберігається в іншому форматі, його можна конвертувати назад у формат AVIF за допомогою Squoosh або інших інструментів.

    Ось список програмного забезпечення для редагування зображень на сумісність з AVIF (на вересень 2023 року):

    • Gimp: Може імпортувати, редагувати та експортувати AVIF з версії 2.10.22.
    • Photopea: може імпортувати та редагувати AVIF, але не експортує. Тоді збереження можливе в іншому форматі файлу.
    • Affinity Photo: немає підтримки для AVIF
    • Photoshop: відсутність підтримки, але допомагає плагін, який тоді забезпечує сумісність.

    Плагін AVIF для Photoshop

    Тут ви знайдете плагін, завдяки якому ваш Photoshop матиме можливість відкривати також файли AVIF.
    https://github.com/0xC0000054/avif-format

    Завантаження можливе на вкладці Releases сторінки.

    Після завантаження ZIP, додайте Av1Image.8bi в папку, в якій Photoshop шукає плагіни. Це стандартна папка для установки:
    C:\Program Files\Common Files\Adobe\Plug-ins\CC

    Або ця папка: C:\Program Files\Adobe\Photoshop [версія]\Plug-ins

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

    АВІФ в Photoshop

    Перегляд AVIF-зображень у Windows

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

    Це можливо з Windows 10, але для цього потрібно розширення. Натискаючи на AVIF-файл, ви спочатку отримаєте повідомлення про помилку. 

    Помилка відображення AVIF у Windows

    У повідомленні про помилку є посилання. Якщо ви його клікнете, вас перенаправить в Microsoft Store до розширення AVIF. Завантажте його. Розмір всього 1,61 МБ.

    Розширення AVIF для Microsoft

    Після цього ви зможете відкривати та переглядати зображення у форматі AVIF на Windows у вашому файловому менеджері.

    Показ AVIF у Microsoft

    Замість GIF-анимацій краще вбудовувати AVIF-анимації на веб-сайти

    Тут є онлайн-конвертер, щоб перетворити GIF-анимації на AVIF-анимації. https://mconverter.eu/convert/gif/avif/

    Тоді як моя тестова GIF важить 787 КБ, анімація в форматі AVIF зменшилася до 411 КБ.

    Мій персональний висновок

    На мій погляд, AVIF - це найкращий вибір, щоб наразі інтегрувати сучасні формати зображень на веб-сайти. Переваги у стисненні та якості зображення вражають. Жоден інший формат зображень не поєднує ці якості й не сприяє зниженню часу завантаження так сильно. Наразі дуже немає власників веб-сайтів, які використовують формат AVIF, хоча підтримка браузера становить понад 85% і технічно немає перешкод використовувати WebP як резервний варіант. SEO перебуває у розвитку. AVIF сам по собі, звісно, не вистачить, щоб досягнути чудових значень в PageSpeed Insights; для цього потрібно ще багато інших технічних факторів. Якщо йдеться про впровадження сучасних форматів зображень, з AVIF в порівнянні з WebP ви зможете досягти кращих результатів.

    Лише оптимізований за ключовими словами контент вже не буде досить, оскільки завдяки штучному інтелекту Інтернет переповнений контентом, через що багато веб-сайтів з високим рівнем наповнення боряться за онлайн-видимість зі своїми конкурентами. Технічний SEO та особливо дотримання технічних показників якості веб-сторінок (Core Web Vitals) стають все більш важливими критеріями для ранжування, оскільки Google бажає надати користувачам максимально можливий рівень користувацьких вражень. AVIF - разом з іншими чинниками - є частиною рішення для прискорення завантаження сторінок, підвищення користувацького досвіду та, перспективно, покращення онлайн-видимості.

    Дізнайтеся більше про SEO, користувацький досвід, дизайн та технічні тенденції

    Якщо вам цікаві загалом ці теми про SEO, користувацький досвід, Інструменти ШІ та нові веб-технології, ви можете отримати більше інформації у наших тренуваннях та інших статтях тут на блозі.

    1101,908,1094,1055,1096

    Тепер ваша черга

    Якщо ця стаття була корисною для вас, будемо раді, якщо ви залишите відгук на Google. Кожен відгук підтримує нас. Якщо вам потрібна допомога з використанням AVIF у вашому веб-проекті, ви можете звернутися до нас на нашому сайті агентства.

    Опубліковано на від Matthias Petri
    Опубліковано на:
    Від Matthias Petri
    Матіас Петрі заснував разом зі своїм братом Стефаном Петрі агенцію 4eck Media GmbH & Co. KG у 2010 році. Разом зі своєю командою він керує популярним спеціалізованим форумом PSD-Tutorials.de та платформою електронного навчання TutKit.com. Він опублікував численні тренування з редакції зображень, маркетингу та дизайну, працює викладачем в ФХМ Росток на займальній посаді „Цифровий маркетинг та комунікації“. За свою діяльність він отримав кілька нагород, включаючи Спеціальну премію Мережі сайтів Мекленбург-Передньої Померанії 2011 року та „Креативника Мекленбург-Передньої Померанії 2015 року“. У 2016 році його названо Фелоу Компетенццентром культури та креативних галузей федерального уровню та він активно діє в рамках ініціативи „Ми - схід“ як підприємець та виконавчий директор, представляючи багатьох інших представників східних німців.
    Повернутися до перегляду