Bildoptimering: skarpa bilder som laddar snabbt

Bildoptimering gör bilder snabbare att ladda utan att viktiga detaljer försvinner. Börja med rätt storlek och format, och kontrollera sedan vilken fil besökaren faktiskt får. Tänk också på alt-text, laddningsordning och att bilden behöver ha en stabil plats i layouten.

En produktbild som ska gå att zooma behöver andra versioner än en liten bild i en kategori. För logotyper kan ett vektorformat passa bättre. Diagram behöver ofta också förklaras med text eller en tabell så att fler kan ta del av informationen.

Bestäm storleken före komprimeringen

Se hur stor bilden visas på olika skärmar och skapa versioner som passar. Använd inte samma stora originalfil överallt. Responsiva bilder låter webbläsaren välja en passande version för skärmen och layouten.

En butik kan använda samma original för en liten bild i produktlistan och för produktens zoomläge. Skicka en mindre version till listan och hämta den stora först när den behövs för att visa detaljer.

Kontrollera en produktbild från original till mobil

Välj en bild med små detaljer, till exempel tygstruktur eller en etikett. Jämför den i produktlistan, på produktsidan och i zoomläget. På en skärm med hög pixeltäthet kan bilden behöva fler pixlar än den bredd som layouten anger i CSS-pixlar.

Öppna Network, ladda om sidan och filtrera på bilder. Läs bildfilens adress, typ och storlek. Med currentSrc kan du se vilken version webbläsaren valde från ett responsivt bildurval. Hämtar den lilla produktbilden fortfarande originalet behöver du även rätta hur filerna används.

Kontrollera att färg och detaljer är tydliga efter komprimeringen. Se också till att bilden får plats i layouten innan den laddas och att toppbilden inte försenas av lazy loading. Spara fungerande inställningar för olika bildtyper. Samma kvalitetsinställning passar sällan både logotyper och zoomfoton.

Jämför skärpa och filstorlek

Prova WebP och AVIF för foton och andra rasterbilder. Vilket som passar bäst beror på motivet, hur skarp bilden behöver vara och hur webbplatsen hanterar filerna. Jämför flera inställningar på samma bild i stället för att räkna med en viss procentuell besparing.

Titta på kanter, liten text, tonövergångar och produktdetaljer. Filen får inte bli så liten att kunden har svårt att se material eller färg. Läs mer om valet mellan WebP och AVIF.

Ge bilden plats och ladda den i rätt tid

Ange bildens bredd och höjd eller rätt bildförhållande så att webbläsaren kan reservera plats innan filen laddas. Då minskar risken att text och knappar flyttas. Behåll proportionerna när bilden anpassas till mobilskärmen.

Bilder längre ned kan ofta vänta tills de närmar sig skärmen. Undvik däremot normalt lazy loading på den viktigaste bilden högst upp. Annars kan LCP bli sämre trots att bildfilen är liten.

Hur sökoptimerar du bilder?

Välj ett begripligt filnamn och placera bilden där den hör ihop med texten. Kontrollera att sökmotorer kan hämta den. Alt-texten hjälper till att beskriva bilden, men texten och sammanhanget på sidan behövs också.

Använd en bild som förklarar produkten eller ämnet och beskriv vad den visar. Fyll inte filnamn och bildbeskrivningar med sökord.

Alt-text ska beskriva funktion och innehåll

Beskriv en informativ bild så att den som inte kan se den får motsvarande hjälp av alt-texten. En rent dekorativ bild har normalt tom alt-text. Anpassa texten till bilden och sammanhanget i stället för att klistra in samma produktnamn överallt.

Ett diagram kan behöva både en kort alt-text och en förklaring i brödtext eller tabell. Fler exempel finns i guiden till alt-text.

Kontrollera bilden efter publicering

Kontrollera i webbläsarens nätverkspanel vilken bild som laddas efter publicering. Ett tillägg kan ha skapat WebP-filer utan att sidan använder dem. Cache och CDN kan också skicka en äldre version.

Testa flera sidtyper och skärmstorlekar och jämför både skärpa och laddningstid. Gör sedan bildkontrollen till en del av publiceringen, så att nya produkter och artiklar får rätt bilder från början.