Formát obrazu AVIF pre webové stránky zvyšuje SEO, PageSpeed a užívateľskú skúsenosť.

Menej ako 0,1 percenta všetkých webových stránok používajú formát AVIF a využívajú tak najlepší spôsob pre zlepšenie rýchlosti webstránky, používateľského zážitku a online viditeľnosti v Google. Všetci ostatní prevádzkovatelia webových stránok zatiaľ nevyužívajú potenciál, ktorý formát AVIF ako obrazový formát ponúka. Tento článok má za cieľ tento problém vyriešiť a povzbudiť vás, aby ste sa seriózne zaoberali formátom AVIF a ideálne ho používali aj pre vaše obrázky na webovej stránke.

Skúšali ste už niekedy overiť URL adresu vášho webového sídla na Google PageSpeed Insights, aby ste sa pozreli, ako na tom je vaša výkonnosť? Ak nie, skúste to teraz priamo so svojou vlastnou webovou stránkou.

Tipnem, že vám zatiaľ na vašej webovej stránke neukazuje tento údaj, však?

Čím je váš výsledok nižší, tým viac potrebujete optimalizovať vašu webovú stránku, aby ste zlepšili rýchlosť načítavania. Ak sa na testovacej stránke pozriete nižšie, zistíte odporúčania od Googlu na zlepšenie vašej rýchlosti stránky a môže sa stať, že jeden zo zoznamu bude obsahovať moderné obrazové formáty - najmä v prípade, ak stále používate formáty JPG alebo PNG pre vaše obrázky.

To je jeden z mnohých dôvodov, prečo zatiaľ nedosahujete na vašej webovej stránke vysoké hodnoty v PageSpeed Insights a pravdepodobne aj neuspokojujete Core Web Vitals.

Obrázky na našej agentúrnej webovej stránke 4eck-media.de aj tu na stránke TutKit.com sa načítavajú vo formáte AVIF - ultrarýchlo, ultramalé s presvedčivou kvalitou. A AVIF nám pomáha dosiahnuť čo najvyšší PageSpeed.

Relatívne nový formát na webové obrázky pozná iba málokto, preto je načase predstaviť tento moderný obrazový formát AVIF pre weby s všetkými jeho výhodami pre SEO, PageSpeed a používateľský zážitok.

Obsah článku o AVIF:

Čo je formát AVIF pre obrázky?

AVIF je nový formát pre obrázky, ktorý bol v roku 2020 vydaný združením Alliance for Open Media (AOMedia). Formát je založený na kompresnom algoritme AV1 a ponúka rad výhod oproti iným bežným obrazovým formátom ako JPEG a PNG, rovnako aj voči webformátu WebP.

AVIF obrázky sú podstatne menšie ako obrázky vo formáte JPEG pri rovnakej kvalite obrazu. Toto je spôsobené tým, že AV1 ponúka podstatne efektívnejšiu kompresiu. AVIF obrázok tak môže byť až o 50 % menší než obrázok vo formáte JPEG s rovnakou kvalitou.

AVIF obrázky ponúkajú aj vyššiu hĺbku farieb oproti obrázkom vo formáte JPEG. Tak AVIF obrázky môžu podporovať až 12-bitovú hĺbku farieb, zatiaľ čo obrázky vo formáte JPEG podporujú len 8-bitovú hĺbku farieb. To vedie k širšiemu rozsahu farieb a realistickým farbám v AVIF obrázkoch.

Okrem toho sú AVIF obrázky schopné ukladať alfa kanály. Alfa kanály sa používajú na definovanie priehľadnosti obrázkov. To robí AVIF obrázky ideálnymi pre použitie v grafických aplikáciách, kde je priehľadnosť potrebná.

AVIF je open-source formát a podporovaný je množstvom softvérových a hardvérových poskytovateľov. Väčšina bežných programov na úpravu obrázkov a prehliadačov už podporuje AVIF obrázky. Preto je najvyšší čas, aby sa tento moderný formát obrázkov presadil!

Nasledujú niektoré z výhod AVIF voči iným bežným formátom obrázkov:

