Kort svar: använd moderna format som WebP eller AVIF, gör bilden inte större i pixlar än den visas på skärmen, och komprimera den. En produktbild behöver sällan vara mer än 100–200 kilobyte. Tunga, okomprimerade bilder är den vanligaste orsaken till att en sajt känns trög.

Varför spelar bildstorleken så stor roll?

När någon öppnar din sajt måste webbläsaren ladda hem allt innehåll, och bilder är nästan alltid det tyngsta. En enda okomprimerad bild från en mobilkamera kan väga 5 megabyte (MB) – lika mycket som hundratals sidor text. På en mobil med sämre uppkoppling betyder det sekunder av väntan, och varje sekund kostar besökare.

Snabbhet är inte bara trevligt, det påverkar din ranking. Google mäter hur snabbt sidan laddar genom något som kallas Core Web Vitals, och tunga bilder drar ner de mätvärdena. En lätt sajt ger alltså både nöjdare besökare och bättre placering i sökresultatet.

Vilket bildformat ska jag använda?

Ett bildformat är sättet bilden sparas på, och det avgör både kvalitet och filstorlek. Här är de du behöver känna till:

  • WebP – modernt format som ger lika fin bild som JPEG men 25–35 procent mindre fil. Fungerar i alla moderna webbläsare. Detta är ditt förstaval idag.
  • AVIF – ännu effektivare än WebP, ofta hälften så stor fil. Stöds av de flesta nya webbläsare. Bra för stora bilder där varje kilobyte räknas.
  • JPEG – det gamla standardformatet för foton. Fungerar överallt, men väger mer. Använd som reserv.
  • PNG – bäst för bilder som behöver genomskinlig bakgrund, till exempel en logotyp. Väger mycket för foton, så undvik det för fotografier.
  • SVG – ett format för logotyper, ikoner och enkel grafik. Det består av kod, inte pixlar, så det förblir knivskarpt i alla storlekar och väger nästan ingenting.

Hur stor ska bilden vara i pixlar?

En pixel är den minsta byggstenen i en digital bild. En vanlig miss är att lägga upp en bild som är 4000 pixlar bred fast den visas i en ruta som bara är 600 pixlar bred. Webbläsaren tvingas då ladda en enorm bild och krympa den – allt det extra är bortkastad laddningstid.

Regeln är enkel: gör bilden ungefär lika stor som den visas, gånger två. Visas bilden i 600 pixlars bredd räcker det med 1200 pixlar (dubbla för att den ska vara skarp även på högupplösta skärmar). Riktvärden:

  • Stor toppbild (hero): 1600–2000 pixlar bred.
  • Produktbild: 800–1200 pixlar bred.
  • Bild i en blogtext: 1000–1200 pixlar bred.
  • Liten miniatyr (thumbnail): 300–500 pixlar bred.

Vad betyder att "komprimera" en bild?

Att komprimera betyder att minska filstorleken genom att ta bort information ögat ändå inte uppfattar. Bra komprimering kan halvera filstorleken utan att du ser någon skillnad. Verktyg som Squoosh (gratis i webbläsaren), TinyPNG eller ImageOptim gör jobbet på sekunder. Sikta på att foton landar under 200 kilobyte (KB) när det går.

Vad är lazy loading?

Lazy loading betyder att bilder längre ner på sidan inte laddas förrän besökaren scrollar dit. Sidan känns då snabbare eftersom bara det som syns laddas direkt. I praktiken läggs attributet loading="lazy" på bilderna – och i moderna webbverktyg sköts det ofta automatiskt. Undantaget är den första stora bilden högst upp, som ska laddas direkt så att sidan inte ser tom ut.

Glöm inte alt-texten

Alt-text är en kort beskrivning av vad bilden föreställer. Den läses upp för synskadade besökare och hjälper Google att förstå bilden. Skriv konkret: "Röd kontorsstol med armstöd" är bättre än "bild1". Det är både tillgänglighet och SEO i en enda liten åtgärd.

En enkel arbetsgång för varje bild

  1. Skala ner bilden till rätt pixelbredd enligt riktvärdena ovan.
  2. Spara som WebP eller AVIF (JPEG som reserv).
  3. Komprimera tills filen är under cirka 200 KB.
  4. Lägg in en beskrivande alt-text.
  5. Låt bilder under första vyn laddas med lazy loading.

Vill du ha en snabb sajt – på riktigt?

Att optimera bilder för hand fungerar, men på en sajt med hundratals produkter blir det ohållbart. På ZORC bygger vi webbplatser och e-handel där bildoptimeringen sker automatiskt: rätt format, rätt storlek och komprimering varje gång du laddar upp en bild. Resultatet är en sajt som laddar snabbt utan att du behöver tänka på det. Vill du veta hur snabb din sajt är idag? Hör av dig till ZORC, så gör vi en kostnadsfri hastighetskoll.