AVIF - moderne billedformat til hjemmesider.

Billedformatet AVIF til hjemmesider forbedrer SEO, PageSpeed & brugeroplevelse.

Matthias Petri
Offentliggjort:

Færre end 0,1 procent af alle websteder bruger AVIF-formatet og udnytter den mest målbare måde at forbedre hjemmesidehastigheden, brugeroplevelsen og online synlighed i Google på for billedformater. Alle andre webstedsoperatører udnytter endnu ikke det potentiale, som AVIF som billedformat tilbyder. Denne artikel sigter mod at afhjælpe det og opfordre dig til seriøst at beskæftige dig med AVIF-formatet og ideelt set også bruge det til dine billeder på hjemmesiden.

Har du nogensinde testet URL'en til din hjemmeside på Google PageSpeed Insights for at se, hvordan din præstation er? Hvis ikke, så prøv det med det samme med din egen hjemmeside.

Jeg gætter på, at du desværre ikke får vist denne værdi på din hjemmeside endnu, ikke sandt?

PageSpeed-Insights resultater for TutKit - Desktop

Jo lavere din værdi er, desto mere er der brug for optimering på din hjemmeside for at forbedre din PageSpeed. Hvis du ruller lidt ned på testsiden, kan det være, at Googles anbefalinger til forbedring af din PageSpeed inkluderer et punkt om moderne billedformater - især hvis du stadig bruger JPG- eller PNG-filformater til dine billeder.

PageSpeed-Insights anbefaler brugen af AVIF.

Dette er en af ​​flere årsager til, at du endnu ikke opnår højeste karakterer på PageSpeed Insights med din hjemmeside og sandsynligvis heller ikke består Core Web Vitals-testen.

Både billederne på vores agenturwebside 4eck-media.de og her på TutKit.com indlæses i AVIF-filformatet - ultrahurtigt, ultralille og med en imponerende kvalitet. Og AVIF hjælper os med at opnå en så høj PageSpeed som muligt.

Det relativt nye billedformat til webkaldes nok af få, derfor er det på tide at præsentere det moderne billedformat AVIF for hjemmesider med alle dets fordele for SEO, PageSpeed og brugeroplevelse.