• Lepšie kompresné pomer: AVIF obrázky sú podstatne menšie než obrázky vo formátoch JPEG a PNG pri rovnakej kvalite obrazu.
• Vyššia hĺbka farieb: AVIF obrázky podporujú až 12-bitovú hĺbku farieb, zatiaľ čo obrázky vo formátoch JPEG a PNG podporujú len 8-bitovú hĺbku farieb.
• Podpora alfa kanálov: AVIF obrázky môžu ukladať priehľadnosť, čím nahradzujú dôvod, prečo sa dnes stále používajú PNG alebo aj WebP obrázky na webových stránkach.
• Open-source formát: AVIF je open-source formát a je podporovaný množstvom softvérových a hardvérových poskytovateľov.
• AVIF je presvedčivý formát obrázkov pre webové stránky, ktorý ponúka množstvo výhod voči iným bežne používaným formátom (vrátane WEBP).

Je predvídateľné, že v budúcnosti bude AVIF zohrávať stále väčšiu úlohu pri ukladaní a zobrazovaní obrázkov na webových stránkach - najmä aj preto, že Google priamo odporúča jeho použitie v odporúčaniach výsledkov PageSpeed Insights a v súčasnosti ho podporujú všetky bežné prehliadače vo ich nových verziách.

Preto sa oplatí začať s jeho implementáciou na svojej webovej stránke už teraz, aby ste už teraz mohli využívať výhody pre SEO, PageSpeed a používateľský zážitok.

Prečo prináša AVIF výhody pre SEO, PageSpeed a používateľský zážitok?

Ten najväčší výhoda je najzreteľnejšia v porovnaní obrázkov pri pohľade. Ako príklad som vygeneroval obrázok od Midjourney z kukučky korytnačky v rozlíšení 1024x1024 vo formáte PNG.

• Pôvodné PNG: 1,43 MB
• Optimalizované cez TinyPNG: 393 KB - 73 % ušetrilo

Pôvodný PNG súbor som nechal konvertovať cez squoosh.app s výsledkom:

• Optimalizovaný cez Squoosh ako WebP: 84 kb - 94 percent ušetrilo
• Optimalizovaný cez Squoosh ako AVIF: 42 kb - 97 percent ušetrilo

Výsledkom je, že AVIF obrázok pri rovnakej vizuálnej kvalite je len necelú polovicu veľkosti oproti WebP obrázku. V mnohých ďalších testoch sa ukázalo, že kompresné artefakty, aké sa objavujú pri príliš vysokom komprimovaní JPG súborov, sa stanú jasne viditeľné až keď kvalitu stlačenia nastavíme pod 30 smerom k 20 alebo nižšie. Pri kvalite 30 zostávajú dokonca aj textové prvky v pixelových obrázkoch pekne ostré bez kompresných artefaktov.

Takéto úspory pri stránkach s množstvom obrázkov nemožno dosť oceniť.

AVIF pre lepšie SEO hodnoty, PageSpeed a User Experience

Google už v roku 2021 zaviedol životne dôležité jadrové hodnoty (Core Web Vitals) webu ako faktor hodnotenia. Patrí sem napríklad rýchlosť načítania, teda hodnota, akým tempom sa pre tvojho používateľa načíta hlavný obsah. Google považuje dobu do 2,5 sekundy za dobrú hodnotu, ktorú by mali prevádzkovatelia webov napĺňať pre svojich používateľov.

Veľké obrázkové dáta spôsobujú dlhšie načítania. Core Web Vitals potom nie sú splnené.

Okrem toho existuje aj druhý problém. Ak sú na webovej stránke umiestnené väčšie obrazové dáta, ktoré napríklad sú založené na formátoch PNG alebo JPEG, môže sa stať, že textový obsah je už načítaný, zatiaľ čo obrázok sa načíta pomalšie. Tým sa môžu vyskytnúť tzv. kumulatívne zmeny rozloženia, teda malé posunutia, ktoré spôsobujú, že s obrázkom sa dolné časti stránky posúvajú nadol, kde aj patria. Google nerád vidí takéto kumulatívne zmeny rozloženia a označuje ich ako chyby CLS, ktoré spôsobujú, že Core Web Vitals neprejdú.

