AVIF - modernt bildformat för webbplatser.

Bildformat AVIF för webbplatser ökar SEO, PageSpeed & användarupplevelse.

Matthias Petri
publicerad:

Mindre än 0,1 procent av alla webbplatser använder AVIF-formatet och drar nytta av den bästa möjligheten för bildformat att mätbart förbättra webbplatsens hastighet , användarupplevelse och synlighet online på Google. Alla andra webbplatsoperatörer utnyttjar ännu inte den potential som AVIF erbjuder som bildformat. Den här artikeln är avsedd att råda bot på detta och uppmuntra dig att ta en seriös titt på AVIF-formatet och helst använda det för dina bilder på din webbplats.

Har du någonsin testat webbadressen till din webbplats med Google PageSpeed Insights för att se hur den presterar? Om inte, gör det direkt med din egen webbplats.

Låt mig gissa, du ser för närvarande inte det här värdet på din webbplats, eller hur?

PageSpeed-Insights-resultat för TutKit - Desktop

Ju lägre poäng du har, desto mer optimering behöver din webbplats för att förbättra din PageSpeed. Om du öppnar rekommendationerna för att förbättra din PageSpeed från Google längre ner på testverktygssidan kan det mycket väl vara så att en punkt inkluderar moderna bildformat - om du fortfarande använder JPG- eller PNG-filformat för dina bilder.

PageSpeed-Insights rekommenderar användningen av AVIF.

Detta är en av flera anledningar till att du ännu inte uppnår toppresultat med din webbplats i PageSpeed Insights och förmodligen inte heller klarar Core Web Vitals.

Både bilderna på vår byrås webbplats 4eck-media.de och här på TutKit.com laddas i AVIF-filformatet - ultrasnabbt, ultrasmalt och i en övertygande kvalitet. Och AVIF hjälper oss att uppnå högsta möjliga PageSpeed.

Det relativt nya filformatet för webbbilder är knappast känt av någon, och därför är det dags att introducera det moderna AVIF-bildformatet för webbplatser med alla dess fördelar för SEO, PageSpeed och användarupplevelse.