Indholdsfortegnelse for AVIF-artiklen:

    Hvad er AVIF-billedformatet?

    AVIF er et nyt billedformat, der blev offentliggjort i 2020 af Alliance for Open Media (AOMedia). Formatet er baseret på den tabløse kompressionsalgoritme AV1 og tilbyder en række fordele i forhold til andre populære billedformater som JPEG og PNG samt webformatet WebP.

    AVIF-billeder er betydeligt mindre end JPEG-billeder med samme billedkvalitet. Dette skyldes, at AV1 tilbyder en markant mere effektiv kompression. Således kan et AVIF-billede ofte være op til 50 % mindre end et JPEG-billede med samme billedkvalitet.

    AVIF-billeder tilbyder også en højere farvedybde end JPEG-billeder. AVIF-billeder kan gemme op til 12 bit farvedybde, mens JPEG-billeder kun understøtter 8 bit farvedybde. Dette resulterer i et større farvespektrum og mere realistiske farver i AVIF-billeder.

    Derudover er AVIF-billeder i stand til at gemme alfa-kanaler. Alfa-kanaler bruges til at definere gennemsigtigheden af billeder. Dette gør AVIF-billeder ideelle til brug i grafikapplikationer, hvor gennemsigtighed er påkrævet.

    AVIF er et open-source-format og understøttes af en række software- og hardwareleverandører. De fleste populære billedredigeringsprogrammer og browsere understøtter allerede AVIF-billeder. Netop derfor er det på tide, at dette moderne billedformat bliver udbredt!

    Her er nogle af fordelene ved AVIF i forhold til andre populære billedformater:

    • Bedre kompressionsforhold: AVIF-billeder er betydeligt mindre end JPEG- og PNG-billeder med samme billedkvalitet.
    • Højere farvedybde: AVIF-billeder understøtter op til 12 bit farvedybde, mens JPEG- og PNG-billeder kun understøtter 8 bit farvedybde.
    • Understøttelse af alfa-kanaler: AVIF-billeder kan gemme gennemsigtighed og erstatter således behovet for PNG- eller WebP-billeder på hjemmesider.
    • Open-source-format: AVIF er et open-source-format, der understøttes af en række software- og hardwareleverandører.
    • AVIF er et overbevisende billedformat til hjemmesider, der tilbyder mange fordele i forhold til andre populære formater (inkl. WEBP).

    Det kan forudses, at AVIF i fremtiden vil spille en stadig større rolle i lagring og visning af billeder på hjemmesider - især fordi Google har placeret brugen direkte i anbefalingerne i resultaterne fra PageSpeed Insights, og fordi alle de populære browsere i deres nyere versioner nu understøtter AVIF. 

    Derfor kan det betale sig at være tidligt ude med implementeringen på din egen hjemmeside for allerede nu at drage fordel af fordelene ved SEO, PageSpeed og brugeroplevelse.

    Hvorfor er AVIF fordelagtigt for SEO, PageSpeed og brugeroplevelse?

    Den største fordel bliver mest synlig, når vi sammenligner billeder i visningen. Som eksempel har jeg genereret et billede over Midjourney af en skare klovnfisk i en opløsning på 1024x1024 i PNG-formatet.

    • Original-PNG: 1,43 MB
    • Optimeret via TinyPNG: 393 KB - 73 % sparet
    Forbedring af PNG-grafik via TinyJPG.

    Den oprindelige PNG-fil blev derefter konverteret via squoosh.app med følgende resultat:

    • Optimeret af Squoosh som WebP: 84 kb - 94 procent sparet
    • Optimeret af Squoosh som AVIF: 42 kb - 97 procent sparet
    Komprimerings sammenligning WebP og AVIF på Squoosh.

    I resultatet er AVIF-billedet ved samme visuelle kvalitet kun halvt så stort som WebP-billedet. I mange andre tests har det vist sig, at kompressionsartefakter, som observeres ved for høj kompression af JPG-filer, først bliver let synlige, når kvaliteten falder under 30 mod 20 eller derunder. Ved kvalitet 30 forbliver selv tekstkomponenter i pixelgrafikker stadig skarpe uden kompressionsartefakter.

    Sådanne besparelser på billedtunge hjemmesider kan ikke understreges nok.

    AVIF for bedre SEO-værdier, PageSpeed og brugeroplevelse

    Google har allerede i 2021 gjort en hjemmesides vitale kerneværdier (Core Web Vitals) til en rangeringsfaktor. Dette inkluderer blandt andet hastigheden for indlæsning, altså hvor hurtigt hovedindholdet indlæses for din bruger. Google angiver tider op til 2,5 sekunder som god værdi, som hjemmesideejere bør stræbe efter.

    Større billeddata medfører længere indlæsningstider. Core Web Vitals betragtes derefter som ikke bestået.

    Derudover er der et andet problem. Når større billeddata, der f.eks. er baseret på PNG eller JPEG, er placeret på hjemmesiden, kan det ske at tekstindhold allerede er indlæst, mens et billede indlæses langsommere. Dette kan føre til såkaldte kumulative layoutskift, dvs. små forskydninger, der presser de nedre områder af hjemmesiden nedad, hvor de faktisk hører til, når et billede vises. Denne type kumulative layoutskift kan Google ikke lide, og de udsteder dem som CLS-fejl, hvilket medfører at Core Web Vitals heller ikke bestås.

    Derudover føles det fantastisk for enhver besøgende på en hjemmeside, når siderne loader hurtigt, og indholdet vises med et enkelt klik. Derudover kan du placere billeder på en bedre kvalitet på hjemmesiden, uden at komprimere dem så meget, at kompressionsartefakter allerede vises. Filstørrelsen forbliver også ved tabsløs konvertering eller almindelig kompression pænt lille i forhold til PNG eller JPEG. AVIF-formatet forbedrer derfor brugeroplevelsen på flere måder for hver bruger. Google tvinger os således med kravet om beståelse af Core Web Vitals til at gøre noget for vores besøgende, så de ikke bliver frustrerede under besøget på vores hjemmeside.

    På den måde kan du bidrage til at forbedre brugeroplevelsen, PageSpeed og den tekniske kvalitet af din hjemmeside, hvilket vil have en positiv indvirkning på din online synlighed.

    Browserunderstøttelse af AVIF-billeder

    Især når det drejer sig om helt nye teknologier, er hver hjemmesideejer lidt tilbageholdende og venter gerne et par måneder. På den ene side vil man ikke være betatester for større versioner af fx butikssystemer eller CMS'er, på den anden side er det aldrig en garanti for, at der ikke kan opstå problemer med visse browsere eller enheder.

    For AVIF-billedformatets vedkommende er det faktisk afgørende, om de mest anvendte browsere allerede understøtter formatet. Hjemmesiden caniuse.com giver dig information herom: https://caniuse.com/avif

    AVIF-support fra browsere.
    Screenshot: https://caniuse.com/avif

    Næsten 85 procent af den globale browserbrug understøtter allerede AVIF. I Tyskland er det med dato den 2. september stadig 80,33 % … nå, det er jo Tyskland, hvor huller i mobilnettet stadig er en del af hverdagen, og mange regioner stadig lider under langsomt internet (herunder også min region: mens jeg på kontoret har en gigabitforbindelse, kommer der kun 9 Mbit/sek frem på hjemmekontoret).

    Du kan derfor se, at AVIF allerede har været understøttet i de vigtigste browsere i en rum tid.

    Hvor mange hjemmesider bruger allerede AVIF-formatet?

    Ligesom caniuse.com giver w3tech.com statistisk information om brugen af visse teknologier. Også for anvendte billeformater på hjemmesider.

    AVIF-brug på hjemmesider
    Screenshots fra https://w3techs.com/

    Procentdel af alle hjemmesider, der bruger (med dato fra september 2023): 

    • PNG: 82,1%
    • JPEG: 78 %
    • SVG: 55,2 %
    • GIF: 21,7 %
    • WebP: 9,2 %
    • ICO og BMP: hver 0,2 %
    • AVIF: 0,1 % (afrundet)

    Aktuelt bruger mindre end 0,07 procent af alle hjemmesider AVIF-formatet. Whaaat? Det er jo stadig latterligt lidt. Men hey, det er en chance for dig at blive spidsen af den teknologiske spids i brugen af moderne billedformater. Kurven til højre i billedet viser allerede, at brugen øges måned for måned ... stadig i promilleområdet. Det vil helt sikkert snart accelerere.

    Interessant er det, at ikke engang 10 procent af alle hjemmesider følger Googles anbefaling om moderne webformater. Alle andre går på kompromis med PageSpeed ​​og brugeroplevelse og består sandsynligvis heller ikke Core Web Vitals, hvilket negativt påvirker online-synligheden.

    AVIF vs. WebP - hvad er bedre for din hjemmeside?

    Lad os lave en direkte test til illustration. Billedet til højre fra head-området på TutKit.com havde før konvertering til AVIF som PNG-fil over 600 KB på grund af gennemsigtighederne.

    TutKit på hovedområdet.

    Det bliver nu udleveret som WebP-fil med 159 KB (vores backup-løsning!). Selv hvis dette nu optimeres gennem et værktøj som TINYPNG, som også kan reducere WebP-filer, forbliver vi på 128 KB. Trods alt er det stadig reduceret med 20 procent.

    Som AVIF-fil, som standard vises hos os, har billedet kun 94 KB tilbage, hvilket kun er 59 procent af størrelsen på backup-WebP. I alle tests kunne AVIF slå WebP-formatet i filstørrelse under samme visuelle kvalitet.

    Hvilke grunde taler for AVIF i stedet for WebP?

    • AVIF kan gennemsigtigheder og bevare en bedre billedkvalitet med højere kompression og lavere filstørrelse.
    • Supporten for AVIF er allerede på næsten 85 % med alle populære browsere. Tendens til fortsat at stige.
    • Din hjemmeside vil indlæse endnu hurtigere takket være AVIF sammenlignet med WebP. Specielt på billedtunge hjemmesider som online-butikker med kategorisider, hvor der er mange produktbilleder placeret, er det en fordel. Også på hjemmesider, hvor billederne skal vises i høj kvalitet (portfoliohjemmesider, referencer osv.), sikrer du høj visuel kvalitet med lav filstørrelse.

    Det er også en vink, som caniuse.com skriver direkte på WebP-siden: "AVIF og JPEG XL er designet til at erstatte WebP." AVIF og JPEG XL siges at erstatte WebP. 

    WebP-browser-understøttelse
    Screenshot: https://caniuse.com/webp

    Før du spørger dig selv, om du måske satser på det forkerte hest med AVIF, fordi JPEG XL sandsynligvis også deltager i løbet, kan jeg straks berolige dig. Browserkompatibiliteten med JPEG XL er næsten ikke-eksisterende med 0,08 procent.

    JPEG-XL browser support
    Screenshot: https://caniuse.com/jpegxl

    I Squoosh kan du allerede konvertere billeder til JPEG XL, og det har "kun" lignende værdier som WebP (se billede længere nede). 

    AVIF er og forbliver vinderen af formaterne. Satser snart på det og udnyt alle fordelene også for dine hjemmesider!

    Squoosh.app - det bedste værktøj til konvertering af JPG, PNG, WebP til AVIF

    Mens vi tidligere i teamet brugte TinyJPG og TinyPNG som onlineværktøj til at optimere JPG-, PNG- eller endda WebP-filer til brug på hjemmesider, er jeg nu stor fan af Squoosh fra Google. 

    Squoosh er en gratis billedkonverter, udviklet af Google. Værktøjet fungerer som en onlinetjeneste, men også lokalt på din computer eller server (node.js!). Den kan konvertere billeder til forskellige formater, herunder JPEG, PNG, GIF og WebP. Og det bedste: Den konverterer også dine billeder til AVIF-formatet.

    Squoosh.app - Billedekonverter fra Google til AVIF.

    Billedkonverteren Squoosh bruger en række teknikker til at reducere billedstørrelsen uden at påvirke kvaliteten. Dette inkluderer komprimering af farveoplysninger, reduktion af opløsningen og fjernelse af overflødige data.

    Simpelthen træk dit billede ind og indstil det ønskede format. Med få klik er dit billede konverteret og optimeret.

    Sådan ser det ud, når du indsætter et WebP-billede og konverterer og komprimerer det til AVIF (til venstre) og JPEG XL (til højre). Med skyderen kan du også sammenligne, hvilket kvalitetsniveau der er det rigtige, for at bevare synlig kvalitet. I standardindstillingen er den ene side altid den oprindelige fil til sammenligning. Så du har fuld kontrol over resultatet.

    Kompressions sammenligning Squoosh
    I en direkte sammenligning mellem AVIF og JPEG XL er der igen en klar vinder: AVIF

    Brug også Squoosh til din indholdsstyring og webudvikling for at reducere størrelsen på dine billeder takket være moderne webformater som WebP eller AVIF og forbedre indlæsningstiderne på dine hjemmesider. Du kan også reducere størrelsen på dine JPG-filer - på samme måde som med TinyJPG - hvis du f.eks. ønsker at uploade dem på de sociale medier. Fordelen i forhold til TinyJPG er, at du har fuld kontrol over kompressionen og kan eksperimentere med forskellige optimeringsindstillinger for at opnå bedst mulige kvalitet ved mindst mulig størrelse.

    Her er nogle fordele ved Squoosh:

    • Understøtter en række billedformater, som kan konverteres
    • Bruger forskellige teknikker til reduktion af billedstørrelse
    • Giver mulighed for forhåndsvisning af komprimerede billeder
    • Tilbyder en række optimeringsindstillinger
    • Værktøjet er gratis og let at bruge

    En lille ulempe ved alle de positive egenskaber: i øjeblikket kan Squoosh kun behandle ét billede ad gangen og understøtter ikke batchbehandling. Jeg håber, at denne funktion kommer snart.

    Serverbaseret batchkonvertering i PHP-frameworks af billeder fra JPG og PNG til AVIF og WebP

    Vi har selv her på TutKit.com konverteret vores billeder, som var indlejret som JPG- og PNG-filer på portalen - mere end 14.000 enkeltfiler - til AVIF-format og som fallback til ældre browsere også til WebP-format. Vi har også teknisk løst det sådan, at vores redaktører kan fortsætte med at uploade billeder i JPG- eller PNG-format, som vores designere er vant til, og tagge dem med metainformationer i porten. Systemet indlejrer automatisk billederne i AVIF-format og som fallback til alle ældre (eller inkompatible) browsere vises billederne i WebP.

    For at dette fungerer på serversiden, skal du bruge de nyeste softwareversioner. De nye funktioner imagecreatefromavif og imageavif til AVIF-formatet er kun tilgængelige fra PHP 8.1+, og hvis GD-udvidelsen er blevet bygget med AVIF-understøttelse. Det kræver libavif version 0.8.2 eller nyere.

    Vær også opmærksom på kompatibiliteten med operativsystemerne. AVIF leveres med libavif-dev/libavif-devel-pakkerne i depoterne:

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

    Her er en PageSpeed-evaluering for den mobile visning af TutKit.com. Mens man relativt let kan opnå en værdi over 90 på en desktop, er det virkelig udfordrende for mobilvisninger. Vi arbejder stadig på at forbedre denne værdi mod 100, fordi vi ved, at PageSpeed er godt for brugeroplevelsen og dermed også bidrager til vores SEO-succes.

    PageSpeed Insights for TutKit - mobil

