AVIF képformátum: SEO, oldalbetöltés és felhasználói élmény javítása weboldalak számára

Kevesebb mint 0,1 százaléknyi weboldal használja az AVIF formátumot és kihasználják a képek számára legjobb lehetőséget az oldal sebességének mérhető javítására, a felhasználói élményre és az online láthatóságra a Google-ben. Az összes többi webhelykezelő még nem használja ki az AVIF által nyújtott lehetőségeket képek formátumában. Ez a cikk ezen segít és arra ösztönöz, hogy komolyabban vegyél az AVIF formátummal, és a lehető legjobban használd a weboldalad képeihez.

Van már egyáltalán fogalmad a webhelyed URL-címéről a Google PageSpeed Insights oldalon, hogy milyen a teljesítményed? Ha még nem, akkor most egyszerűen teszteld le saját webhelyeddel.

Tippeljek, hogy sajnos jelenleg még nem jelenik meg a webhelyednél ez az érték, ugye?

Minél alacsonyabb az értéked, annál több optimalizálásra van szükség a webhelyeden a PageSpeed javítása érdekében. Ha egyszer a tesztelőoldalon lejjebb hajtod az oldalad PageSpeedjének javítási javaslatait a Google-tól, előfordulhat, hogy az egyik pont az újabb képformátumokat is tartalmazza – ez pedig akkor igaz, ha még mindig JPG- vagy PNG-fájlokat használsz a képeidhez.

Ez az egyik több ok közül, hogy miért nem éred el a legmagasabb pontszámokat a PageSpeed Insights-nél a webhelyeddel kapcsolatban és valószínűleg nem felelsz meg a Core Web Vitals követelményeinek sem.

A mi ügynökségi weboldalunkon, a 4eck-media.de oldalon, valamint itt magán a TutKit.com-on is az AVIF fájlformátumban töltődnek be a képek – ultragyorsan, ultrakicsiny méretben meggyőző minőségben. Az AVIF támogatása segít nekünk elérni a lehető legmagasabb PageSpeedet.

Ez a viszonylag új fájlformátum webképekhez alig ismert, így itt az ideje felvezetni a modern AVIF képformátum összes előnyét az SEO, a PageSpeed és a felhasználói élmény szempontjából.

Az AVIF-cikk tartalomjegyzéke:

Mi is az AVIF képformátum?

Az AVIF egy új képformátum, amelyet az Alliance for Open Media (AOMedia) 2020-ban adott ki. A formátum az AV1 veszteségmentes tömörítési algoritmuson alapul, és számos előnyt kínál más népszerű képformátumokhoz képest, mint például a JPEG és a PNG, valamint a WebP webformátumhoz képest.

Az AVIF-képek jelentősen kisebbek, mint a JPEG képek ugyanolyan képminőség mellett. Ez azért van, mert az AV1 egy sokkal hatékonyabb tömörítést kínál. Így egy AVIF kép ugyanolyan képminőséggel gyakran akár 50%-kal kisebb lehet, mint egy JPEG kép.

Az AVIF-képek magasabb színmélységet is biztosítanak, mint a JPEG-képek. Az AVIF-képek akár 12 bites színmélységet is képesek tárolni, míg a JPEG-képek csak 8 bites színmélységet támogatnak. Ez nagyobb színárnyalatot és realisztikusabb színeket eredményez az AVIF-képekben.

Az AVIF-képek képesek alfa csatornákat is tárolni. Az alfa csatornákat arra használják, hogy definiálják a képek átlátszóságát. Ez teszi az AVIF-képeket ideálissá olyan grafikai alkalmazások használatához, ahol az átlátszóság szükséges.

Az AVIF egy nyílt forráskódú formátum, amit sok szoftver- és hardvergyártó támogat. A legtöbb népszerű képszerkesztő szoftver és böngésző már támogatja az AVIF-képeket. Éppen ezért eljött az ideje, hogy ez a modern képformátum elterjedjen!

Az alábbiakban néhány az AVIF más népszerű képformátumokkal szembeni előnye közül:

