Komprimera och optimera bilder för webben: komplett guide

Tunga bilder är den enskilt vanligaste orsaken till att en webbsida känns långsam. En enda okomprimerad bild från en modern kamera kan väga flera megabyte, och när en sida laddar ett halvdussin sådana blir väntan lång, särskilt på mobil och sämre uppkoppling. Den goda nyheten är att du oftast kan minska filstorleken avsevärt utan att besökaren ser någon skillnad i kvalitet. Den här guiden går igenom stegen från början till slut.

Varför bilder tynger sidan

På de flesta webbsidor står bilderna för den största delen av den data som besökaren måste ladda ner. Text väger nästan ingenting, medan en högupplöst bild snabbt blir hundratals gånger tyngre. Eftersom den största bilden ofta är just det som avgör hur snabbt sidan känns färdig, påverkar bildoptimering direkt måttet LCP (Largest Contentful Paint), ett av Googles Core Web Vitals. Kort sagt: fixar du bilderna får du den största effekten för minst arbete.

Steg 1: Välj rätt format

Formatet avgör hur mycket data en bild kräver. De gamla klassikerna JPEG och PNG fungerar överallt, men de är sällan det effektivaste valet i dag. JPEG passar foton, medan PNG passar grafik med skarpa kanter eller genomskinlighet.

De moderna formaten WebP och AVIF ger normalt tydligt mindre filer vid samma synliga kvalitet, och båda stöds av alla stora webbläsare. AVIF pressar ofta filstorleken hårdast, medan WebP är ett tryggt och brett förstahandsval. Vill du gräva djupare i skillnaderna har vi en egen genomgång i jämförelsen mellan WebP och AVIF. En bra tumregel: använd WebP eller AVIF för foton och behåll PNG bara när du verkligen behöver skarp grafik eller genomskinlighet.

Steg 2: Skala ner till rätt dimensioner

Ett av de vanligaste misstagen är att ladda upp en bild som är mycket större än den yta där den visas. Om en bild aldrig visas bredare än 800 pixlar finns det ingen anledning att servera en fil på 4 000 pixlar. Webbläsaren tvingas då ladda ner all extra data och krympa bilden på plats, vilket bara slösar bandbredd.

Bestäm hur stor bilden faktiskt visas på sidan och skala ner den till den storleken innan du laddar upp. För bilder som ska täcka hela skärmens bredd räcker det oftast långt med runt 1 600 till 2 000 pixlar. Att skala ner rätt är ofta det som ger allra störst besparing.

Steg 3: Komprimera (lossy eller lossless)

När formatet och dimensionerna sitter är det dags för själva komprimeringen. Här finns två principer att hålla isär.

Lossless (förlustfri)

Förlustfri komprimering plockar bort överflödig data utan att ändra en enda pixel. Bilden blir bit för bit identisk med originalet, men filen mindre. Besparingen är blygsammare, men kvaliteten är helt orörd. Det passar när du inte vill kompromissa alls.

Lossy (förstörande)

Förstörande komprimering kastar bort information som ögat ändå har svårt att uppfatta. Det ger mycket mindre filer, och vid måttlig nivå ser de flesta ingen skillnad. Drar du komprimeringen för hårt börjar däremot artefakter synas, som suddiga kanter eller fläckar i jämna ytor. Konsten ligger i att hitta den nivå där filen blir liten men bilden fortfarande ser bra ut. För foton på webben är lämpligt avvägd lossy nästan alltid rätt väg. En grov tumregel är att sikta på under ett par hundra kilobyte för en stor innehållsbild, och klart mindre för mindre element. Men rätt storlek beror på bildens roll och motiv, så låt ögat och mätningen avgöra snarare än en fast siffra.

Steg 4: Konkreta verktyg

Du behöver ingen dyr programvara för att komma igång. Två gratisverktyg räcker långt.

Squoosh körs direkt i webbläsaren och låter dig jämföra original och komprimerad version sida vid sida med ett skjutreglage. Du väljer format, drar i kvalitetsreglaget och ser filstorleken uppdateras i realtid. Det är ett utmärkt sätt att lära sig hur mycket du kan komprimera innan kvaliteten börjar svikta.

TinyPNG är ännu enklare: du drar in dina PNG- eller JPEG-filer och verktyget komprimerar dem automatiskt med smart lossy-komprimering. Det passar bra när du snabbt vill beta av en hög med bilder utan att finjustera varje enskild.

Driver du en WordPress-sajt kan du automatisera hela steget med ett bildplugin. Populära alternativ som Smush, ShortPixel, Imagify och EWWW Image Optimizer komprimerar nya uppladdningar automatiskt, kan konvertera till WebP och gå igenom hela mediebiblioteket i efterhand. Då slipper du tänka på komprimering vid varje enskild bild.

Steg 5: Responsiva bilder med srcset

En besökare på en liten mobilskärm behöver inte samma stora bild som någon på en bred datorskärm. Med attributet srcset kan du erbjuda flera storlekar av samma bild och låta webbläsaren välja den som passar skärmen bäst.

<img
  src="bild-800.webp"
  srcset="bild-400.webp 400w, bild-800.webp 800w, bild-1600.webp 1600w"
  sizes="(max-width: 600px) 100vw, 800px"
  alt="Beskrivande alt-text">

Så laddar en mobil den lilla filen och en stor skärm den stora, utan att någon får mer data än den behöver. I WordPress skapar systemet oftast dessa varianter automatiskt.

Steg 6: Lazy loading

Med lazy loading skjuter webbläsaren upp inläsningen av bilder tills besökaren är på väg att rulla fram till dem. Bilder långt ner på sidan laddas alltså först när de behövs, vilket gör att sidan känns klar snabbare. Det aktiverar du enkelt med attributet loading="lazy" på bildtaggen. Ett undantag: den stora bilden högst upp, som syns direkt, bör du inte lata ladda, eftersom den påverkar hur snabbt sidan uppfattas som färdig.

Praktisk checklista

• Välj rätt format: WebP eller AVIF för foton, PNG bara för skarp grafik och genomskinlighet.
• Skala ner bilden till den storlek den faktiskt visas i.
• Komprimera med lossy för foton, lossless när kvaliteten måste vara orörd.
• Kontrollera resultatet innan du laddar upp, gärna sida vid sida med originalet.
• Servera flera storlekar med srcset för olika skärmar.
• Aktivera loading="lazy" på bilder under första vyn, men inte på den översta.
• Glöm inte beskrivande alt-text för tillgänglighet och sökmotorer.
• På WordPress: låt ett bildplugin sköta komprimering och WebP automatiskt.

Bildoptimering är sällan svårt, men det ger nästan alltid mest tillbaka av allt du kan göra för att snabba upp en sida. Börjar du med de tyngsta bilderna på dina mest besökta sidor märker du effekten snabbast.

Senast faktagranskad: 17 juli 2026