PageSpeed Insights for TutKit - mobil

    Det, der lyder så let og afslappet med integrationen af AVIF her i vores PHP-framework Laravel, summede sig i sidste ende til over 60 billetter i vores JIRA-værktøj, som var relateret til konvertering og integration (inklusive research, udvikling, fejlretning, testning). Mens plugins sparer arbejdet i et klassisk CMS som WordPress betydeligt, kan det i omfattende individuel udvikling som hos os tage op til tre uger, som det gjorde hos os. Fordelene ved at bruge AVIF er helt klart det værd! 

    By the way: Måske skriver jeg snart en artikel om, hvorfor vi hos portaler som TutKit.com foretrækker at bruge et PHP-framework i stedet for WordPress eller andre CMS-systemer.

    Plugins til brug af AVIF i WordPress

    CMS'et WordPress understøtter ikke upload af AVIF-billeder som standard i september 2023 - anderledes end f.eks. CMS'et Contao, som har understøttet AVIF siden version 5.0.0. Derfor kræves der i øjeblikket to trin ved brug af WordPress for at kunne vise dine billeder i AVIF-format.

    1. Opsætning af AVIF-support til WordPress
    2. Konvertering af billeder fra JPG/PNG/WEBP til AVIF

    Der er adskillige WordPress-plugins, som muliggør brugen af AVIF-billeder på WordPress-websites. Her er tre plugins, som du kan kigge nærmere på: 

    • AVIF Support: Dette plugin giver dig mulighed for at uploade og vise AVIF-billeder på WordPress-websites. Det understøtter også automatisk konvertering af JPEG- og PNG-billeder til AVIF-billeder.
    • Converter for Media: Dette plugin konverterer alle billeder i din WordPress-mediebibliotek til AVIF-billeder. Det tilbyder også en række indstillinger til tilpasning af billedkvalitet og kompressionsrate.
    • ShortPixel Image Optimizer: Dette plugin optimerer billeder i dit WordPress-mediebibliotek, inklusive konvertering til AVIF-billeder. Det tilbyder også en række andre funktioner til forbedring af billedkvalitet og -ydelse.

    Disse plugins er en god måde at drage fordel af AVIF-billeder på WordPress-websites.

    AVIF-Support-Uploader som WordPress-plugin

    Her er AVIF-Support-Plugin - men indtil videre har det kun 1.956 downloads og mindre end 800 installationer - det ses tydeligt, at AVIF stadig er fuldstændig ukendt for WordPress-brugere.

    Aktuelt kører 43,1 procent af alle websites med CMS'et WordPress. Når WordPress officielt understøtter AVIF, vil AVIF begynde at erobre markedet og udkonkurrere JPG, PNG og WebP. – Matthias Petri


    OPDATERING 05.04.2024: Med WordPress 6.5 understøtter WordPress endelig også AVIF! Dermed vil support-plugins kun være nødvendige for ældre versioner af WordPress. Det er derfor endnu mere værd at opgradere til WordPress 6.5 og nyere.

    Pluginet Local Image Sharp til Strapi-websites

    Vi bruger selv AVIF på vores agenturwebsite 4eck-media.de, som bruger node.js-baseret Strapi CMS. Pluginet Local Image Sharp til Strapi muliggør brugen af AVIF-billeder på Strapi-websites. Dette plugin bruger sharp-billedbehandlingsteknologien til at konvertere billeder til AVIF-billeder.

    Pluginet Local Image Sharp tilbyder en række funktioner, herunder:

    • Automatisk konvertering af billeder til AVIF-billeder
    • Tilpasning af billedkvalitet og komprimeringsgrad
    • Understøttelse af forskellige billedformater

    For at installere pluginet, download det fra Strapi Plugin Store og installer det som enhver anden Strapi-plugin.

    Local-Image-Sharp på Strapi-Market

    Vi har konfigureret det sådan, at vi stadig uploader billeder til Strapi-systemet som JPG eller PNG. Systemet konverterer billederne til AVIF og WEBP i seks forskellige opløsninger for at vise passende dimensionerede billeder som AVIF afhængigt af enheden (skrivebord, tablet, mobil) i browseren. Til ældre browsere har vi også en fallback-løsning med WebP-billeder, der vises.

    Det bedste er at bruge <picture>-tagget, som derefter indeholder <source>- og <img>-tagget for at vise dine billeder i den korrekte dimension og de to formater AVIF og WebP, med kilde til JPEG eller PNG.

    Billederne i det moderne webformat har været en af de vigtigste boostere for en fantastisk ydelse på vores agenturwebsite ved siden af caching:

    PageSpeed Insights for 4eck-media - desktop