• Jobb tömörítési arányok: Az AVIF-képek lényegesen kisebbek, mint a JPEG és PNG képek ugyanolyan képminőség mellett.
• Magasabb színmélység: Az AVIF-képek akár 12 bites színmélységet is támogatnak, míg a JPEG és PNG képek csak 8 bites színmélységet támogatnak.
• Alfa csatornák támogatása: Az AVIF-képek képesek tárolni az átlátszóságot, így helyettesítik az okot, amiért ma még PNG vagy WebP-képeket is használnak weboldalakon.
• Nyílt forráskódú formátum: Az AVIF egy nyílt forráskódú formátum, amit sok szoftver- és hardvergyártó támogat.
• AVIF egy meggyőző képformátum a weboldalak számára, amely sok előnyt kínál más népszerű formátumokkal (beleértve a WEBP-t is).

Előrejelezhető, hogy az AVIF egyre nagyobb szerepet fog játszani a képek tárolása és megjelenítése terén a weboldalakon – különösen azért, mert a Google közvetlenül az ajánlásaiban helyezte el a PageSpeed Insights eredményeinek részeként, és a legújabb böngészők már támogatják az AVIF-t.

Ezért érdemes már most belekezdened a saját webhelyedbe az AVIF integrálásába, hogy már most kihasználd annak előnyeit az SEO, a PageSpeed és a felhasználói élmény szempontjából.

Miért hoz előnyöket az AVIF az SEO, a PageSpeed és a felhasználói élmény szempontjából?

A legnagyobb előny a leginkább látható, amikor egyszer összehasonlítjuk a képeket a nézethez. Példaként egy 1024x1024 felbontású PNG formátumú képet használtam a Midjourney-ből, amely a bohóccápa-rohamot ábrázolja.

• Eredeti PNG: 1,43 MB
• Optimalizálva TinyPNG segítségével: 393 KB - 73%-os megtakarítás

Az eredeti PNG fájlt aztán konvertáltattam a squoosh.app használatával az eredmény:

• Optimalizálva Squoosh segítségével WebP formátumban: 84 kb - 94%-os megtakarítás
• Optimalizálva Squoosh segítségével AVIF formátumban: 42 kb - 97%-os megtakarítás

Az AVIF kép azonos vizuális minőség mellett csak a WebP kép felének a mérete. Sok más tesztben is bebizonyosodott, hogy a tömörítési művészeti effektek, amelyek túl magas tömörítés esetén jelentkeznek a JPG fájloknál, csak akkor lesznek enyhén láthatóak, ha az minőség 30 alá, 20 vagy annál alacsonyabb szintűre csökken. A 30-as minőségnél akár a szöveges elemek is minden esetben szépek és élesek maradnak a pixeles képeken anélkül, hogy tömörítési művészeti effektek jelenne meg.

Az ilyen megtakarítások nagyon hasznosak a képcentrikus weboldalak számára.

Az AVIF a jobb SEO-értékekért, a PageSpeedért és a felhasználói élményért

A Google már 2021-ben a webhelyek elsődleges értékeit (Core Web Vitals) rangsorolástényezővé tette. Ezek közé tartozik például a betöltési sebesség, azaz az érték, amely megmutatja, hogy mennyi idő alatt épül fel a fő tartalom a felhasználó számára. A Google 2,5 másodpercig jó értéket jelöl meg, amelyre a webhelytulajdonosoknak törekedniük kell a felhasználóik számára.

A nagyobb képfájlok hosszabb betöltési időt eredményeznek. A "Core Web Vitals" ekkor nem kerülnek át a vizsgálaton.

Emellett van egy második problémás szituáció. Ha a webhelyen elhelyezett nagyobb képfájlok, amelyek például PNG vagy JPEG formátumban vannak, az oldal szöveges tartalmát már betöltötték, miközben egy kép lassabban épül fel. Ez esetben ún. kumulatív elrendezésváltozások, vagyis kis elmozdulások fordulhatnak elő, amelyek a kép megjelenítésével az alsó webhelyrészeket lefelé taszítják, ahová valójában tartoznak. Az ilyen kumulatív elrendezésváltozások nem tetszenek a Google-nek, és CLS-hibaként értékelik őket, amelyek miatt a Core Web Vitals is nem teljesülnek.

Emellett minden webhelylátogató számára fantasztikus érzés, ha az oldalak gyorsan betöltenek, és a tartalmak egy kattintással azonnal elérhetőek. Ráadásul jobb minőségű képeket tudsz elhelyezni a webhelyen anélkül, hogy azokat túl sokat tömörítenéd, hogy látszódjanak a tömörítési művészeti hatások. A fájlméret még a veszteségmentes konverzió vagy a normál tömörítés során is nagyon kicsi marad a PNG vagy JPEG-hez viszonyítva. Az AVIF formátum több szempontból is növeli a felhasználói élményt minden felhasználó számára. A Google tehát azzal, hogy a Core Web Vitals vizsgát követeli meg, arra kényszerít minket, hogy valamit tegyünk a látogatóinkért, hogy azok ne frusztrálódjanak webhelyünk látogatása közben.

