Bildoptimering - Laddtider.se

Bilder utgör i genomsnitt hälften av en webbsidas totala överföringsstorlek. Korrekt format, komprimering och laddningsteknik kan reducera bildrelaterad datatransfer med 50–70 procent utan synlig kvalitetsförlust.

Moderna bildformat

JPEG och PNG är väletablerade men tekniskt föråldrade. Nyare format erbjuder samma visuella kvalitet vid väsentligt lägre filstorlek.

Format	Typisk besparing jämfört med JPEG	Webbläsarstöd	Användningsområde
WebP	25–35 %	Alla moderna webbläsare	Fotografier och grafik (brett stöd)
AVIF	40–50 %	Chrome, Firefox, Safari 16.4+	Fotografier med hög komprimering
SVG	—	Alla webbläsare	Ikoner, logotyper, illustrationer

Elementet <picture> gör det möjligt att servera AVIF till webbläsare som stöder det, med WebP och JPEG som fallback:

<picture>
  <source srcset="bild.avif" type="image/avif">
  <source srcset="bild.webp" type="image/webp">
  <img src="bild.jpg" alt="Beskrivning" width="800" height="450">
</picture>

Bildformat i praktiken: plattformen avgör

Vilka format som stöds beror på CMS-plattformen. WordPress genererar responsiva bilder med srcset automatiskt sedan version 4.4, men saknar AVIF-stöd utan tillägg — plugins som ShortPixel och Imagify konverterar uppladdade bilder till WebP och AVIF i bakgrunden. Sitevision och Optimizely hanterar bildoptimering centralt via sina SaaS-plattformar, men kvalitetsnivån och formatstödet varierar mellan installationer.

En observation från arbetet med svenska sajter: bildoptimering är nödvändig men sällan den mest avgörande åtgärden för LCP. Under arbetet med Laddtider.se hade eliminering av externa fonter och renderingsblockerande resurser större effekt på LCP än bildkomprimering — helt enkelt för att sajten inte hade tunga hero-bilder. Prioritera alltid den flaskhals som syns i Lighthouse-rapporten.

Komprimering

Förstörande komprimering (eng. lossy) reducerar filstorleken genom att ta bort visuell information. Vid kvalitetsnivå 75–85 procent är skillnaden mot originalet i de flesta fall omöjlig att urskilja visuellt. Förlustfri komprimering (eng. lossless) behåller all information och lämpar sig för grafik och ikoner.

Verktyg: Squoosh (webbaserat, Google), Sharp (Node.js), ImageMagick (kommandorad). Många CMS hanterar komprimering automatiskt vid uppladdning.

Bild-CDN: automatisk optimering

Ett bild-CDN hanterar formatomvandling, storleksanpassning och kvalitetsstyrning automatiskt via URL-parametrar — utan att redaktören behöver tänka på det. Tjänster som Cloudinary och Imgix levererar rätt format (WebP, AVIF) baserat på webbläsaren, rätt storlek baserat på srcset-parametrar och optimal komprimering per bild.

Fördelen är störst för sajter med stora bildbibliotek — e-handel, nyhetsmedier, kommunsajter med bildarkiv. Kostnaden är en löpande avgift per transformation och bandbredd, men besparingen i både prestanda och redaktionell tid är påtaglig.

Responsiva bilder

Attributen srcset och sizes gör det möjligt att servera anpassade bildstorlekar baserat på skärmbredd. En bild som visas 400 pixlar bred på en mobilskärm bör inte levereras i 1 200 pixlars upplösning – skillnaden i filstorlek kan vara tre till fyra gånger.

<img
  src="bild-800.webp"
  srcset="bild-400.webp 400w, bild-800.webp 800w, bild-1200.webp 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
  alt="Beskrivning"
  width="1200"
  height="675"
>

Fördröjd laddning (lazy loading)

Bilder utanför viewporten vid sidladdning bör laddas först när användaren scrollar till dem. Attributet loading="lazy" hanterar detta utan JavaScript:

<img src="bild.webp" alt="Beskrivning" loading="lazy" width="800" height="450">

Undantag: LCP-elementet – den största synliga bilden – ska alltid laddas omedelbart med fetchpriority="high". Fördröjd laddning av LCP-bilden försämrar laddningshastigheten direkt.

Dimensioner och layoutstabilitet

Attributen width och height – eller CSS-egenskapen aspect-ratio – gör det möjligt för webbläsaren att reservera utrymme innan bilden laddats. Utan dimensioner orsakar bilden layoutförskjutning (CLS) när den renderas.

Sammanfattning

Använd WebP som standardformat; AVIF där webbläsarstöd finns
Komprimera med kvalitet 75–85 procent för fotografier
Servera responsiva bilder med srcset och sizes
Aktivera loading="lazy" för bilder utanför viewporten
Förladda LCP-bilden med <link rel="preload">
Ange dimensioner på alla bildelement
Använd SVG för ikoner och logotyper
Överväg bild-CDN för sajter med stora bildbibliotek