Innehållsförteckningen för AVIF-artikeln:

    Vad är AVIF-bildformatet?

    AVIF är ett nytt bildformat som publicerades 2020 av Alliance for Open Media (AOMedia). Formatet är baserat på den förlustfria komprimeringsalgoritmen AV1 och erbjuder ett antal fördelar jämfört med andra vanliga bildformat som JPEG och PNG samt webbformatet WebP.

    AVIF-bilder är betydligt mindre än JPEG-bilder med samma bildkvalitet. Detta beror på att AV1 erbjuder en betydligt effektivare komprimering. En AVIF-bild med samma bildkvalitet som en JPEG-bild kan ofta vara upp till 50 % mindre.

    AVIF-bilder erbjuder också ett högre färgdjup än JPEG-bilder. AVIF-bilder kan lagra upp till 12-bitars färgdjup, medan JPEG-bilder endast stöder 8-bitars färgdjup. Detta resulterar i ett bredare färgomfång och mer realistiska färger i AVIF-bilder.

    Dessutom kan AVIF-bilder lagra alfakanaler. Alfakanaler används för att definiera bildernas transparens. Detta gör AVIF-bilder idealiska för användning i grafiska applikationer där transparens krävs.

    AVIF är ett format med öppen källkod och stöds av en mängd olika mjukvaru- och hårdvaruleverantörer. De flesta vanliga bildredigeringsprogram och webbläsare stöder redan AVIF-bilder. Det är därför hög tid att detta moderna bildformat blir etablerat!

    Nedan följer några av fördelarna med AVIF jämfört med andra populära bildformat:

    • Bättre komprimeringsgrad: AVIF-bilder är betydligt mindre än JPEG- och PNG-bilder med samma bildkvalitet.
    • Högre färgdjup: AVIF-bilder har stöd för upp till 12-bitars färgdjup, medan JPEG- och PNG-bilder endast har stöd för 8-bitars färgdjup.
    • Stöd för alfakanaler: AVIF-bilder kan lagra transparens, så de ersätter också anledningen till att PNG- eller till och med WebP-bilder fortfarande används på webbplatser idag.
    • Format med öppen källkod: AVIF är ett format med öppen källkod och stöds av ett stort antal mjukvaru- och hårdvaruleverantörer.
    • AVIF är ett övertygande bildformat för webbplatser som erbjuder många fördelar jämfört med andra vanliga format (inklusive WEBP).

    Det kan förutses att AVIF kommer att spela en allt viktigare roll för lagring och visning av bilder på webbplatser i framtiden - särskilt eftersom Google har placerat dess användning direkt i rekommendationerna i PageSpeed Insights-resultaten och alla vanliga webbläsare nu stöder AVIF i de nyare versionerna.

    Det är därför värt att vara tidigt ute när det gäller att bädda in det på din egen webbplats för att redan nu kunna utnyttja fördelarna för SEO, PageSpeed och användarupplevelsen.

    Varför ger AVIF fördelar för SEO, PageSpeed och användarupplevelse?

    Den största fördelen blir som mest synlig när vi jämför bilderna i vyn. Som ett exempel har jag genererat en bild via Midjourney av ett stim clownfiskar i upplösningen 1024x1024 i PNG-format.

    • Original PNG: 1,43 MB
    • Optimerad via TinyPNG: 393 KB - 73 % sparad
    Förbättringen av PNG-grafiken med TinyJPG

    Jag lät sedan konvertera den ursprungliga PNG-filen via squoosh.app med följande resultat:

    • Optimerad som WebP via Squoosh: 84 kb - 94 procent sparad
    • Optimerad som AVIF via Squoosh: 42 kb - 97 procent sparad
    Komprimeringsjämförelse WebP och AVIF via Squoosh

    AVIF-bilden är alltså bara hälften så stor som WebP-bilden med samma optiska kvalitet. Många andra tester har visat att komprimeringsartefakter, som uppstår när JPG-filer komprimeras för mycket, bara blir något synliga när kvaliteten justeras under 30 mot 20 eller lägre. Vid kvalitet 30 förblir till och med textkomponenter i pixelgrafik fortfarande vackert skarpa utan kompressionsartefakter.

    Sådana besparingar på bildtunga webbplatser kan inte nog betonas.

    AVIF för bättre SEO-värden, sidhastighet och användarupplevelse

    Google har redan gjort en webbplats viktiga kärnvärden (Core Web Vitals) till en rankingfaktor 2021. Det gäller t.ex. laddningshastigheten, dvs. hur snabbt huvudinnehållet visas för användaren. Google anger tider på upp till 2,5 sekunder som ett bra värde som webbplatsoperatörer bör sträva efter för sina användare.

    Större bilddata orsakar längre laddningstider. Core Web Vitals anses då ha misslyckats.

    Det finns också ett andra problem. Om större bilddata baserad på t.ex. PNG eller JPEG placeras på webbplatsen är det möjligt att textinnehåll redan är laddat medan en bild tar längre tid att ladda. Detta kan leda till så kallade kumulativa layoutförändringar, dvs. små förskjutningar som gör att de nedre delarna av webbplatsen trycks nedåt när en bild visas, där de hör hemma. Google gillar inte sådana kumulativa layoutförändringar och rapporterar dem som CLS-fel, vilket leder till att Core Web Vitals inte godkänns.

    Dessutom känns det bra för varje webbplatsbesökare när sidorna fungerar smidigt och innehållet är omedelbart tillgängligt med ett klick. Du kan också placera bilder av bättre kvalitet på webbplatsen utan att komprimera dem så mycket att komprimeringsartefakter syns. Filstorleken förblir liten jämfört med PNG eller JPEG, även med förlustfri konvertering eller normal komprimering. AVIF-formatet förbättrar därför användarupplevelsen för alla användare på flera sätt. Genom att godkänna Core Web Vitals tvingar Google oss att göra något för våra besökare så att de inte blir frustrerade när de besöker vår webbplats.

    Det innebär att du kan göra något för att förbättra användarupplevelsen, sidhastigheten och den tekniska kvaliteten på din webbplats, vilket alla kommer att ha en positiv inverkan på din synlighet online.

    Webbläsarstöd för AVIF-bilder

    Särskilt när det gäller helt ny teknik är alla webbplatsoperatörer lite tveksamma och gillar att vänta några månader till. Å ena sidan vill man inte bli betatestare för några större releaser av till exempel butikssystem eller CMS, å andra sidan är det aldrig helt garanterat att det inte kommer att finnas några problem med vissa webbläsare eller enheter.

    När det gäller AVIF-bildformatet är den avgörande faktorn om de aktuella webbläsarna nu stöder formatet. På webbplatsen caniuse.com finns information om detta: https://caniuse.com/avif

    AVIF-stöd från webbläsare
    Skärmdump: https://caniuse.com/avif

    AVIF stöds redan av nästan 85 procent av webbläsarna i hela världen. I Tyskland är siffran fortfarande 80,33% per den 2 september ... ja, Tyskland, där luckor i mobiltelefonnätet fortfarande är en del av vardagen och vissa regioner fortfarande lider av haltande Internet (inklusive min region: medan jag reser med gigabit på kontoret får jag bara 9 MBit/sek på mitt hemmakontor).

    Så du kan se att AVIF har stöd i de viktigaste webbläsarna sedan en tid tillbaka.

    Hur många webbplatser använder redan AVIF-formatet?

    I likhet med caniuse.com ger w3tech.com dig statistisk information om användningen av vissa tekniker. Detta gäller även de bildformat som används på webbplatser.

    AVIF-användning på webbplatser.
    Skärmdumpar från https://w3techs.com/

    Detta är den procentandel av alla webbplatser som använder (från och med september 2023)

    • PNG: 82,1
    • JPEG: 78 PROCENT
    • SVG: 55,2 PROCENT
    • GIF: 21,7
    • WebP: 9,2 procent
    • ICO och BMP: 0,2 % vardera
    • AVIF: 0,1 % (avrundat uppåt)

    Det innebär att mindre än 0,07 procent av alla webbplatser för närvarande använder AVIF-formatet. Va? Det är fortfarande löjligt lågt. Men det är ju en möjlighet för dig att bli en teknisk spjutspets när det gäller användningen av moderna bildformat. Kurvan i den högra bilden visar tydligt att användningen ökar månad för månad ... fortfarande i promilleområdet. Detta kommer säkert att accelerera snart.

    Det är intressant att notera att inte ens 10 procent av alla webbplatser följer Googles rekommendation om moderna webbformat. Alla andra skär ner på PageSpeed och användarupplevelsen och klarar förmodligen också Core Web Vitals, vilket har en negativ inverkan på synligheten online som en rankningsfaktor.

    AVIF vs. WebP - vilket är bäst för din webbplats?

    Låt oss göra ett annat direkt test för att illustrera detta. Bilden till höger från huvudavsnittet på TutKit.com hade över 600 KB innan den konverterades till AVIF som en PNG-fil på grund av transparensen.

    TutKit på huvudområdet.

    Den matas nu ut av systemet som en WebP-fil med 159 KB (vår reservlösning!). Även om den nu optimeras med hjälp av ett verktyg som TINYPNG, som också kan reducera WebP-filer, har vi fortfarande 128 KB kvar. Fortfarande en 20-procentig minskning.

    Som AVIF-fil , som visas som standard, har bilden bara 94 KB , dvs. bara 59 procent av storleken på fallback WebP. I alla tester kunde AVIF slå WebP-formatet när det gäller filstorlek med samma optiska kvalitet.

    Vilka är skälen till att välja AVIF i stället för WebP?

    • AVIF kan hantera transparenter och behåller ändå bättre bildkvalitet med högre komprimering och lägre filstorlek.
    • AVIF stöds redan av nästan 85% av alla populära webbläsare. Och trenden är fortfarande stigande.
    • Din webbplats laddas ännu snabbare tack vare AVIF jämfört med WebP. Detta är en särskild fördel för bildtunga webbplatser som t.ex. onlinebutiker med kategorisidor, där ett stort antal produktbilder placeras. På samma sätt kan du på webbplatser där bilderna måste visas i hög kvalitet (portfoliosidor, referenser etc.) säkerställa hög visuell kvalitet med en liten filstorlek.

    En annan ledtråd är vad caniuse.com skriver direkt på WebP-sidan: "AVIF och JPEG XL är utformade för att ersätta WebP." AVIF och JPEG XL är utformade för att ersätta WebP.

    WebP webbläsarstöd
    Skärmdump: https://caniuse.com/webp

    Innan du frågar dig själv om du kanske satsar på fel häst med AVIF, eftersom JPEG XL förmodligen också är med i loppet, kan jag lugna dig direkt. Med 0,08 procent är webbläsarkompatibiliteten med JPEG XL praktiskt taget obefintlig.

    JPEG-XL webbläsarstöd
    Skärmdump: https://caniuse.com/jpegxl

    Du kan redan konvertera bilder till JPEG XL i Squoosh och det har "bara" liknande värden som WebP (se bilden nedan).

    AVIF är och förblir formatvinnaren. Använd det snabbt och utnyttja alla fördelar även för dina webbplatser!

    Squoosh.app - det bästa verktyget för att konvertera JPG, PNG, WebP till AVIF

    Medan vi brukade använda TinyJPG eller TinyPNG som ett onlineverktyg i teamet för att optimera JPG-, PNG- eller WebP-filer för användning på webbplatser, är jag nu ett stort fan av Squoosh från Google.

    Squoosh är en gratis bildkonverterare som utvecklats av Google. Verktyget fungerar som en onlinetjänst, men också lokalt på din dator eller server (node.js!). Det kan konvertera bilder till olika format, bland annat JPEG, PNG, GIF och WebP. Och det bästa av allt är att den också konverterar dina bilder till AVIF-format.

    Squoosh.app - Bildkonverter från Google till AVIF

    Squoosh bildkonverterare använder en mängd olika tekniker för att minska bildstorleken utan att kompromissa med kvaliteten. Bland annat komprimeras färginformation, upplösningen minskas och överflödiga data tas bort.

    Dra helt enkelt in bilden och ställ in önskat format. Några få klick och bilden är konverterad och optimerad.

    Så här ser det ut när du infogar en WebP-bild och skapar den en gång som AVIF (vänster) och som JPEG XL (höger) för konvertering och komprimering. Du kan också använda skjutreglaget för att jämföra vilken kvalitetsnivå som är den rätta så att den synliga kvaliteten bibehålls. I standardinställningen är en sida alltid källfilen för jämförelsen. Så du har full kontroll över resultatet.

    Kompressionsjämförelse Squoosh
    I en direkt jämförelse mellan AVIF och JPEG XL finns det återigen en klar vinnare: AVIF

    Du kan också använda Squoosh för underhåll av innehåll och webbutveckling för att minska storleken på dina bilder tack vare moderna webbformat som WebP eller AVIF och för att förbättra laddningstiderna på dina webbplatser. Du kan också minska filstorleken på dina JPG-filer - på samma sätt som TinyJPG - om du till exempel vill ladda upp dem till sociala medier. Fördelen jämfört med TinyJPG är att du har full kontroll över komprimeringen och kan experimentera med olika optimeringsinställningar för att uppnå bästa kvalitet i minsta möjliga storlek.

    Här är några fördelar med Squoosh:

    • Stödjer en mängd olika bildformat att konvertera till
    • Använder en mängd olika tekniker för att minska bildstorleken.
    • Ger dig möjlighet att förhandsgranska de komprimerade bilderna
    • Erbjuder en rad olika optimeringsinställningar
    • Verktyget är gratis och lätt att använda.

    Trots alla positiva funktioner finns det en nackdel: För närvarande kan Squoosh bara bearbeta en bild i taget och ingen batchbearbetning. Jag hoppas att denna funktion kommer att läggas till i framtiden.

    Batchkonvertering på serversidan i PHP-ramverk från bilder i JPG och PNG till AVIF och WebP

    Här på TutKit.com har vi själva konverterat våra bilder som var integrerade i portalen som JPG- och PNG-filer - mer än 14 000 enskilda filer - till AVIF-format på serversidan och även till WebP-format som en fallback för äldre webbläsare. Vi har också löst problemet tekniskt så att våra redaktörer kan fortsätta att ladda upp bilder till portalen i JPG- eller PNG-format, som våra designers är vana vid att göra, och märka dem med metadata. Systemet bäddar sedan automatiskt in bilderna i AVIF och, som en fallback för alla äldre (eller icke-stödjande) webbläsare, visar dem i WebP.

    För att säkerställa att det fungerar på serversidan ska du använda de senaste programvaruversionerna. De nya funktionerna imagecreatefromavif och imageavif för AVIF-formatet är endast tillgängliga under PHP 8.1+, och om GD-tillägget byggdes med AVIF-stöd. Det kräver libavif version 0.8.2 eller högre.

    Var också uppmärksam på kompatibiliteten hos operativsystemen. AVIF tillhandahålls med paketen libavif-dev/libavif-devel i arkiven:

    • från Ubuntu 21.04
    • från Debian 11
    • från Alpine 3.13
    • från Fedora 34

    Här är PageSpeed-utvärderingen för den mobila vyn av TutKit.com. Medan det fortfarande är relativt lätt att få ett värde över 90 för skrivbordet, är det verkligen en utmaning för mobila vyer. Vi arbetar fortfarande med att förbättra detta värde mot 100, för vi vet: PageSpeed är bra för användarupplevelsen och bidrar därför också till vår SEO-framgång.

    PageSpeed Insights för TutKit - mobil

    Det som låter så fluffigt här med integrationen av AVIF här i vårt PHP-ramverk Laravel, slutade med att lägga upp över 60 biljetter i vårt JIRA-verktyg, som var relaterade till konvertering och integration (inklusive forskning, utveckling, buggfixning och testning). Så även om plugins avsevärt minskar arbetsbelastningen i ett klassiskt CMS som WordPress, kan det ibland ta tre veckor för omfattande skräddarsydd utveckling - som det gjorde för oss. Fördelarna med att använda AVIF är definitivt värda det!

    Förresten: Kanske skriver jag snart en artikel om varför vi föredrar att använda ett PHP-ramverk för portaler som TutKit.com istället för WordPress eller andra CMS.

    Plugins för att använda AVIF i WordPress

    Från och med september 2023 stöder WordPress CMS inte uppladdning av AVIF-bilder som standard - till skillnad från t.ex. Contao CMS, som har stött AVIF sedan version 5.0.0. Därför måste du för närvarande fortfarande göra två steg när du använder WordPress för att kunna mata ut dina bilder i AVIF.

    1. Skapa AVIF-stöd för WordPress
    2. Konvertera bilder från JPG/PNG/WEBP till AVIF

    Det finns ett antal WordPress-plugins som gör det möjligt att använda AVIF-bilder på WordPress-webbplatser. Här är tre plugins som du kan kolla in:

    • AVIF Support: Med det här pluginet kan du ladda upp och visa AVIF-bilder på WordPress-webbplatser. Det stöder också automatisk konvertering av JPEG- och PNG-bilder till AVIF-bilder.
    • Konverterare för media: Detta plugin konverterar alla bilder i ditt WordPress-mediebibliotek till AVIF-bilder. Det erbjuder också en rad alternativ för att justera bildkvaliteten och komprimeringsgraden.
    • ShortPixel Image Optimizer: Detta plugin optimerar bilder i ditt WordPress-mediebibliotek, inklusive konvertering till AVIF-bilder. Det erbjuder också en rad andra funktioner för att förbättra bildkvaliteten och prestandan.

    Dessa plugins är ett utmärkt sätt att dra nytta av AVIF-bilder på WordPress-webbplatser.

    AVIF-Support-Uploader som WordPress-tillägg

    Klicka här för AVIF-supportpluginet - för närvarande har det bara 1.956 nedladdningar och mindre än 800 installationer - du kan se att AVIF fortfarande är helt okänt för WordPress-användare.

    För närvarande körs 43,1 procent av alla webbplatser på WordPress CMS. Så snart WordPress stöder AVIF på systemsidan kommer AVIF att börja sitt segertåg och sopa undan fötterna på JPG, PNG och till och med WebP. - Matthias Petri


    UPDATE 05.04.2024: Med WordPress 6.5 stöder WordPress äntligen AVIF! Detta innebär att supportplugins endast krävs för äldre versioner av WordPress. Desto större anledning att uppdatera till WordPress 6.5 och senare.

    Plugin Local Image Sharp för Strapi-webbplatser

    Vi använder AVIF även på vår byråwebbplats 4eck-media.de, som använder det node.js-baserade Strapi CMS. Plugin-programmet Local Image Sharp för Strapi gör det möjligt att använda AVIF-bilder på Strapi-webbplatser. Pluginet använder verktygslådan för skarp bildbehandling för att konvertera bilder till AVIF-bilder.

    Plugin-programmet Local Image Sharp erbjuder dig en rad funktioner, bland annat

    • Automatisk konvertering av bilder till AVIF-bilder
    • Justering av bildkvalitet och komprimeringsgrad
    • Stöd för olika bildformat

    För att installera pluginet, ladda ner det från Strapi Plugin Store och installera det som alla andra Strapi-plugin.

    Lokal-Bild-Sharp på Strapi-Market

    Vi har ställt in det så att vi fortsätter att ladda upp bilderna till Strapi-systemet som JPG eller PNG. Systemet konverterar bilderna till AVIF och WEBP i sex olika upplösningar för att visa bilderna i rätt storlek i webbläsaren som AVIF beroende på enhet (skrivbord, surfplatta, mobil). För äldre webbläsare har vi också en reservlösning här med WebP-bilder, som sedan visas.

    Det är bäst att använda taggen <picture> , som sedan innehåller taggarna <source> och <img>, för att visa dina bilder i rätt dimension och i de två formaten AVIF och WebP med JPEG eller PNG som källa.

    Vid sidan av cachelagring var bilderna i det moderna webbformatet en av de viktigaste boostrarna för den fantastiska prestandan på vår byrås webbplats:

    PageSpeed Insights för 4eck-media - desktop

    Notering om metatumnaglar och strukturerad data

    Eftersom Google Bilder fortfarande inte stöder AVIF-formatet anger vi fortfarande den associerade JPG-filen som schemamärkning "image":. Meta-tumnageln, som vi anger för varje produktsida för att erbjuda Google en förhandsgranskningsbild för sökutdraget, innehåller också fortfarande JPG-formatet.

    Bättre att ta det säkra före det osäkra. Någon har redan rapporterat i forumet att bildernas fullständiga synlighet online försvann efter bytet till AVIF. Vi kan inte bekräfta denna erfarenhet. Vår synlighet online har förblivit konstant, men Googlebots genomsökningsförfrågningar efter bilder har ökat. Intressant nog ser vi att Googlebot genomsöker WebP-bilderna som finns tillgängliga i källkoden som en fallback för äldre webbläsare. Google verkar sedan genomsöka WebP-bilderna för indexet.

    Därför skulle min rekommendation vara att också använda JPG-källan i metadata för miniatyrbilderna och även för strukturerad data.

    Verktyg och programvara för redigering av AVIF-bilder

    Bilder redigeras ofta och gärna, och därför är det naturligtvis önskvärt att vanliga bildredigeringsprogram är kompatibla med AVIF-formatet. Ibland laddar man ner en befintlig bild från webbplatsen för att göra en ändring. Då är det bra om ditt favoritbildprogram också kan öppna den, vilket är den viktigaste funktionen för AVIF-kompatibilitet. Även om bilden sedan sparas i ett annat format kan den konverteras tillbaka till AVIF-format med hjälp av Squoosh eller andra verktyg.

    Här är en lista över bildredigeringsprogram för AVIF-kompatibilitet (från och med september 2023)

    • Gimp: Kan importera, redigera och exportera AVIF sedan version 2.10.22.
    • Photopea: kan importera och redigera AVIF, men inte exportera. Spara då möjligt i ett annat filformat.
    • Affinity Photo: inget stöd för AVIF
    • Photoshop: inget stöd, men ett plugin hjälper till att säkerställa kompatibilitet.

    AVIF-plugin för Photoshop

    Här hittar du ett plugin som gör det möjligt för Photoshop att öppna AVIF-filer.


    https://github.com/0xC0000054/avif-format Nedladdningen finns tillgänglig på fliken Releases på sidan.


    När du har laddat ner ZIP-filen lägger du till Av1Image.8bi i den mapp där Photoshop söker efter insticksprogram. Detta är mappen för standardinstallationer:
    C:\Program Files\Common Files\Adobe\Plug-ins\CC

    Eller den här mappen: C:\Program Files\Adobe\Photoshop [version]\Plug-ins

    Photoshop måste vara stängt. Starta sedan Photoshop så att insticksprogrammet kan laddas. Du kan sedan öppna AVIF-filer direkt via drag & släpp eller öppna-dialogen i Photoshop.

    AVIF i Photoshop

    Visning av AVIF-bilder i Windows

    När jag laddar ner bilder från webbplatsen för att jag vill redigera dem eller behöver dem för andra ändamål vill jag naturligtvis att filbläddraren ska kunna öppna och visa dem.

    Detta är möjligt från Windows 10 och framåt, men det krävs ett tillägg. Om man klickar på en AVIF-fil får man först ett felmeddelande.

    AVIF-visningsfel på Windows

    Felmeddelandet innehåller en länk. Om du klickar på den kommer du till Microsoft Store för AVIF-tillägget. Ladda ner detta. Det är bara 1,61 MB.

    AVIF-tillägg för Microsoft

    Du kan sedan öppna och visa bilder i AVIF-format i din Windows-filbläddrare.

    AVIF-annons under Microsoft

    Bädda in AVIF-animationer på webbplatser istället för GIF-animationer

    Här är en online-omvandlare för att konvertera GIF-animationer till AVIF-animationer. https://mconverter.eu/convert/gif/avif/

    Medan min test-GIF är 787 KB i storlek, reduceras AVIF-animationen till 411 KB.

    Min personliga slutsats

    Enligt min mening är AVIF det bästa alternativet för att integrera moderna bildformat på webbplatser. Fördelarna när det gäller komprimering och bildkvalitet är övertygande. Inget annat bildformat kombinerar dessa egenskaper och ökar laddningstiderna så mycket. Alltför få webbplatsoperatörer använder för närvarande AVIF-formatet, trots att mer än 85% av webbläsarna stöder det och det inte är ett tekniskt hinder att fortsätta använda WebP som en reservlösning. SEO håller på att förändras. Naturligtvis räcker det inte med enbart AVIF för att uppnå toppresultat i PageSpeed Insights, utan det krävs även andra tekniska faktorer. När det gäller integrationen av moderna bildformat kommer du att kunna uppnå bättre resultat med AVIF jämfört med WebP.

    Sökordsoptimerat innehåll räcker inte längre, eftersom AI i princip översvämmar internet med innehåll, vilket innebär att många webbplatser tävlar om synlighet online med sina konkurrenter med en hög nivå av innehåll. I synnerhet teknisk SEO och förekomsten av centrala webbfakta blir alltmer en starkare rankningsfaktor och därmed en avgörande faktor eftersom Google vill erbjuda användarna bästa möjliga användarupplevelse. AVIF - tillsammans med andra faktorer - är en del av lösningen för att påskynda dina laddningstider, öka användarupplevelsen och förbättra synligheten online på lång sikt.

    Läs mer om SEO, användarupplevelse, design och tekniska trender

    Om du är intresserad av dessa ämnen som rör SEO, användarupplevelse, AI-verktyg och ny webbteknik kan du läsa mer i våra utbildningar och i andra artiklar här på bloggen.

    1101,908,1094,1055,1096

    Nu är det din tur

    Om du tyckte att den här artikeln var värdefull, vänligen skriv en recension på Google. Varje recension stöder oss. Om du behöver hjälp med att använda AVIF i ditt webbprojekt kan du kontakta oss via vår byråsida.

    Publicerad den av Matthias Petri
    Publicerad den:
    Från Matthias Petri
    Matthias Petri grundade, tillsammans med sin bror Stefan Petri, företaget 4eck Media GmbH & Co. KG år 2010. Tillsammans med sitt team driver han den populära fackforumet PSD-Tutorials.de och e-lärandeportalen TutKit.com. Han har publicerat många träningsprogram för bildbehandling, marknadsföring och design och har undervisat som lärare vid FHM Rostock inom "Digital Marketing & Kommunikation". För sitt arbete har han blivit flera gånger belönad, inklusive med Specialpriset för webbplatsutmärkelsen i Mecklenburg-Vorpommern 2011 och som Kreativmacher Mecklenburg-Vorpommern 2015. Han blev utnämnd till Fellow av Kompetenscentrum för Kultur- och Kreativindustri i Tyskland 2016 och engagerar sig i Initiativet "Vi är öst" som entreprenör och vice vd tillsammans med många andra förespråkare med östeuropeisk härkomst.
    Tillbaka till översikten