Ezáltal lehetőséged van a felhasználói élmény, a PageSpeed és a webhelyed technikai minőségének javítására, amely mindhárom pozitívan fog hatni az online láthatóságodra.

Az AVIF-képek böngésző-támogatása

Különösen akkor, ha új technikai megoldásokról van szó, a webhelytulajdonosok általában kicsit óvatosak, és szívesen várnak néhány hónapot. Egyrészt nem szeretnének béta-tesztelővé válni olyan nagy kiadás-frissítések esetében, mint például webáruházrendszerek vagy tartalomkezelő rendszerek esetében, másrészt sosem biztos, hogy nincsenek problémák bizonyos böngészőkkel vagy eszközökkel.

A AVIF-képformátum esetében valóban az a döntő, hogy a leggyakrabban használt böngészők már támogatják-e ezt a formátumot. Erről információt kaphatsz az alábbi webhelyről: https://caniuse.com/avif

A globális böngészőhasználat 85%-a már támogatja az AVIF-t. Németországban 2023. szeptember 2-án 80,33% ... hát, Németország, ahol a mobilhálózati hiányosságok még mindig mindennaposak, és sok régió továbbra is lassú internetkapcsolattal küzd (az én régiómban is: míg az irodában Gigabit sebességgel internetezek, otthon a home office-ban alig 9 MBit/s érkezik).

Láthatod tehát, hogy az AVIF formátum már hosszabb ideje támogatott a legfontosabb böngészőkben.

Hány webhely használ már AVIF-formátumot?

Hasonlóan a caniuse.com-hoz, a w3tech.com statisztikai adatokat szolgáltat a különböző technológiák használatáról. Így például a képformátumok alkalmazásáról a webhelyeken.

Az összes weboldal százalékai (2023. szeptemberi állapot szerint): 

• PNG: 82,1%
• JPEG: 78%
• SVG: 55,2%
• GIF: 21,7%
• WebP: 9,2%
• ICO és BMP: egyaránt 0,2%
• AVIF: 0,1% (kerekítve)
  

Jelenleg az összes webhely kevesebb mint 0,07 százaléka használja az AVIF formátumot. Whaaat? Ez még mindig nevetségesen kevés. De hé, ez egy lehetőség számodra, hogy a technológiai éllovas legyél a modern képformátumok használatában. A jobb oldali képen a grafikonon már látható, hogy hónapról hónapra nő a használat... még mindig ezrelékes szinten. Ez valószínűleg hamarosan felgyorsul.

Egy érdekes tény, hogy még az összes webhelynek a Google által javasolt modern webformátumokat követnie kell, és az összes többi valószínűleg elismeri a Core Web Vitals-t, ami a rangsorolási tényezőket negatívan érinti az online láthatóság szempontjából.

AVIF vs. WebP - melyik a jobb választás a webhelyed számára?

Vegyünk egy közvetlen tesztet az érthetőség érdekében. A TutKit.com fejlécében található jobb oldali kép az AVIF-konvertálás előtt PNG formátumban több mint 600 KB méretű volt a transzparenciák miatt.

Jelenleg WebP fájlként 159 KB méretű (a visszaesési megoldásunk!). Még akkor is, ha ezt most optimalizáljuk egy olyan eszközzel, mint a TINYPNG, ami képes csökkenteni a WebP fájlokat, 128 KB marad. Azaz még mindig 20%-kal csökkentve.

Az AVIF fájl, amelyet nálunk alapértelmezés szerint használunk, csak 94 KB méretű, tehát mindössze 59%-a a visszaesési WebP méretének. Az összes teszt során az AVIF fájl méretét ugyanolyan optikai minőség mellett sikerült csökkenteni, mint a WebP formátumét.

Miért érdemes az AVIF-et választani a WebP helyett?