Okrem toho je pre každého návštevníka webovej stránky skvelý pocit, keď sa stránky načítajú rýchlo a obsah je okamžite k dispozícii kliknutím. Okrem toho môžeš umiestniť obrázky na webovú stránku vo vyššej kvalite bez toho, aby si komprimoval do takej miery, že sa začnú prejavovať kompresné artefakty. Veľkosť súboru zostáva aj pri strate kvality alebo bežnej kompresii pekne malá v porovnaní s PNG alebo JPEG súbormi. Formát AVIF teda zvyšuje skúsenosti pri využivateľskom rozhraní z viacerých hľadísk pre každého používateľa. Google nás teda núti absolvovaním Core Web Vitals, konať pre našich návštevníkov, aby sa pri návšteve našej webovej stránky necítili frustrovaní.

Tak môžeš urobiť niečo pre zlepšenie používateľskej skúsenosti, PageSpeed a technickej kvality svojej webovej stránky, čo sa všetko pozitívne prejaví na tvojej online viditeľnosti.

Podpora pre AVIF obrázky v prehliadačoch

Práve v prípade nových techník sa každý prevádzkovateľ webovej stránky trochu váha a rád počká pár mesiacov. Na jednej strane nechce byť beta-testerom pre väčšie verzie výrobcov obchodných systémov alebo CMS, na strane druhej nikdy nie je úplne isté, že nebudú problémy s určitými prehliadačmi alebo zariadeniami.

Pri formáte obrázkov AVIF je skutočne podstatné, či ho bežné prehliadače už podporujú. Webová stránka caniuse.com ti poskytne informácie: https://caniuse.com/avif

Takmer 85 percent globálnej prehliadania už AVIF podporuje. V Nemecku je to k 2. septembru stále 80,33 % … no, Nemecko, kde stále existujú medzery v mobilnom sieti a takmer neustále, kde trpia niektoré oblasti pomalým internetom (vrátane mojej oblasti: zatiaľ čo som v práci s gigabitovým pripojením, doma prichádzajú len 9 Mbit/s).

Čiže vidíš, že AVIF je vo významných prehliadačoch podporovaný už pomerne dlhú dobu.

Koľko webových stránok už používa AVIF formát?

Rovnako ako caniuse.com ti w3tech.com poskytuje štatistické informácie o používaní určitých technológií. A to aj pre používané formáty obrázkov na webových stránkach.

Takže percentuálne podiel všetkých webových stránok (k septembru 2023): 

• PNG: 82,1%
• JPEG: 78 %
• SVG: 55,2 %
• GIF: 21,7 %
• WebP: 9,2 %
• ICO a BMP: 0,2 % každý
• AVIF: 0,1 % (zaokrúhľované)
  

Aktuálne teda menej než 0,07 percenta všetkých webových stránok používa formát AVIF. Whaaat? To je však ešte smiešne málo. Ale hej, je to pre teba šanca stať sa technologickou špičkou pri používaní moderných obrazových formátov. Na krivke v pravom obrázku je vidieť, že použitie sa zvyšuje mesiac čo mesiac… stále ešte v promilách. To sa istotne čoskoro zrýchli.

Zaujímavé je, že nie ani 10 percent všetkých webových stránok nevyhovuje odporúčaniu Googlu pre moderné webové formáty. Všetci ostatní ustupujú v rýchlosti načítania a zážitku používateľa a pravdepodobne neprejdú ani jadrom webových kritérií, čo sa prejaví negatívne na online viditeľnosti.

AVIF vs. WebP - čo je lepšie pre tvoju webovú stránku?

Urobme ešte raz priamy test na ilustráciu. Obrázok vpravo z hlavičky TutKit.com mal pred konverziou na AVIF ako PNG súbory kvôli priehľadným častiam cez 600 KB.

Teraz sa zobrazuje systémovo ako súbor WebP s 159 KB (naša rezervná možnosť!). Dokonca aj keď je tento obrázok optimalizovaný cez nástroj ako TINYPNG, ktorý môže redukovať aj súbory WebP, zostáva na 128 KB. Stále ide o 20 percent redukciu.

Ako súbor AVIF, ktorý sa zobrazuje u nás štandardne, má obrázok len 94 KB, teda len 59 percent veľkosti rezervného súboru WebP. Vo všetkých testoch AVIF dokázal poraziť formát WebP v objemovej veľkosti pri rovnakej vizuálnej kvalite.

Prečo používať AVIF namiesto WebP?

