Formát obrázku AVIF pro webové stránky zvyšuje SEO, PageSpeed a uživatelskou zkušenost.

Méně než 0,1 procenta všech webových stránek používají formát AVIF a využívají tak nejlepší možnost pro měřitelné zlepšení rychlosti webové stránky, uživatelské zkušenosti a online viditelnosti v Google. Všichni ostatní provozovatelé webů dosud nevyužili potenciál, který formát AVIF jako obrázkový formát nabízí. Tento článek má pomoci a povzbudit vás, abyste se vážně zamysleli nad formátem AVIF a ideálně jej také použili pro obrázky na svých webových stránkách.

Již jsi někdy otestoval URL své webové stránky pomocí Google PageSpeed Insights, abychom zjistili, jak je na tom tvá výkonnost? Pokud ne, udělej to přímo se svou vlastní webovou stránkou.

Můžu vsadit, že ti zatím tento ukazatel u tvé webové stránky neukazuje, že ano?

Čím je tvůj ukazatel nižší, tím větší je potřeba optimalizovat svou webovou stránku, aby se zlepšila tvá rychlost načítání. Pokud se podíváte níže na stránku nástroje na testování, uvidíte doporučení k zlepšení vaší rychlosti načítání stránky od Googlu, které může obsahovat bod týkající se moderních obrázkových formátů – zejména tehdy, pokud stále používáte formáty JPG nebo PNG pro své obrázky.

To je jeden ze spousty důvodů, proč zatím nedosahujete na své webové stránky nejvyšších hodnot v ukazatelích rychlosti načítání a pravděpodobně také neudělujete základní požadavky v oblasti Core Web Vitals.

Obrázky jak na našem webovém sídle agentury 4eck-media.de, tak i zde na TutKit.com jsou nahrány ve formátu AVIF – ultra rychle, ultra malé s kvalitní prezentací. A AVIF nám pomáhá dosáhnout co nejvyšší rychlosti načítání.

Relativně nový formát pro webové obrázky zná téměř nikdo, a proto je na čase představit moderní obrázkový formát AVIF pro webové stránky se všemi jeho výhodami pro SEO, rychlost načítání a uživatelskou zkušenost.

Obsah článku o AVIF:

Co je to obrázkový formát AVIF?

AVIF je nový obrázkový formát, který byl v roce 2020 uvolněn Aliancí pro otevřená média (AOMedia). Formát je založen na bez ztráty kompresního algoritmu AV1 a přináší řadu výhod oproti jiným běžným obrázkovým formátům jako je JPEG a PNG a také webový formát WebP.

Obrázky ve formátu AVIF jsou značně menší než obrázky ve formátu JPEG při stejné kvalitě obrazu. To je způsobeno tím, že AV1 nabízí mnohem efektivnější kompresi. Obrázek ve formátu AVIF může být srovnatelné kvality jako obrázek ve formátu JPEG často až o 50 % menší.

Obrázky ve formátu AVIF také nabízejí vyšší hloubku barev než obrázky ve formátu JPEG. Obrázky ve formátu AVIF mohou uchovat až 12 bitů hloubky barev, zatímco obrázky ve formátu JPEG podporují pouze 8 bitů hloubky barev. To vede k širší škále barev a realističtějším barvám v obrazech ve formátu AVIF.

Kromě toho jsou obrázky ve formátu AVIF schopny uchovávat alfa kanály. Alfa kanály se používají k definování průhlednosti obrázků. To činí obrázky ve formátu AVIF ideální pro použití v grafických aplikacích, kde je požadována průhlednost.

AVIF je formát s otevřeným zdrojovým kódem a je podporován řadou softwarových a hardwarových výrobců. Většina běžných grafických editorů a prohlížečů již podporuje obrázky ve formátu AVIF. Právě proto je čas, aby se tento moderní obrázkový formát uplatnil!

Níže je uvedeno několik výhod AVIF oproti jiným běžným obrázkovým formátům:

• Lepší kompresní poměry: Obrázky ve formátu AVIF jsou značně menší než obrázky ve formátu JPEG a PNG při stejné kvalitě obrazu.
• Větší hloubka barev: Obrázky ve formátu AVIF podporují až 12 bitů hloubky barev, zatímco obrázky ve formátu JPEG a PNG podporují pouze 8 bitů hloubky barev.
• Podpora alfa kanálů: Obrázky ve formátu AVIF mohou ukládat průhlednost, což nahrazuje důvod, proč se dodnes používají obrázky ve formátu PNG nebo WebP na webových stránkách.
• Formát s otevřeným zdrojovým kódem: AVIF je formát s otevřeným zdrojovým kódem a je podporován řadou softwarových a hardwarových výrobců.
• AVIF je přesvědčivý obrázkový formát pro webové stránky, který nabízí mnoho výhod oproti jiným běžným formátům (včetně WEBP).

Jde vidět, že AVIF bude v budoucnosti hrát stále větší roli při ukládání a zobrazování obrázků na webových stránkách – zejména proto, že Google již přímo doporučuje jeho použití v doporučeních výsledků analýzy PageSpeed Insights a v současné době všechny běžné prohlížeče ve svých novějších verzích podporují AVIF. 

Proto se vyplatí být brzy na to, což znamená začlenit tento formát na svou webovou stránku, abyste již nyní mohli využít výhody pro SEO, rychlost načítání a uživatelskou zkušenost.

Proč AVIF přináší výhody pro SEO, rychlost načítání a uživatelskou zkušenost?

Největší výhoda je nejvíce patrná, pokud porovnáme obrázky v zobrazení. Na příkladu jsem vygeneroval obrázek o Midjourney od hejna klaunů ve formátu PNG s rozlišením 1024x1024.

• Původní PNG: 1,43 MB
• Optimalizováno pomocí TinyPNG: 393 KB - Ersparnis 73 %

Původní PNG soubor jsem nechal převedený pomocí squoosh.app s výsledkem:

• Optimalizováno pomocí Squoosh jako WebP: 84 kb - Ersparnis 94 %
• Optimalizováno pomocí Squoosh jako AVIF: 42 kb - Ersparnis 97 %

Výsledkem je, že AVIF obrázek při stejné optické kvalitě je pouze poloviční velikostí než WebP obrázek. V mnoha jiných testech se ukázalo, že kompresní artefakty, které se objevují při příliš velké kompresi u JPG souborů, začnou být lehce viditelné až při kvalitě pod 30 směrem k 20 nebo níž. Při kvalitě 30 zůstávají i textové prvky v pixelové grafice stále překrásně ostré bez kompresních artefaktů.

Takové úspory na webech s množstvím obrázků nelze dostatečně ocenit.

AVIF pro lepší SEO hodnocení, PageSpeed a uživatelskou zkušenost

Google již v roce 2021 učinil vitální jádrové hodnoty (Core Web Vitals) webové stránky faktorem hodnocení. Mezi ně patří například rychlost načítání, tedy hodnota, která ukazuje, jak rychle se pro vašeho uživatele načítá hlavní obsah. Google udává časy do 2,5 sekundy jako dobrou hodnotu, na kterou by měli majitelé webů směřovat pro své uživatele.

Větší obrázky způsobují delší doby načítání. Core Web Vitals poté nebudou považovány za splněné.

Dále existuje druhý problémový případ. Pokud jsou v webu umístěny větší obrázky, které jsou například formátu PNG nebo JPEG, může se stát, že textový obsah je již načten, zatímco obrázek se načítá pomaleji. To může vést k tzv. kumulativním změnám layoutu, tedy malým posunům, které s sebou nese zobrazení obrázku, a spodní části webu tlačí dolů, kde také patří. Google tyto kumulativní změny layoutu necítí dobře a označuje je jako chyby CLS, jež vedou k tomu, že Core Web Vitals nejsou splněny.