• Az AVIF támogatja a transzparenciát, és magasabb tömörítés mellett alacsonyabb fájlméret mellett jobb képminőséget biztosít.
• A támogatás már majdnem 85%-os az összes régimódi böngésző számára. Az irány minden bizonnyal felfelé mutat.
• Az AVIF segítségével a webhelyed gyorsabban fog betölteni, mint a WebP esetében. Főleg olyan képtömeges webhelyeken, mint az online áruházak kategóriái, ahol sok termékkép található, előnyt jelent. Ugyanez igaz az olyan webhelyekre is, ahol a képeket magas minőségben kell megjeleníteni (portfóliók, referencia stb.), biztosítva a magas optikai minőséget alacsonyabb fájlmérettel.

Egyébként azt is érdemes megjegyezni, amit a caniuse.com közvetlenül a WebP oldalán ír: „Az AVIF és a JPEG XL a WebP kiváltására lett kialakítva.” Az AVIF és a JPEG XL a WebP helyébe lépnének. 

Mielőtt azt kérdeznéd magadtól, hogy talán rossz választás lenne az AVIF, mert a JPEG XL is versenyben van, nyugodtan megnyugtathatlak. A JPEG XL böngészőkompatibilitása 0,08 százalékos aránnyal gyakorlatilag nem létező.

A Squoosh segítségével már átalakíthatod a képeidet JPEG XL formátumba, és csak "csak" hasonló értékeket mutat, mint a WebP (lásd alábbi kép). 

Az AVIF továbbra is a formátumgyőztes marad. Gyorsan váltss rá és használd ki az összes előnyt weboldalaidhoz!

A Squoosh.app - A legjobb eszköz a JPG, PNG, WebP átkonvertálásához AVIF formátumba

Miközben korábban a TinyJPG vagy a TinyPNG csapatával dolgoztunk online eszközként a JPG, PNG vagy akár WebP fájlok optimalizálására webhelyeken való felhasználásra, most már nagy rajongója vagyok az Squoosh-nak, amelyet a Google fejlesztett ki. 

A Squoosh egy ingyenes képátalakító eszköz, amelyet a Google készített. Az eszköz online szolgáltatásként és lokálisan is használható a saját számítógépeden vagy szervereden (node.js!). Képeket különböző formátumokba konvertálhat, beleértve a JPEG, PNG, GIF és a WebP-t. És a legjobb rész: Konvertálja a képeidet AVIF formátumba is.

A képkonvertáló Squoosh különféle technikákat használ a képméret csökkentésére anélkül, hogy a minőséget befolyásolná. Ilyen technikák a színinformációk tömörítése, az felbontás csökkentése és a redundáns adatok eltávolítása.

Csak húzd bele a képet és állítsd be a kívánt formátumot. Pár kattintás, és készen is van optimalizáltan konvertálva a képed.

Így néz ki, amikor egy WebP képet helyezel be és AVIF-ként (balra) és JPEG XL-ként (jobbra) konvertálod és tömöríted. A csúszka segítségével összehasonlíthatod, melyik minőségi szint a megfelelő, hogy megmaradjon a látható minőség. Az alapbeállításban mindig az egyik oldal az eredeti fájl az összehasonlításhoz. Tehát a teljes ellenőrzés az eredmény fölött a kezedben van.

Használd te is a Squoosh-ot a tartalomkezelésedhez és webfejlesztéshez, hogy a képeid méretét csökkenthesd a modern WebP vagy AVIF webformátumok segítségével, és javítsd webhelyeid betöltési idejét. Az JPG fájljaidat is csökkentheted méretben, hasonlóan a TinyJPG-hoz, ha például a közösségi médiában akarod őket feltölteni. Az előny az, hogy teljes ellenőrzésed van a tömörítés felett, és különböző optimalizálási beállításokkal kísérletezhetsz, hogy a lehető legjobb minőséget érd el a legkisebb méret mellett.

Itt van néhány Squoosh előnye:

• Támogat számos képformátumot, amelybe konvertálható 
• Széleskörű képméret csökkentési technikákkal dolgozik.
• Előnézeti lehetőség a tömörített képeknél
• Optimalizálási beállítások széles skálája
• Az eszköz ingyenes és könnyen használható.

Egy kis negatívum minden pozitív tulajdonság mellett: Jelenleg a Squoosh mindig csak egy képet tud kezelni és nem képes támogatni a tömeges feldolgozást. Remélem, hogy ez a funkció még el fog jönni.

Képek szerveroldali tételkonvertálása JPG és PNG-ből AVIF és WebP formátumba PHP keretrendszerekben