• AVIF dokáže zachovať pri vyššej kompresii a nižšej veľkosti súboru lepšiu obrazovú kvalitu aj s priehľadnosťami.
• Podpora AVIF u väčšiny bežných prehliadačov už dosahuje takmer 85 % a táto tendencia stále stúpa.
• Tvoja webová stránka sa bude načítavať ešte rýchlejšie vďaka AVIF oproti WebP. Predovšetkým u stránok s veľkým množstvom obrázkov, ako sú online obchody s kategóriami, kde je umiestnených veľa produktových obrázkov, je to výhoda. Rovnako aj u webových stránok, kde musia byť obrázky zobrazované vo vysokom rozlíšení (portfólio, referencie atď.), zabezpečuješ vysokú vizuálnu kvalitu pri nízkej veľkosti súboru.

Je tiež znamením to, čo caniuse.com priamo píše na stránke WebP: „AVIF a JPEG XL sú navrhnuté tak, aby nahradili WebP.“ AVIF a JPEG XL by mali nahradiť WebP. 

Pokým sa pýtaš, či by si mal vsadiť na AVIF, pretože sa pravdepodobne zúčastní aj JPEG XL, môžem ťa okamžite uistiť. Kompatibilita prehliadačov s formátom JPEG XL je prakticky neexistujúca s 0,08 percentami.

V programe Squoosh už môžeš konvertovať obrázky do formátu JPEG XL a má „len“ podobné hodnoty ako WebP (pozri ďalší obrázok nižšie). 

AVIF zostáva víťazným formátom. Daj naň čoskoro a využiť všetky výhody aj pre svoju webovú stránku!

Squoosh.app - najlepší nástroj na konverziu JPG, PNG, WebP na AVIF

Zatiaľ čo sme v tíme predtým používali online nástroj TinyJPG alebo TinyPNG na optimalizáciu obrázkov vo formátoch JPG, PNG alebo aj WebP pre použitie na webových stránkach, teraz som veľkým fanúšikom Squoosh zo stajne Google. 

Squoosh je bezplatný konvertor obrázkov vyvinutý spoločnosťou Google. Tento nástroj funguje ako online služba, ale aj lokálne na tvojom počítači alebo serveri (node.js!). Dokáže konvertovať obrázky do rôznych formátov vrátane JPEG, PNG, GIF a WebP. A to najlepšie: Konvertuje tvoje obrázky aj do formátu AVIF.

Konvertor obrázkov Squoosh využíva rôzne techniky na zmenšenie veľkosti obrázka bez toho, aby sa ovplyvnila kvalita. Do toho patrí komprimovanie farieb, znižovanie rozlíšenia a odstraňovanie zbytočných dát.

Jednoducho vlôž obrázok a nastav požadovaný formát. Pár kliknutí a tvoj obrázok je hotový, konvertovaný a optimalizovaný.

Takto to vyzerá, keď vložíš obrázok vo formáte WebP a následne ho konvertuješ a komprimuješ na AVIF (vľavo) alebo na JPEG XL (vpravo). S posuvníkom môžeš porovnávať, aká úroveň kvality je správna, aby sa zachovala viditeľná kvalita. V predvolenom nastavení je jedna strana vždy pôvodný súbor na porovnanie. Takže máš plnú kontrolu nad výsledkom.

Využi aj ty Squoosh pre správu obsahu a webový vývoj, aby si zmenšil veľkosť obrázkov pomocou moderných webformátov ako WebP alebo AVIF a zlepšil tak načítavanie svojich webových stránok. Môžeš taktiež zmenšiť veľkosť svojich JPG obrázkov - podobne ako pri TinyJPG - ak ich napríklad chceš nahrať na sociálne siete. Výhodou oproti TinyJPG je, že máš úplnú kontrolu nad kompresiou a môžeš experimentovať s rôznymi nastaveniami optimalizácie, aby si dosiahol najlepšiu kvalitu pri čo najmenšej veľkosti.

Tu sú niektoré výhody Squoosh:

• Podporuje množstvo obrázkových formátov, na ktoré možno konvertovať 
• Užíva rôzne techniky na zmenšenie veľkosti obrazu.
• Umožňuje náhľad komprimovaných obrázkov
• Ponúka radu nastavení optimalizácie
• Tento nástroj je bezplatný a jednoducho ovládateľný.

Všetky pozitívne vlastnosti však majú jednu nevýhodu: V súčasnosti sa Squoosh môže vždy len spracovať jeden obrázok a nie hromadné spracovanie. Dúfam, že táto funkcia ešte príde.