Kromě toho každému návštěvníkovi stránek prostě skvěle připadá, když se stránky načítají rychle a obsah je okamžitě po kliknutí k dispozici. Můžete také umisťovat obrázky na web v lepší kvalitě, aniž byste museli komprimovat až tak daleko, že byly viditelné kompresní artefakty. Velikost souboru zůstane i při ztrátové konverzi nebo normální kompresi pěkně malá ve srovnání s PNG nebo JPEG. Formát AVIF tedy z několika aspektů zvyšuje uživatelskou zkušenost pro každého uživatele. Google nás tedy nutí k tomu, abychom splnili Core Web Vitals a udělali něco pro naše návštěvníky, aby nebyli frustrováni při návštěvě našeho webu.

Můžete tak udělat něco pro zlepšení uživatelské zkušenosti, PageSpeedu a technické kvality vašeho webu, což se všemi třemi pozitivně projeví na vaší online viditelnosti.

Podpora pro AVIF obrázky v prohlížečích

Zvláště, pokud jde o zcela nové techniky, je každý majitel webu nějak zdrženlivý a raději počká ještě pár měsíců. Na jedné straně nechceme být beta testerem u žádných majoritních verzí obchodních systémů nebo CMS, na druhé straně nikdy není zcela jisté, že nevzniknou problémy s určitými prohlížeči nebo zařízeními.

Při formátu AVIF obrazu je skutečně rozhodující, zda běžné prohlížeče tento formát již podporují. Webová stránka caniuse.com vám poskytne o tom informace: https://caniuse.com/avif

AVIF již podporuje téměř 85 % globálního prohlížečového trhu. V Německu činí podpora AVIF k dnešnímu dni 80,33 % … no což, Německo prostě, kde stále existují mezery v mobilní síti, a také některé oblasti stále trpí pomalým internetem (mj. i moje oblast: zatímco jsem v kanceláři s gigabitovým připojením, doma přichází pouhých 9 Mbit/sec).

Vidíte tedy, že AVIF je již nějakou dobu podporován v nejvýznamnějších prohlížečích.

Kolik webů již používá formát AVIF?

Podobně jako caniuse.com vám w3tech.com poskytuje statistické údaje o využívání určitých technologií. To platí i pro používané formáty obrázků na webech.

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

Aktuálně tedy méně než 0,07 procenta všech webových stránek používají formát AVIF. Whaaat? To je stále směšně málo. Ale hej, je to šance pro vás, stát se technologickou špičkou při používání moderních obrázkových formátů. Jak je patrné z grafu v pravém obrázku, použití se zvyšuje každý měsíc ... stále v rozsahu promile. To se jistě brzy zrychlí.

Je zajímavé, že dokonce ani 10 procent všech webových stránek neposlechne doporučení Googlu ohledně moderních webových formátů. Všichni ostatní dělají ústupky rychlosti načítání a uživatelské zkušenosti a pravděpodobně také splňují základní webové ukazatele, což se negativně projevuje na online viditelnosti.

AVIF vs. WebP - co je lepší pro vaše webové stránky?

Pro ilustraci provedeme ještě jedno přímé testování. Obrázek vpravo z části záhlaví na TutKit.com měl před konverzí na formát AVIF jako PNG s průhlednostmi více než 600 KB.

Nyní je tento obrázek systémově generován jako WebP s velikostí 159 KB (naše záložní řešení!). Dokonce i když je nyní optimalizován pomocí nástroje jako je TINYPNG, který dokáže redukovat i soubory ve formátu WebP, zůstáváme na hodnotě 128 KB. Pořád alespoň o 20 procent menší.

Jako soubor AVIF, který je standardně zobrazován, má tento obrázek nyní pouze 94 KB, tedy pouze 59 procent velikosti webové zálohy WebP. Ve všech testech bylo zjištěno, že AVIF dokáže formát WebP předčit ve velikosti souboru při zachování stejné vizuální kvality.

Proč zvolit AVIF místo WebP?