Azt magunk is itt a TutKit.com-on, ahol a JPG és PNG fájljainkat AVIF-formátumba konvertáljuk és WebP-formátumként is tároljuk a régebbi böngészők számára. Technikailag úgy oldottuk meg, hogy a szerkesztőink továbbra is JPG vagy PNG formátumú képeket töltenek fel, ahogyan szokták, majd a rendszer automatikusan AVIF-be ágyazza és a régebbi (vagy nem támogató) böngészők számára WebP formátumban jeleníti meg.

Azért, hogy a szerveroldali dolgok működjenek, a legújabb szoftververziókat alkalmazzuk. Az új imagecreatefromavif és imageavif funkciók csak PHP 8.1+ alatt érhetők el és ha a GD-kiterjesztés AVIF-támogatással van megépítve. Legalább a libavif 0.8.2 verziója szükséges hozzá.

Ugyanakkor ügyelj a kompatibilitásra az operációs rendszerek tekintetében is. Az AVIF a különböző Libavif fejlesztői csomagokban érhető el a következő repository-kban:

• Ubuntu 21.04-től  
• Debian 11-től 
• Alpine 3.13-tól 
• Fedora 34-től

Itt láthatod a TutKit.com mobil nézet PageSpeed-értékelését. Míg asztali gépen reltíven könnyen elérhetsz egy 90 körüli értéket, addig a mobil nézethez ez valóban kihívást jelent. Még dolgozunk azon, hogy továbbra is növeljük ezt az értéket a 100 felé, mert tudjuk, hogy a PageSpeed jó a felhasználói élmény számára, sőt még az SEO-sikerünket is növeli.

Ami talán könnyedén hangzik itt az AVIF beágyazásával a Laravel PHP-keretrendszerünkben, az végül több mint 60 jegyet eredményezett a JIRA eszközünkben, amelyek a konvertálással és beágyazással (beleértve a kutatást, fejlesztést, hibajavítást, tesztelést) álltak kapcsolatban. Tehát míg a beépülő modulok jelentősen csökkenthetik az ilyen klasszikus CMS-es munkát, egy nagyobb egyedi fejlesztés esetén, például nálunk, akár három hét is szükséges lehet. Az AVIF használatának előnyei abszolút megérnek minden erőfeszítést!

Amúgy: Lehet, hogy hamarosan írok egy cikket arról, miért választunk olyan PHP-keretrendszert, mint a Laravel, és nem a WordPress vagy egyéb CMS-eket a TutKit.com-hoz hasonló portálok esetében.

AVIF használatára szolgáló beépülő modulok WordPresshez

A WordPress tartalomkezelő rendszer alapértelmezetten nem támogatja az AVIF-képek feltöltését, legalábbis 2023 szeptemberi állapot szerint – eltérően például a Contao CMS-től, amely az 5.0.0 verziótól támogatja az AVIF-et. Tehát jelenleg két lépést kell tenned a WordPress alkalmazása során, hogy a képeid AVIF-ben lehessenek elérhetők.

1. AVIF-támogatás beállítása WordPresshez
2. A képek konvertálása JPG/PNG/WEBP formátumból AVIF formátumba

Számos WordPress beépülő modul áll rendelkezésre, amelyek lehetővé teszik az AVIF-képek használatát WordPress webhelyeken. Itt három olyan beépülő modul, amit érdemes megnézned: 

• AVIF Support: Ez a beépülő modul lehetővé teszi az AVIF-képek feltöltését és megjelenítését WordPress webhelyeken. Támogatja a JPEG- és PNG-képek automatikus átalakítását AVIF-képekbe.
• Converter for Media: Ez a beépülő modul az összes képet az általad használt WordPress-mediában AVIF-képekbe alakítja át. Továbbá számos lehetőséget kínál a képminőség és tömörítési arány testreszabására.
• ShortPixel Image Optimizer: Ez a beépülő modul optimalizálja a képeket a WordPress-mediádban, beleértve az AVIF-képekbe való konvertálást is. További funkciók sokaságát is biztosít a képminőség és -teljesítmény javítására.

Ezek a beépülő modulok jó lehetőséget nyújtanak az AVIF-képek előnyeinek kihasználására a WordPress webhelyeken.

Itt találod az AVIF-Support-Plugin-t – jelenleg mindössze 1 956 letöltéssel és kevesebb mint 800 telepítéssel – látszik, hogy az AVIF még teljesen ismeretlen a WordPress felhasználók számára.