PageSpeed Insights for 4eck-media - desktop

    Bemærkninger om meta-thumbnails og strukturerede data

    Da Google Billeder stadig ikke understøtter AVIF-formatet, angiver vi stadig det tilhørende JPG-fil som Schema Markup "image". Det samme gælder meta-thumbnail, som vi angiver til hver produktside for at give Google et forhåndsvisningsbillede til Search-Snippet, som stadig indeholder JPG-formatet.

    Det er bedre at være på den sikre side. Der er allerede blevet rapporteret i forummerne om nogen, der mistede online-synligheden af billederne efter overgangen til AVIF. Denne erfaring kan vi ikke bekræfte. Vores online-synlighed er forblevet konstant, men Googlebots crawling-anmodninger til billeder er steget. Interessant nok ser vi, at Googlebot crawler WebP-billederne, der er tilgængelige som fallback i kildekoden for ældre browsere. Google ser ud til at crawle WebP-billederne til indeksering i øjeblikket.

    Derfor vil jeg anbefale også at bruge JPG-kilden i metadataene til thumbnails og strukturerede data.

    Værktøjer og software til billedredigering af AVIF-billeder

    Billeder bliver ofte redigeret, hvilket er grunden til, at kompatibilitet med AVIF-formatet naturligvis er ønskværdigt i de populære billedredigeringsprogrammer. Nogle gange downloader man et eksisterende billede fra websitet for at foretage ændringer. Det er godt, hvis dit foretrukne billedprogram også kan åbne det, hvilket er den vigtigste funktion ved AVIF-kompatibilitet. Selvom det så gemmes i et andet format, kan det konverteres til AVIF-formatet igen ved hjælp af Squoosh eller andre værktøjer.

    Her er en liste over software til billedredigering til AVIF-kompatibilitet (pr. september 2023):

    • Gimp: Kan importere, redigere og eksportere AVIF siden version 2.10.22.
    • Photopea: Kan importere og redigere AVIF, men kan ikke eksportere det. Gem derefter i et andet filformat.
    • Affinity Photo: Ingen support til AVIF
    • Photoshop: Ingen support, men et plugin kan hjælpe med at etablere kompatibilitet.

    AVIF-plugin til Photoshop

    Her finder du et plugin, som gør det muligt for Photoshop at åbne AVIF-filer.
    https://github.com/0xC0000054/avif-format

    Downloadet er muligt på siden i Releases-sektionen.

    Når du har downloadet ZIP-filen, skal du tilføje Av1Image.8bi til den mappe, hvor Photoshop søger efter plugins. For standardinstallationer er denne mappe normalt som følgende:
    C:\Program Files\Common Files\Adobe\Plug-ins\CC

    Eller denne mappe: C:\Program Files\Adobe\Photoshop [version]\Plug-ins

    Photoshop skal lukkes. Start derefter Photoshop, så plug-in'en kan indlæses. Efterfølgende kan du åbne AVIF-filer direkte via træk & slip eller dialogboksen Åbn i Photoshop.

    AVIF i Photoshop

    Visning af AVIF-billeder i Windows

    Når jeg downloader billeder fra hjemmesiden for at redigere dem eller på anden måde bruge dem, vil jeg selvfølgelig gerne have, at filbrowseren kan åbne og vise dem.

    Fra Windows 10 fungerer det, men der kræves en udvidelse. Når du klikker på en AVIF-fil, får du først en fejlmeddelelse. 

    AVIF-annoncefejl under Windows

    I fejlmeddelelsen er der et link. Når du klikker på det, bliver du ført til Microsoft Store for at hente AVIF-udvidelsen. Download den. Den fylder kun 1,61 MB.

    AVIF-udvidelse til Microsoft

    Efterfølgende kan billeder i AVIF-format også åbnes og vises i din filbrowser under Windows.

    AVIF-annonce på Microsoft

    I stedet for GIF-aniBilder, er det bedre at integrere AVIF-aniBilder på hjemmesider

    Her er en online konverter til at konvertere GIF-aniBilder til AVIF-aniBilder. https://mconverter.eu/convert/gif/avif/

    Mens mit test-GIF fylder 787 KB, reduceres animeringen til 411 KB som AVIF.

    Min personlige konklusion

    Efter min mening er AVIF det bedste valg for at integrere moderne billeformater på hjemmesider i øjeblikket. Fordelene ved komprimering og billedkvalitet er overbevisende. Intet andet billedformat forener disse egenskaber og øger så meget indlæsningstiden. I øjeblikket bruger alt for få hjemmesideoperatører AVIF-formatet, selvom browser-supporten er over 85 %, og det teknisk set ikke er en udfordring at fortsætte med at bruge WebP som en reserve. SEO ændres. AVIF alene er selvfølgelig ikke tilstrækkeligt til at opnå topværdier i PageSpeed-Insights; yderligere tekniske faktorer kræves. Når det drejer sig om at integrere moderne billedformater, vil du være i stand til at opnå bedre resultater med AVIF sammenlignet med WebP.

    Keywordoptimeret indhold alene vil ikke være tilstrækkeligt længere, fordi internettet oversvømmes med indhold takket være AI, hvilket får mange hjemmesider til at konkurrere om online-synlighed ved at have en højt udviklet, indholdsmæssig ligestilling med deres konkurrenter. Teknisk SEO og især opretholdelsen af Core Web Vitals bliver derfor i stigende grad en stærkere rangeringsfaktor og dermed et tiebreaker, fordi Google gerne vil tilbyde brugerne den bedst mulige brugeroplevelse. AVIF er - sammen med andre faktorer - en del af løsningen for at fremskynde indlæsningstiderne, forbedre brugeroplevelsen og potentielt forbedre online-synligheden.

    Få mere at vide om SEO, brugeroplevelse, design og teknologiske trends

    Hvis du er interesseret i emner som SEO, brugeroplevelse, AI-værktøjer og ny webteknologi generelt, kan du lære mere i vores træningssessioner og andre artikler her på bloggen.

    1101,908,1094,1055,1096

    Nu er det din tur

    Hvis dette indlæg har været gavnligt for dig, så skriv meget gerne en anmeldelse på Google. Enhver anmeldelse støtter os. Hvis du har brug for hjælp til at implementere AVIF i dit webprojekt, er du velkommen til at kontakte os via vores agenturside.

    Udgivet den af Matthias Petri
    Udgivet den: Af Matthias Petri
    Matthias Petri startede sammen med sin bror Stefan Petri virksomheden 4eck Media GmbH & Co. KG i 2010. Sammen med sit team driver han det populære fagforum PSD-Tutorials.de og e-læringsportalen TutKit.com. Han har udgivet talrige træningsprogrammer inden for billedbehandling, marketing og design og underviste som ekstern lektor i Digital Markedsføring & Kommunikation på FHM Rostock. Han er blevet flere gange hædret, herunder med en særpris ved Website-Awards Mecklenburg-Vorpommern i 2011 og som Kreativmager Mecklenburg-Vorpommern i 2015. Han blev udnævnt til Fellow for Center for Kultur- & Kreativøkonomi i 2016 og engagerer sig i initiativet "Vi er Østen" som virksomhedsejer og administrerende direktør sammen med mange andre hovedpersoner af østtysk oprindelse på wirsindderosten.de.
    Tilbage til oversigten