• AVIF umí průhlednosti a při vyšší kompresi a nižší velikosti souboru si přesto zachová lepší kvalitu obrazu.
• Podpora je již s téměř 85 % pro AVIF dostupná ve všech běžných prohlížečích. Tendence je stále vzrůstající.
• Vaše webové stránky budou díky AVIF načítat ještě rychleji ve srovnání s WebP. Zvláště u webových stránek s mnoha obrázky, jako jsou internetové obchody s kategoriemi, kde je umístěno mnoho produktových obrázků, je to výhoda. Stejně tak u webových stránek, kde musejí být obrázky zobrazeny vysokou kvalitou (portfolia, reference atd.), zajistíte vysokou vizuální kvalitu při nízké velikosti souboru.

Odkazuje se i na to, co caniuse.com píše přímo na stránce WebP: "AVIF a JPEG XL jsou navrženy tak, aby nahradily formát WebP." AVIF a JPEG XL mají nahradit WebP. 

Než se zeptáte, zda byste měli vsadit na AVIF špatně, protože se zdá, že JPEG XL také účinkuje ve hře, můžu vás ihned uklidnit. Kompatibilita s prohlížeči pomocí JPEG XL je s podílem 0,08 procenta prakticky neexistující.

V Squoosh již můžete převádět obrázky do formátu JPEG XL a má „jen“ podobné hodnoty jako WebP (viz obrázek níže). 

AVIF je a zůstává vítězným formátem. Vsadte na něj včas a využijte všechny výhody i pro vaše webové stránky!

Squoosh.app - nejlepší nástroj pro konverzi JPG, PNG, WebP na AVIF

Zatímco jsme dříve v týmu používali online nástroje TinyJPG nebo TinyPNG k optimalizaci obrázkových souborů ve formátech JPG, PNG nebo WebP pro použití na webových stránkách, nyní jsem velkým fanouškem Squoosh od Googlu. 

Squoosh je bezplatný konvertor obrázků vyvinutý společností Google. Tento nástroj funguje jako online služba, ale také lokálně na vašem počítači nebo serveru (node.js!). Dokáže převádět obrázky do různých formátů, včetně JPEG, PNG, GIF a WebP. A co víc: převádí také vaše obrázky do formátu AVIF.

Konvertor obrázků Squoosh používá širokou škálu technik ke zmenšení velikosti obrázku, aniž by to ovlivnilo kvalitu. Tyto techniky zahrnují komprimaci barevných informací, snížení rozlišení a odstranění redundatních dat.

Jednoduše přetáhněte obrázek a nastavte požadovaný formát. Pár kliknutí a váš obrázek je připravený k převodu a optimalizaci.

Takto to vypadá, když vložíte obrázek ve formátu WebP a převedete ho na AVIF (vlevo) a jako JPEG XL (vpravo) pro konverzi a kompresi. Pomocí posuvníku můžete také porovnat, která úroveň kvality je správná, aby se zachovala viditelná kvalita. V základním nastavení je jeden obrázek vždy zdrojový soubor pro porovnání. Takže máte plnou kontrolu nad výsledkem.

Využijte také Squoosh pro úpravu svého obsahu a vývoj webů, abyste snížili velikost svých obrázků díky moderním formátům webu jako WebP nebo AVIF a zlepšili načítání vašich webových stránek. Můžete také zmenšit velikost vašich JPG souborů - podobně jako u TinyJPG - pokud je chcete například nahrát na sociální sítě. Výhodou oproti TinyJPG je, že máte plnou kontrolu nad kompresí a můžete experimentovat s různými nastaveními optimalizace, abyste dosáhli nejlepší kvality při co nejmenší velikosti.

Zde jsou některé výhody Squoosh:

• Podporuje řadu obrazových formátů, do kterých lze konvertovat 
• Využívá řadu technik ke zmenšení velikosti obrázků.
• Umožňuje náhled komprimovaných obrázků
• Nabízí řadu nastavení optimalizace
• Nástroj je zdarma a snadno použitelný.

Jedním z kladných rysů je, že Squoosh momentálně umožňuje zpracování pouze jednoho obrázku najednou a nepodporuje dávkové zpracování. Doufám, že tato funkce brzy přijde.

Serverová hromadná konverze v PHP frameworku obrázků z formátu JPG a PNG do formátů AVIF a WebP