FRISSENÍTÉS 2024.04.05.: A WordPress 6.5-el a WordPress végre támogatja az AVIF-et! Így a támogató pluginek csak a régebbi WordPress verziókhoz lesznek szükségesek. Annál inkább érdemes lesz frissíteni a WordPress 6.5-re és annál újabb verziókra.

A Local Image Sharp bővítmény a Strapi weboldalaihoz

Mi is használjuk az AVIF-et az ügynökségi weboldalunkon a 4eck-media.de-n, amely a node.js alapú Strapi CMS-t használja. A Local Image Sharp bővítmény a Strapi-hoz lehetővé teszi az AVIF képek használatát a Strapi weboldalakon. A bővítmény a sharp Image Processing Toolkit segítségével alakítja át a képeket AVIF képekké.

A Local Image Sharp bővítmény számos funkciót kínál, közöttük:

• Képek automatikus átalakítása AVIF képekké
• Képminőség és tömörítési arány testreszabása
• Többféle képformátum támogatása

A bővítmény telepítéséhez töltsd le a Strapi Plugin Store-ból, és telepítsd úgy, mint bármely más Strapi bővítményt.

Nálunk úgy állítottuk be, hogy a képeket továbbra is JPG vagy PNG formátumban töltjük fel a Strapi rendszerbe. A rendszer átalakítja a képeket AVIF-é és WEBP-vé hat különböző felbontásban, hogy megfelelően méretezett képeket jelenítsen meg AVIF formátumban az eszköz típusától függően (asztali, tablet, mobil). Az idősebb böngészők esetében itt is biztosítunk egy visszaesési megoldást WebP képekkel, amelyeket akkor jelenítünk meg.

Az <picture>-Tag használata ajánlott, amely tartalmaz egy <source>- és <img>-Tag-et, hogy a képeket megfelelő dimenzióban és AVIF és WebP formátumban jelenítse meg a JPEG vagy PNG forrásokkal együtt.

A modern webformátumú képek a gyorsítótár mellett az egyik legfontosabb eszközünk volt az ügynökségi weboldalunk nagyszerű teljesítményében:

META-kép és strukturált adatok megjegyzése

Mivel a Google Képek még mindig nem támogatja az AVIF formátumot, a "kép" sémához mindig a hozzá tartozó JPG fájlt adjuk meg. Ugyanígy a Meta-kép, amelyet minden terméklapnál megadunk azok érdekében, hogy a Google részére is előnézetképet kínáljunk a keresési eredményeknél, még mindig JPG formátumban található.

Jobb félni, mint megijedni. A fórumokban már volt beszámoló arról, hogy valaki a váltás után az AVIF-re az összes kép online láthatóságát elveszítette. Ezt a tapasztalatot mi nem erősíthetjük meg. Az online láthatóságunk változatlan maradt, azonban a Google képekhez tartozó "Crawling Requests" növekedtek. 

Véleményem szerint érdemes megfontolni a JPG forrást is a metaadatoknál a mini képek és a strukturált adatok esetében.

AVIF-képek szerkesztésére szolgáló eszközök és szoftverek

A képek gyakran szerkesztésre kerülnek, így az AVIF formátummal való kompatibilitás elengedhetetlen a népszerű képszerkesztő programok esetében. Néha letöltünk egy meglévő képet a weboldalról, hogy módosítást végezzünk rajta. Jó, ha kedvenc képszerkesztő programod képes megnyitni, mely az AVIF kompatibilitás legfontosabb funkcióját jelenti. Akkor is, ha más formátumban mentjük el, a képet később Squoosh vagy más eszközökkel vissza lehet alakítani AVIF-formátumúra.

Íme egy lista az AVIF-kompatibilis képszerkesztő szoftverekről (2023. szeptemberi állapot szerint):

• Gimp: Az AVIF importálást, szerkesztést és exportálást a 2.10.22-es verziótól támogatja.
• Photopea: Az AVIF importálás és szerkesztés, de nem exportálás lehetséges. Később más formátumba lehet menteni.
• Affinity Photo: Nem támogatja az AVIF-et.
• Photoshop: Nem támogatja, de van egy bővítmény, amely segít az AVIF-kompatibilitás létrehozásában.

AVIF-bővítmény Photoshop-hoz

