Bildoptimering – snabbaste vägen till en snabbare sajt
Av CodexierPublicerad 4 min läsning
När en hemsida känns seg är orsaken väldigt ofta bilderna: foton som laddats upp direkt från kameran eller mobilen, levereras i full storlek till en liten skärm och laddas alla samtidigt. Att åtgärda bilderna kräver sällan en ombyggnad, och resultatet syns direkt i Googles Core Web Vitals. Här förklarar vi de fyra spakarna – format, storlekar, laddning och toppbilden – på vanlig svenska.
Därför väger bilderna mest
Ett foto från en modern mobil kan vara flera megabyte. Texten, koden och stilarna på en vanlig företagssida är tillsammans ofta mindre än ett enda sådant foto. När en sida har en toppbild, några tjänstebilder och en sektion med personalen är det alltså bilderna som står för det mesta besökaren laddar ner. På mobildata är varje extra megabyte tid som besökaren tittar på en tom skärm – och Googles mått Largest Contentful Paint mäter väldigt ofta just toppbilden.
Format: WebP och AVIF
| Format | Passar för | Att veta |
|---|---|---|
| JPEG | Foton, som reserv | Fungerar överallt men ger större filer |
| PNG | Grafik som behöver genomskinlighet | Mycket tungt för foton, undvik det där |
| WebP | Foton och grafik | Betydligt mindre än JPEG med samma kvalitet, stöds av alla aktuella webbläsare |
| AVIF | Foton | Ofta ännu mindre, långsammare att skapa, stöds av aktuella webbläsare |
| SVG | Logotyper, ikoner, enkla illustrationer | Skalar utan att bli suddigt, mycket små filer |
Du behöver inte välja ett. En välbyggd sajt skickar AVIF eller WebP till webbläsare som klarar det och JPEG till resten. De flesta plattformar, bild-CDN:er och ramverk kan göra det automatiskt; i WordPress är det oftast ett tillägg eller en funktion hos webbhotellet.
Rätt storlek för varje skärm
En bild som visas 400 pixlar bred i en mobil behöver inte vara 4 000 pixlar bred. Responsiva bilder låter webbläsaren välja bland flera förberedda storlekar. I praktiken betyder det:
- Spara originalet, men leverera det aldrig direkt.
- Skapa några bredder per bild, till exempel för små mobiler, stora mobiler, surfplattor och datorer.
- Använd attributen srcset och sizes, eller plattformens bildkomponent, så att webbläsaren väljer den minsta fil som räcker.
- Beskär annorlunda för mobil när en bred bild annars blir en smal remsa.
- Ange bredd och höjd på varje bild för att förhindra att layouten hoppar.
Lat laddning och toppbilden
Lat laddning säger åt webbläsaren att vänta med bilder tills besökaren scrollar nära dem. Det är ett enda attribut och sparar mycket på långa sidor. Det vanliga misstaget är att använda det på allt, även den stora bilden högst upp. Då fördröjs just den bild som Google mäter.
Toppbilden
Ladda direkt, markera den med hög prioritet, håll den så lätt som möjligt och överväg att förladda den.
Bilder på första skärmen
Ladda som vanligt. Logotyper och små ikoner fungerar bäst som SVG.
Allt längre ner
Lat laddning. Gallerier, personalbilder och sidfot behöver inte komma fram innan besökaren är där.
Bakgrundsbilder i CSS
Syns ofta inte för optimeringsverktygen. Flytta viktiga bakgrunder in i sidan som riktiga bilder.
Kontrollera resultatet
Du behöver inte läsa kod för att kontrollera arbetet. Kör sidan i Google PageSpeed Insights för mobil före och efter. Titta på Largest Contentful Paint och listan med förbättringsförslag, som pekar ut bilder som är för stora eller i gamla format. I Chrome kan du högerklicka på en bild, öppna den i en ny flik och se storlek och filtyp. Guiden om Core Web Vitals förklarar siffrorna.
- Toppbilden syns snabbt i en mobil på mobildata.
- Ingen bildfil på en vanlig sida är större än några hundra kilobyte.
- Bilderna är WebP eller AVIF i webbläsaren.
- Inget hoppar medan sidan laddas.
När du inte behöver hjälp: i Shopify, Squarespace och många moderna plattformar sker det mesta automatiskt, och lösningen är bara att ladda upp original i rimlig storlek. Kämpar sajten ändå börjar vårt arbete med prestanda och SEO med bilderna. Priser finns på prissidan, eller boka ett kort samtal.
Vanliga frågor
Blir bilderna sämre av att komprimeras?
Inte synbart, om det görs rätt. Moderna format med rimliga kvalitetsinställningar är svåra att skilja från originalet på skärmen. För hård komprimering syns som suddighet eller kantiga partier, och därför ska inställningarna kontrolleras på riktiga sidor.
Räcker det med ett tillägg i WordPress?
Ofta klarar det format och komprimering. Kontrollera att det också skapar flera storlekar, inte lat laddar toppbilden och hanterar bilder som temat eller sidbyggaren lägger in.
Påverkar filnamn och alt-text farten?
Nej, men de påverkar tillgänglighet och bildsök. Skriv alt-texter som beskriver bilden för någon som inte kan se den, och använd beskrivande filnamn.
Hur mycket snabbare blir sajten?
Det beror på hur tunga bilderna är i dag. En sida byggd på råa kamerafiler kan förändras dramatiskt, medan en redan optimerad sida förändras lite. PageSpeed Insights före och efter ger det ärliga svaret.
Ta reda på vad som gör sidorna långsamma
Skicka er webbadress. På 15 minuter säger vi om bilderna är problemet och vad en åtgärd innebär.
Boka ett kostnadsfritt 15-minuterssamtal