Serverová hromadná konverzia v PHP frameworkoch obrázkov z JPG a PNG na AVIF a WebP

Na stránke TutKit.com sme na serverovej úrovni prevádzkovali naše obrázky, ktoré boli vložené ako súbory JPG a PNG do portálu - dokonca viac ako 14 000 jednotlivých súborov - konvertovali do formátu AVIF a tiež ako rezervu pre staršie prehliadače aj do formátu WebP. Rovnako sme technicky zabezpečili, že naši editátori môžu ďalej nahrávať obrázky v JPG alebo PNG, ako sú zvyknutí naši dizajnéri, do portálu a tagovať ich s metaúdajmi. Systém potom automaticky pri výstupe vloží obrázok vo formáte AVIF a ako rezervu pre všetky staršie (alebo nepodporované) prehliadače zobrazí obrázok vo formáte WebP.

Aby to fungovalo serverovo, využi najnovšie verzie softvéru. Nové funkcie imagecreatefromavif a imageavif pre formát AVIF sú k dispozícii len pod PHP 8.1+, ak bol rozšírený s podporou AVIF postavený s GD-rozšírením. Vyžaduje libavif verziu 0.8.2 alebo vyššiu.

Rovnako dávaj pozor na kompatibilitu operačných systémov. AVIF je k dispozícii v balíkoch libavif-dev/libavif-devel v repozitároch:

• od Ubuntu 21.04  
• od Debianu 11 
• od Alpine 3.13 
• od Fedory 34

Tu je PageSpeed analýza pre mobilnú verziu TutKit.com. Zatiaľ čo pri desktopových zobrazovaniach je stále dosť jednoduché dosiahnuť hodnotu cez 90, pri mobilných zobrazeniach je to naozaj náročné. Stále na tom pracujeme a snažíme sa hodnotu priblížiť k 100, pretože vieme: PageSpeed je dobrý pre používateľskú skúsenosť a tým prispieva aj k našim SEO úspechom.

To, čo znie tak jednoducho s integráciou AVIF do nášho PHP frameworku Laravel, sa nakoniec súčetlo na viac ako 60 úloh v našom nástroji JIRA, ktoré sa týkali konverzie a integrácie (vrátane prieskumu, vývoja, opravy chýb, testovania). Zatiaľ čo pluginy urýchľujú prácu v klasickom CMS ako WordPress, v prípade rozsiahleho vývoja individuálneho riešenia môže byť, ako u nás, potrebné aj tri týždne. Výhody využívania AVIF určite stoja za to!

By the way: Možno budem čoskoro písať článok o tom, prečo preferujeme PHP framework pred WordPress alebo inými CMS na portáloch ako je TutKit.com.

Pluginy na používanie AVIF v WordPress

Redakčný systém WordPress priamo v septembri 2023 nepodporuje nahrávanie AVIF obrázkov, na rozdiel napríklad od CMS Contao, ktorý podporuje AVIF od verzie 5.0.0. Preto je aktuálne ešte potrebné pri používaní WordPressu absolvovať dva kroky, aby ste mohli na svojich obrázkoch používať formát AVIF.

1. Umožní AVIF podporu pre WordPress
2. Konverzia obrázkov z JPG/PNG/WEBP do AVIF

Existuje niekoľko pluginov pre WordPress, ktoré umožňujú použitie AVIF obrázkov na webových stránkach postavených na WordPress. Tu sú tri pluginy, ktoré by ste si mali pozrieť: 

• AVIF Support: Tento plugin umožňuje nahrávanie a zobrazovanie AVIF obrázkov na webových stránkach postavených na WordPress. Podporuje aj automatickú konverziu z JPEG a PNG obrázkov do formátu AVIF.
• Converter for Media: Tento plugin konvertuje všetky obrázky vo vašej knižnici médií WordPress do formátu AVIF. Poskytuje tiež rôzne možnosti na úpravu kvality obrázka a úroveň kompresie.
• ShortPixel Image Optimizer: Tento plugin optimalizuje obrázky vo vašej knižnici médií WordPress, vrátane konverzie do formátu AVIF. Ponúka aj rôzne ďalšie funkcie na zlepšenie kvality obrázkov a výkonu.

Tieto pluginy sú skvelým spôsobom, ako využiť výhody AVIF obrázkov na webových stránkach postavených na WordPress.