Samotní jsme zde na TutKit.com naše obrázky, které byly na portálu zobrazeny jako soubory JPG a PNG - a to dokonce více než 14 000 jednotlivých souborů - konvertovali na serverové úrovni do formátu AVIF a jako zálohu pro starší prohlížeče také do formátu WebP. Stejně tak jsme technicky vyřešili, že naši editoři nadále nahrávají obrázky na portál ve formátu JPG nebo PNG, jak jsou zvyklí od našich designérů, a tam je meta-datově označují. Systém pak automaticky při výstupu vloží obrázky do formátu AVIF a jako zálohu pro všechny starší (nebo nepodporované) prohlížeče zobrazí obraz ve formátu WebP.

Aby to fungovalo na straně serveru, je nutné mít nejnovější verze softwaru. Nové funkce imagecreatefromavif a imageavif pro formát AVIF jsou k dispozici pouze v PHP 8.1+ a pouze pokud bylo rozšíření GD s podporou AVIF sestaveno. Vyžaduje libavif verzi 0.8.2 nebo vyšší.

Stejně tak dběte na kompatibilitu operačních systémů. AVIF je k dispozici s balíčky libavif-dev/libavif-devel v repozitářích:

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

Zde je analýza PageSpeed pro mobilní zobrazení na TutKit.com. Zatímco u desktopu je poměrně snadné dosáhnout hodnoty přesahující 90, u mobilních zobrazení je to opravdu výzva. Stále pracujeme na tom, abychom tuto hodnotu posunuli směrem k 100, protože víme: PageSpeed je dobrý pro uživatelskou zkušenost a tím i pro naše SEO úspěchy.

To, co zní tak jednoduše a pohodlně s integrací AVIF zde v našem PHP frameworku Laravel, se nakonec zúčastnilo více než 60 ticketů v našem nástroji JIRA, které souvisely s konverzí a integrací (včetně výzkumu, vývoje, oprav chyb, testování). Zatímco pluginy výrazně snižují práci v klasickém CMS jako je WordPress, při rozsáhlém individuálním vývoji to může být jako u nás potřeba až tři týdny času. Výhody používání formátu AVIF jsou rozhodně stojí za to!

Klidně mimochodem: Možná napsám brzy článek, proč se portály jako TutKit.com spíše spoléhají na PHP-framework než na WordPress nebo jiná CMS.

Pluginy pro použití formátu AVIF v WordPressu

Redakční systém WordPress v základu od září 2023 nepodporuje nahrání AVIF obrázků - na rozdíl například od CMS Contao, který podporuje AVIF od verze 5.0.0. Proto je aktuálně zapotřebí dvě operace při používání WordPress, aby bylo možné zobrazit vaše obrázky ve formátu AVIF.

1. Vytvoření podpory pro AVIF ve WordPressu
2. Konverze obrázků z JPG/PNG/WEBP do AVIF

Existuje řada pluginů pro WordPress, které umožňují použití AVIF obrázků na webových stránkách s WordPressem. Zde jsou tři pluginy, které si můžete prohlédnout: 

• AVIF Support: Tento plugin vám umožňuje nahrát a zobrazit AVIF obrázky na webových stránkách postavených na WordPressu. Podporuje také automatickou konverzi obrázků z formátu JPEG a PNG na formát AVIF.
• Converter for Media: Tento plugin konvertuje všechny obrázky ve vaší mediální knihovně WordPressu na AVIF obrázky. Nabízí také řadu možností pro nastavení kvality obrazu a úrovně komprese.
• ShortPixel Image Optimizer: Tento plugin optimalizuje obrázky ve vaší mediální knihovně WordPressu, včetně konverze do formátu AVIF. Nabízí také řadu dalších funkcí pro zlepšení kvality a výkonnosti obrázků.

Tyto pluginy jsou skvělým způsobem, jak využít výhod AVIF obrázků na webových stránkách postavených ve WordPressu.