Itt találod meg azt a bővítményt, amely segítségével a Photoshop képes lesz AVIF fájlokat megnyitni.
https://github.com/0xC0000054/avif-format

A letöltés a webhely Releases fülén lehetséges.

Ha letöltötted a ZIP fájlt, másold az Av1Image.8bi fájlt abba a mappába, ahol a Photoshop a bővítményeket keres. Általában a Standard telepítések esetében ez a mappa lehet: C:\Program Files\Common Files\Adobe\Plug-ins\CC

Vagy ez a mappa: C:\Program Files\Adobe\Photoshop [verzió]\Plug-ins

A Photoshop bezárása szükséges. Majd indítsd újra a Photoshop-ot, hogy betölthesse a bővítményt. Ezután közvetlenül az AVIF fájlokat húzhatod és ejtheted, vagy a Photoshop megnyitó ablak segítségével nyithatod meg.

AVIF képek megjelenítése Windowson

Ha képeket töltesz le a webhelyről, mert szerkeszteni vagy máshogy felhasználni szeretnéd őket, akkor természetesen azt szeretnéd, hogy a fájlkezelő is meg tudja nyitni és megjeleníteni azokat.

Windows 10-től ez lehetséges, azonban egy kiegészítőre van szükség. Ha egy AVIF fájlra kattintasz, először hibaüzenetet kapsz. 

A hibaüzenetben egy link található. Ha erre kattintasz, eljutsz az AVIF kiegészítőt tartalmazó Microsoft Store-ba. Töltsd le ezt a kiegészítőt. Mindössze 1,61 MB.

Ezután az AVIF formátumú képeket a Windowsban lévő fájlkezelőben is meg lehet nyitni és megjeleníteni.

Inkább AVIF animációk helyett GIF animációk beillesztése webhelyekre

Egy online konverter is elérhető, amellyel GIF animációkat AVIF animációkká lehet átalakítani. https://mconverter.eu/convert/gif/avif/

Míg a teszt GIF-em mérete 787 KB, az animáció AVIF formátumban 411 KB-ra csökken.

Személyes következtetésem

Szerintem az AVIF jelenleg a legjobb lehetőség a modern képformátumok integrálására a webhelyekbe. A tömörítés és a képminőség előnyei meggyőzőek. Egyetlen más képformátum sem egyesíti ezeket a tulajdonságokat, és olyan mértékben növeli a betöltési időket. Jelenleg még túl kevés webhelytulajdonos használja az AVIF formátumot, bár a böngésző támogatása már több mint 85% -os, és technikailag nem jelent akadályt továbbra is WebP használatával kiegészítve. Az SEO átalakulóban van. Az AVIF önmagában természetesen nem elegendő a PageSpeed Insights top-értékeinek eléréséhez; ehhez további technikai tényezők is szükségesek. Amikor a modern képformátumok integrálásáról van szó, az AVIF-fel szemben a WebP-vel jobb értékeket fogsz tudni elérni.

A kulcsszóoptimalizált tartalom önmagában már nem lesz elegendő, mivel a mesterséges intelligencia által az internet szinte elárasztott lesz tartalmakkal, ami miatt sok webhely magas felszereltségű, tartalmi összehasonlíthatóságú versenytárssal küzd az online láthatóságért. A Technikai SEO, és főleg a Core Web Vitals sikere ezért egyre erőteljesebben számba jön rangsorolási tényezőként és így egyenként határozza meg a döntő pontot, mert a Google a felhasználóknak a lehető legnagyobb felhasználói élményt kívánja biztosítani. Az AVIF - több egyéb tényező mellett - a megoldás egy része annak érdekében, hogy felgyorsítsd az oldalbetöltési időket, növeld a felhasználói élményt, és kilátásban javítsd az online láthatóságot.

További információk a SEO, a felhasználói élmény, a tervezés és a technológiai trendek körében

Ha alapvetően érdekelnek az ilyen témák, mint a SEO, a felhasználói élmény, az AI-eszközök és az új webtechnológiák, többet megtudhatsz a képzéseinkből és az itt olvasható további cikkekből.

Most te jössz!

Ha hasznosnak találtad ezt a bejegyzést, írj nekünk egy értékelést a Google-ben. Minden értékelés segít nekünk. Ha segítségre van szükséged az AVIF használatában a webprojektjeiden, bátran lépj kapcsolatba velünk az ügynökségi oldalunkon keresztül.