Tu sa nachádza plugin podpory AVIF – aktuálne má len 1 956 sťahovaní a menej než 800 inštalácií – zjavne je AVIF ešte úplne neznámy pre používateľov WordPress.

UPDATE 05.04.2024: S WordPress 6.5 konečne podporuje aj AVIF! Preto pluginy podpory budú potrebné len pre staršie verzie WordPressu. Aktualizácia na WordPress 6.5 a vyššiu je teda ešte hodnotnejšia.

Plugin Local Image Sharp pre stránky postavené na Strapi

Samotná naša agentúrna webová stránka 4eck-media.de používa AVIF rovnako, ako CMS Strapi postavený na node.js. Plugin Local Image Sharp pre Strapi umožňuje používanie AVIF obrázkov na stránkach postavených na Strapi. Plugin využíva sharp-Image-Processing-Toolkit na konverziu obrázkov do formátu AVIF.

Plugin Local Image Sharp ti ponúka množstvo funkcií vrátane:

• Automatická konverzia obrázkov do formátu AVIF
• Úprava kvality a kompresného pomeru obrázkov
• Podpora rôznych formátov obrázkov

Pre nainštalovanie pluginu si ho stiahni zo služby Strapi Plugin Store a nainštaluj ho podobne ako akýkoľvek iný plugin pre Strapi.

U nás sme nastavili, že obrázky stále nahrávame do systému Strapi ako JPG alebo PNG. Systém potom konvertuje obrázky do formátov AVIF a WEBP v šiestich rôznych rozlíšeniach, aby sa na základe zariadenia (počítač, tablet, mobil) zobrazili správne rozmerované obrázky ako AVIF v prehliadači. Pre staršie prehliadače máme aj tu náhradné riešenie s obrázkami WebP, ktoré sa potom zobrazujú. 

Najlepšie je používať <picture>-Tag, ktorý obsahuje <source>- a <img>-Tag, aby sa obrázky zobrazili v správnom rozmere a vo formátoch AVIF a WebP s JPEG alebo PNG zdrojmi.

Obrázky vo formáte pre moderný web boli okrem ukladania do vyrovnávacej pamäte jedným z najdôležitejších posilňovačov pre výkon našej agentúrnej webovej stránky:

Poznámka k meta-náhľadom a štrukturovaným údajom

Google Bilder zatiaľ nepodporuje formát AVIF, a preto ako Schema-Markup stále udávame "image": príslušný JPG súbor. Rovnakým spôsobom pri meta-náhľade, ktorý udávame na každej stránke produktu, aby sme mohli Google ponúknuť náhľadový obrázok pre úryvok vyhľadávania, stále obsahuje formát JPG.

Radšej sa isto držať. Už bolo správ oznamujúcich, že po prechode na AVIF úplne zmizla online viditeľnosť obrázkov. Naša skúsenosť však toto potvrdiť nemôže. Online viditeľnosť u nás zostala konštantná, no požiadavky na prehliadanie googlebotom obrázkov stúpli. Zaujímavosťou je, že googlebot sa prehrádza WebP obrázkami, ktoré sú v kóde pripravené ako záložné pre staršie prehliadače. Google momentálne pravdepodobne prehľadáva tieto WebP obrázky pre index.

Nástroje a softvér na úpravu obrázkov vo formáte AVIF

Obrázky sú často a radi upravované, a preto je dôležité, aby boli kompatibilné s formátom AVIF v bežných programoch na úpravu obrázkov. Niekedy si stiahneme existujúci obrázok zo stránky na úpravu. Je dobré, ak tvoj obľúbený program na úpravu obrázkov dokáže obrázok otvoriť, čo je základná funkcia kompatibility so štandardom AVIF. Aj keď neskôr bude uložený v inom formáte, pomocou Squoosh alebo iných nástrojov sa dá znova konvertovať do formátu AVIF.

Tu je zoznam softvéru na úpravu obrázkov kompatibilný s AVIF (k stanu septembra 2023):

• Gimp: Od verzie 2.10.22 vie importovať, upravovať a exportovať AVIF.
• Photopea: vie importovať a upravovať AVIF, ale nie vyexportovať. Po úprave je možné uložiť do iného formátu.
• Affinity Photo: nepodporuje AVIF
• Photoshop: nepodporuje, ale s pluginom je kompatibilný.

