Minska bildstorleken utan synlig kvalitetsförlust

Din webbplats tar sex sekunder att ladda. Din e-post studsar tillbaka för att bilagan är för stor. Ditt inlägg på sociala medier ser bra ut men tog en evighet att ladda upp. I nästan alla fall är boven densamma: bilder som är mycket större än de behöver vara.

Den goda nyheten är att du kan minska bilders filstorlek dramatiskt — ofta med 70 % eller mer — utan någon synlig skillnad i kvalitet. Nyckeln är att förstå vad som gör bilder stora i grunden.

Upplösning vs. filstorlek: Den viktiga skillnaden

Många blandar ihop bildupplösning med filstorlek. De hänger ihop men är separata saker.

Upplösning är antalet pixlar i en bild, mätt som bredd × höjd. En 4 000 × 3 000 pixlars bild har 12 miljoner pixlar (12 megapixlar). Upplösningen avgör hur stor en bild kan visas och fortfarande se skarp ut.

Filstorlek är hur många byte bilden tar upp på disk. Det beror på upplösning men också på formatet, komprimeringsnivån och bildens innehåll.

Här är varför den här skillnaden spelar roll: en 4 000 × 3 000 bild som visas som 800 × 600 på en webbplats slösar bort mer än 90 % av sina pixlar. Webbläsaren måste ladda ner alla 12 miljoner pixlar och sedan kassera de flesta för att visa bilden i ett mindre format. Att ändra storlek på bilden till de faktiska visningsdimensionerna innan uppladdning kan minska filstorleken med 80 % eller mer, utan någon synlig skillnad.

Förstå bildformat

Det format du väljer har enorm inverkan på filstorleken.

JPG (JPEG)

Universalstandarden för fotografier. JPG använder förstörande komprimering, vilket innebär att en del bilddata tas bort på ett sätt som det mänskliga ögat sannolikt inte märker. Vid kvalitetsnivå 80–85 % ser JPG-bilder identiska ut med originalet men är en bråkdel av storleken.

Bäst för: Foton, bilder med toningar, verklighetstrogna bilder.

PNG

PNG använder förlustfri komprimering: ingen data kasseras. Det gör det idealiskt för bilder som kräver exakt pixelåtergivning, som logotyper, skärmdumpar och grafik med text. PNG-filer är dock betydligt större än JPG-filer för fotografiskt innehåll.

Bäst för: Logotyper, skärmdumpar, grafik med text, bilder som behöver transparens.

WebP

Utvecklat av Google erbjuder WebP både förstörande och förlustfri komprimering. Det ger filer som är 25–35 % mindre än JPG vid likvärdig kvalitet och stöder transparens (till skillnad från JPG). Alla moderna webbläsare stöder WebP.

Bäst för: Webbbilder av alla slag. Det bästa allmänna webbformatet som finns idag.

Hur bildkomprimering fungerar

All bildkomprimering utnyttjar samma grundprincip: det mänskliga ögat kan inte uppfatta varje detalj som en kamera fångar. Komprimeringsalgoritmer identifierar och tar bort den information du aldrig märker saknas.

Förstörande komprimering utnyttjar specifikt:

• Känslighet för färg. Mänskliga ögon är känsligare för ljushetsvariationer än färgvariationer. Komprimering minskar färgprecisionen mer aggressivt.
• Högfrekvent detalj. Fina texturer och subtila toningar kan förenklas utan märkbar effekt.
• Redundans. Områden med liknande färg (en blå himmel, en vit vägg) kan representeras mer effektivt.

Tricket är att hitta rätt komprimeringsnivå. För lite komprimering slösar bandbredd. För mycket komprimering introducerar synliga artefakter: suddigheter, randeffekter och blockiga områden.

Praktiska regler för olika användningsfall

För webbplatser

• Maximal bredd: 1 920 pixlar för helbreddsbild, 800–1 200 pixlar för innehållsbilder
• Format: WebP med JPG som reservalternativ
• Kvalitet: 75–85 %
• Målstorlek: Under 200 KB per bild, under 100 KB för miniatyrbilder

För e-postbilagor

• Maximal bredd: 1 200–1 600 pixlar
• Format: JPG (universell kompatibilitet)
• Kvalitet: 80–85 %
• Målstorlek: Under 500 KB per bild, totala bilagor under 10 MB

För sociala medier

Varje plattform har sina egna optimala dimensioner, men som en generell regel:

• Instagram: 1 080 × 1 080 (kvadrat), 1 080 × 1 350 (stående)
• Facebook: 1 200 × 630 för länkförhandsvisningar
• LinkedIn: 1 200 × 627
• Format: JPG eller PNG
• Kvalitet: 85–90 % (plattformar komprimerar om dina bilder, så att börja med lite högre kvalitet är klokt)

De vanligaste misstagen

1. Ladda upp kamerans originalfiler

Ett råfoto från en modern smartphone är 3–8 MB. En DSLR-råfil kan vara 25–50 MB. Att ladda upp dessa direkt till en webbplats är den vanligaste orsaken till långsamma sidor.

2. Använda PNG för foton

PNG är fel format för fotografier. Ett foto sparat som PNG kan vara 5–10 gånger större än samma foto sparat som JPG vid kvalitet 85 %, utan synlig skillnad.

3. Inte ändra storlek innan komprimering

Att komprimera en 4 000 pixlar bred bild ned till 200 KB är mycket mindre effektivt än att först ändra storlek till 1 200 pixlar bred och sedan komprimera. Ändra storlek först, komprimera sedan.

4. Komprimera flera gånger

Varje gång du öppnar en JPG, redigerar den och sparar den igen komprimeras den om. Över flera redigerings-sparacykler försämras kvaliteten märkbart. Arbeta alltid från originalet och komprimera bara den slutliga versionen.

Effekten av bildoptimering

Att optimera bilder handlar inte bara om bekvämlighet. För webbplatser påverkar det direkt:

• Sidladdningshastighet. Snabbare sidor rankas högre i Googles sökresultat.
• Användarupplevelse. 53 % av mobila användare lämnar sidor som tar längre än 3 sekunder att ladda.
• Bandbreddskostnader. För webbplatser med hög trafik kan bildoptimering spara betydande hostingkostnader.
• Tillgänglighet. Användare med långsamma anslutningar eller dataplaner med begränsat utrymme gynnas enormt.

Redo att optimera dina bilder? Följ vår steg-för-steg-guide: Så komprimerar du en bild. Det är gratis, fungerar i webbläsaren och låter dig se kvalitetsskillnaden innan du laddar ner.