Ska jag ladda upp bilden i full upplösning och låta hemsidan skala ner den?

Nej. Webbläsaren måste ändå hämta hela filen innan den kan visa den nedskalade versionen. Besökaren betalar alltså för alla pixlar men ser bara en bråkdel. Skala ner innan uppladdning.

Varför ser min nedskalade bild suddig ut?

Antagligen för att den skalats med en enkel metod. Bra omskalning använder algoritmer som Lanczos, som bevarar skärpa i kanter och text. Vårt storleksverktyg använder Lanczos3.

Hur räknar jag för retinaskärmar?

Dubbla det mått spalten har i CSS-pixlar. Ska bilden visas 800 pixlar bred på en modern telefon eller laptop, spara den 1600 pixlar bred. Mer än så ger ingen synlig vinst.

Spelar bildstorlek roll för Google?

Ja, indirekt men tydligt. Stora bilder gör sidan långsam, och laddningstid är en rankingfaktor via Core Web Vitals. Bilden ovanför vikningen är oftast det som avgör måttet Largest Contentful Paint.

Vilken bildstorlek ska du använda på hemsidan?

Konkreta pixelmått för de vanligaste placeringarna, plus varför en 4000 pixlar bred bild i en 800 pixlar bred spalt skadar både hastighet och ranking.

Publicerad10 augusti 2026

Den vanligaste orsaken till en långsam hemsida är inte kod, hosting eller webbplattform. Det är bilder som är fyra gånger större än de behöver vara.

Grundprincipen

En bild ska vara ungefär dubbelt så bred i pixlar som den yta den visas på. Dubbelt för att moderna skärmar packar två fysiska bildpunkter per CSS-pixel, vilket är därför text ser skarp ut på en telefon.

Visas bilden 600 pixlar bred i layouten sparar du den alltså 1200 pixlar bred. Mer än så ger ingen synlig skillnad, bara längre laddningstid.

Konkreta mått

Placering	Bredd att spara
Hero som fyller skärmbredden	1920 px
Innehållsbild i en normal textspalt	1200–1600 px
Bild i två- eller trespaltsrutnät	800 px
Miniatyr i en lista	400 px
Produktbild i webbutik	1200 px
Logotyp	400 px, eller SVG om du har den
Blogginläggets omslagsbild	1200 px
Delningsbild för sociala medier	1200 × 630 px
Profilbild	400 × 400 px

Höjden räknar du inte ut själv. Ange bredden och låt proportionerna följa med, annars blir bilden ihoptryckt.

Varför det inte räcker att låta sidan skala

Ett vanligt resonemang är att bilden ändå visas liten, så vad spelar det för roll hur stor filen är?

Det spelar roll för att webbläsaren måste ladda ner hela filen först. En bild på 4000 pixlar som visas 800 pixlar bred kostar besökaren precis lika mycket data som om den visats i full storlek. Skillnaden är bara att alla pixlar kastas bort efter nedladdningen.

På en mobil med dålig täckning är det skillnaden mellan en sida som laddar och en besökare som ger upp.

Ordningen som ger bäst resultat

Skala först. Ner till rätt pixelmått med Ändra storlek. Detta är den enskilt största besparingen, eftersom filstorleken följer ytan. Halva bredden ger ungefär en fjärdedel så stor fil.
Konvertera sedan. Till WebP med Konvertera bild. Ytterligare ungefär 30 procent jämfört med JPG, utan synlig skillnad.
Komprimera sist, om det behövs. Kvalitetsnivå 75–80 räcker för nästan allt på skärm.

Gör du det i den ordningen går en bild direkt från kameran typiskt från 6 MB till under 150 kB, utan att någon ser skillnaden på skärmen.

Två saker som ofta glöms

Ange bredd och höjd i koden. Utan dem vet inte webbläsaren hur mycket plats bilden ska ta, och innehållet hoppar när den laddar. Det mäts av Google som Cumulative Layout Shift och drar ner betyget.

Ladda bilder under vikningen lat. Attributet loading="lazy" gör att bilder längre ner på sidan hämtas först när besökaren närmar sig dem. Sätt det inte på den översta bilden, som du tvärtom vill ha så snabbt som möjligt.

Om metadata

En bild från en telefon eller systemkamera innehåller EXIF-data: kameramodell, inställningar, tidpunkt och ofta GPS-koordinater. Det är sällan något du vill publicera tillsammans med en bild på ditt hem eller ditt företag.

Våra bildverktyg bygger upp bilden på nytt från pixeldata, vilket gör att all metadata försvinner på köpet. Det sparar dessutom några kilobyte per fil.

Vanliga frågor

Ska jag ladda upp bilden i full upplösning och låta hemsidan skala ner den?: Nej. Webbläsaren måste ändå hämta hela filen innan den kan visa den nedskalade versionen. Besökaren betalar alltså för alla pixlar men ser bara en bråkdel. Skala ner innan uppladdning.
Varför ser min nedskalade bild suddig ut?: Antagligen för att den skalats med en enkel metod. Bra omskalning använder algoritmer som Lanczos, som bevarar skärpa i kanter och text. Vårt storleksverktyg använder Lanczos3.
Hur räknar jag för retinaskärmar?: Dubbla det mått spalten har i CSS-pixlar. Ska bilden visas 800 pixlar bred på en modern telefon eller laptop, spara den 1600 pixlar bred. Mer än så ger ingen synlig vinst.
Spelar bildstorlek roll för Google?: Ja, indirekt men tydligt. Stora bilder gör sidan långsam, och laddningstid är en rankingfaktor via Core Web Vitals. Bilden ovanför vikningen är oftast det som avgör måttet Largest Contentful Paint.