AVIF-Plugin pre Photoshop

Tu nájdeš plugin, ktorý umožňuje Photoshopu otváranie súborov vo formáte AVIF.
https://github.com/0xC0000054/avif-format

Stiahnuť si ho môžeš z karty Releases na tejto stránke.

Keď máš ZIP súbor stiahnutý, pridaj Av1Image.8bi do zložky, v ktorej Photoshop hľadá pluginy. Pri štandardnej inštalácii je to zvyčajne táto zložka:
C:\Program Files\Common Files\Adobe\Plug-ins\CC

Alebo táto zložka: C:\Program Files\Adobe\Photoshop [verzia]\Plug-ins

Photoshop musí byť zatvorený. Potom spustite Photoshop, aby sa mohol načítať plugin. Potom môžete otvárať súbory AVIF priamo v Photoshope buď ťahaním a pustením alebo pomocou dialógového okna Otvoriť.

Zobraziť AVIF obrázky vo Windows

Keď si stiahnete obrázky zo stránky, pretože ich chcete upraviť alebo inak použiť, chcete samozrejme, aby ich aj prehliadač súborov vedel otvoriť a zobraziť.

Od Windows 10 je to možné, avšak vyžaduje sa na to rozšírenie. Ak kliknete na súbor AVIF, dostanete najskôr chybové hlásenie. 

V chybovej správe je odkaz. Ak naň kliknete, prejdete do obchodu Microsoft Store na rozšírenie AVIF. Stiahnite si ho. Má len 1,61 MB.

Následne si môžete otvárať a zobrazovať obrázky vo formáte AVIF aj v systéme Windows vo svojom prehliadači súborov.

Namiesto GIF animácií preferovať AVIF animácie na webových stránkach

Existuje tu online konvertor na prevod GIF animácií na AVIF animácie. https://mconverter.eu/convert/gif/avif/

Moja testovacia GIF má veľkosť 787 KB, no animácia vo formáte AVIF má len 411 KB.

Moje osobné závery

Podľa mňa je AVIF najlepšou možnosťou pre aktuálne integrovanie moderných formátov obrázkov do webových stránok. Výhody v kompresii a kvalite obrázkov sú presvedčivé. Žiadny iný formát obrázkov nespája tieto vlastnosti a tak výrazne zlepšuje časy načítavania. Aktuálne ešte veľa prevádzkovateľov webových stránok nevyužíva formát AVIF, hoci podpora pre prehliadače prevyšuje 85 % a technicky nie je prekážkou, aby sa naďalej využíval WebP ako náhrada. SEO sa mení. AVIF sám osebe nestačí na dosiahnutie top hodnôt v skúškach PageSpeed Insights; k tomu patria aj ďalšie technické faktory. Ide o integrovanie moderných formátov obrázkov, pri čom s formátom AVIF dosiahnete lepšie hodnoty v porovnaní s WebP.

Optimalizovaný obsah s kľúčovými slovami už nebude postačovať, pretože internet je práve zaplavený obsahom zo šikovných algoritmov, čo spôsobuje, že mnohé webové stránky s obsahom sú v rovnakej úrovni, čím sú súpermi o online viditeľnosť. Technické SEO a zvlášť plnenie jadrových webových prvkov sa stávajú stále dôležitejšími faktormi hodnotenia a vážnym rozhodujúcim prvkom, pretože Google chce svojim používateľom poskytnúť čo najlepšiu skúsenosť. AVIF je - okrem ďalších faktorov - časťou riešenia, ako zvýšiť rýchlosť načítavania, zlepšiť užívateľskú skúsenosť a potenciálne zlepšiť online viditeľnosť.

Získajte viac informácií o SEO, užívateľskej skúsenosti, dizajne a technických trendoch

Ak sú pre vás tieto témy o SEO, užívateľskej skúsenosti, nástrojoch AI a nových technológiách zaujímavé, získate viac informácií v našich tréningoch a v ďalších článkoch tu na blogu.

Teraz je na tebe rad

Ak bola táto príspevok pre vás užitočný, napíšte nám recenziu na Google. Každá recenzia nám pomáha. Ak potrebujete pomoc pri implementácii formátu AVIF do vášho webového projektu, kontaktujte nás prostredníctvom našej agentúry.