Zde je odkaz na plugin AVIF-Support – momentálně má pouze 1 956 stažení a méně než 800 instalací – je vidět, že AVIF je pro uživatele WordPressu stále naprosto neznámý.

AKTUALIZACE 05.04.2024: S verzí WordPress 6.5 WordPress konečně podporuje i formát AVIF! Supportovací pluginy budou tak potřeba pouze pro starší verze WordPressu. Vyplatí se tedy provést update na WordPress 6.5 a novější.

Plugin Local Image Sharp pro weby postavené ve Strapi

Sami využíváme AVIF také na našem webu agentury 4eck-media.de, který využívá CMS Strapi postavené na node.js. Plugin Local Image Sharp pro Strapi umožňuje používání AVIF obrázků na stránkách postavených ve Strapi. Plugin využívá nástroj sharp Image-Processing-Toolkit k převodu obrázků na AVIF obrázky.

Plugin Local Image Sharp ti nabízí řadu funkcí, včetně:

• Automatické převádění obrázků do formátu AVIF
• Možnost nastavení kvality obrázků a míry komprese
• Podpora různých formátů obrázků

Pro instalaci pluginu stačí stáhnout ze Strapi Plugin Store a nainstalovat jako jakýkoli jiný Strapi plugin.

Nastavili jsme naši stránku tak, že obrázky stále nahráváme do Strapi systému jako JPG nebo PNG. Systém obrázky konvertuje do formátů AVIF a WEBP v šesti různých rozlišeních, aby byly zobrazeny jako AVIF podle zařízení (počítač, tablet, mobil) v prohlížeči správně dimenzované obrázky. Pro starší prohlížeče máme zde také záložní řešení s obrázky WebP, které jsou pak zobrazeny. 

Nejlépe použij tag <picture>, který bude obsahovat tagy <source> a <img>, pro zobrazení obrázků ve správných rozměrech a v obou formátech AVIF a WebP s JPEG nebo PNG zdrojem.

Obrázky ve moderním webovém formátu byly vedle cache jedním z nejdůležitějších posilovačů pro vynikající výkon naší agenturní stránky:

Poznámka k meta-náhledům a strukturovaným datům

Vzhledem k tomu, že Google obrázky stále nepodporuje ve formátu AVIF, uvádíme v schématu "obrázek": stále původní soubor ve formátu JPG. Stejně tak meta-náhled, který přidáváme ke každé stránce produktu, abychom Google nabídli náhledový obrázek pro výpis ve vyhledávání, stále obsahuje formát JPG.

Lepší opatrnost. V diskuzích se již objevily příspěvky o tom, že po přechodu na AVIF byla kompletní online viditelnost obrázků ztracena. Tento zážitek však nemůžeme potvrdit. Naše online viditelnost zůstala konstantní, ale dotazy Googlebotu na obrázky se zvýšily. Zajímavé je, že vidíme, jak Googlebot prochází WebP obrázky, které jsou v kódu připraveny jako záloha pro starší prohlížeče. Zdá se, že Google aktuálně indexuje obrázky ve formátu WebP.

Z tohoto důvodu bych doporučil zachovat i zdrojový obrázek ve formátu JPG v meta datech pro náhledy a strukturovaná data.

Nástroje a software pro úpravu AVIF obrázků

Obrázky jsou často a rádi upravovány, a proto je kompatibilita s formátem AVIF výhodou u běžných programů na úpravu obrázků. Občas si stáhneme existující obrázek ze stránky, abychom provedli úpravu. Je dobré, když váš oblíbený grafický program dokáže obrázek otevřít, což je základní funkcí kompatibility s AVIF. Pokud je pak uložen v jiném formátu, může být konvertován zpět do formátu AVIF pomocí Squoosh nebo jiných nástrojů.

Zde je seznam grafických programů k úpravě obrázků s kompatibilitou s AVIF (k září 2023):

• Gimp: Může importovat, upravovat a exportovat AVIF od verze 2.10.22.
• Photopea: může importovat a upravovat AVIF, ale ne exportovat. Uložení je možné v jiném formátu.
• Affinity Photo: nepodporuje AVIF
• Photoshop: nepodporuje, ale existuje plugin, který umožňuje kompatibilitu.

Plugin AVIF pro Photoshop

Zde najdete plugin, který umožňuje otevírat AVIF soubory v programu Photoshop.
https://github.com/0xC0000054/avif-format

Stažení je možné v záložce Release na této stránce.

Po stažení ZIP přidejte Av1Image.8bi do složky, kde Photoshop hledá příplatky. U standardní instalace bude tato složka vypadat takto:
C:\Program Files\Common Files\Adobe\Plug-ins\CC

Nebo zde: C:\Program Files\Adobe\Photoshop [verze]\Plug-ins

Photoshop musí být uzavřen. Poté spusťte Photoshop, aby bylo možné načíst plugin. Poté můžete AVIF soubory otevřít přímo přetažením a vložením nebo pomocí dialogu Otevřít v Photoshopu.

Zobrazování AVIF obrázků ve Windows

Když si stahuji obrázky ze stránky, protože je chci upravovat nebo potřebuji jinak využít, chci samozřejmě, aby je také mohl otevřít a zobrazit Průzkumník souborů.

Od systému Windows 10 to jde, ale je potřeba k tomu rozšíření. Kliknete-li na soubor AVIF, dostanete nejprve chybové hlášení. 

V chybové zprávě je odkaz. Kliknutím na něj se přesunete do Obchodu Microsoft Store, kde najdete rozšíření pro AVIF. Stáhněte si ho. Má pouze 1,61 MB.

Po nainstalování lze obrázky ve formátu AVIF otevřít a zobrazit také ve Windows ve vašem Průzkumníku souborů.

Raději zakomponovat AVIF animace na webové stránky než GIF animace

Zde existuje online konvertor, který převede GIF animace na AVIF animace. https://mconverter.eu/convert/gif/avif/

Zatímco můj testovací GIF má velikost 787 KB, animace ve formátu AVIF má pouze 411 KB.

Můj osobní závěr

Podle mého názoru je AVIF nejlepší volbou pro integrování moderních obrazových formátů do webových stránek. Výhody v kompresi a kvalitě obrazu jsou přesvědčivé. Žádný jiný obrazový formát nenabízí tuto kombinaci vlastností a tak zvyšuje rychlost načítání stránek. V současné době stále příliš málo provozovatelů webů využívá formát AVIF, i když podpora prohlížečů je vyšší než 85 % a technicky není důvod stále používat WebP jako zálohu. SEO se mění. Pouze AVIF nestačí k dosažení vysokých hodnot v PageSpeed Insights; k tomu jsou zapotřebí další technické faktory. Pokud jde o integraci moderních obrazových formátů, s AVIF budete moci dosáhnout lepších výsledků než s WebP.

Keywordeoptimalizovaný obsah už nebude stačit, protože internet je díky umělé inteligenci zaplaven obsahem, což způsobuje, že mnoho webů soutěží o online viditelnost s konkurenty, kteří mají kvalitní obsah. Technické SEO a zejména splnění základních webových vitalit jsou proto stále důležitějším faktorem pro hodnocení a tedy důležitým kritériem pro rozhodnutí, protože Google chce uživatelům poskytnout co nejlepší uživatelskou zkušenost. AVIF je – vedle dalších faktorů – částí řešení pro zrychlení načítání stránek, zlepšení uživatelské zkušenosti a potenciálně zlepšení online viditelnosti.

Dozvědět se více o SEO, uživatelské zkušenosti, designu a technických trendech

Pokud vás základní témata týkající se SEO, uživatelské zkušenosti, nástrojů s umělou inteligencí a nových webových technologií zajímají, dozvíte se více v našich školeních a dalších článcích zde na blogu.

Nyní jste na řadě

Pokud byl tento příspěvek pro vás užitečný, dejte nám prosím recenzi na Google. Každá recenze nás podporuje. Pokud potřebujete pomoc s implementací AVIF do svého webového projektu, neváhejte nás kontaktovat na našem webovém místě.