Modul 6 · Kapitel 6.2

Optimera bilder

Bilden ska vara tillräckligt bra, men inte större än sidan behöver.

Mål

Efter kapitlet ska du kunna...

anpassa bildens dimensioner till användningen
förklara komprimering och filstorlek
använda loading="lazy"
känna till srcset och sizes

Rätt pixelstorlek

Skicka inte fler pixlar än sidan behöver

Bildfil
4000px bredVisas som
600px bredAnvändaren laddar ändå
hela filen

CSS kan skala bilden visuellt men minskar inte filen som hämtas.

Interaktiva dimensioner

Jämför original och visningsbredd

Bildfilens bredd: 4000pxVisningsbredd: 600px

Visas som 600px

Två betydelser

Vad menas med bildstorlek?

Dimensioner	Filstorlek
Bredd × höjd i pixlar	Kilobyte eller megabyte
Exempel: 1400 × 900px	Exempel: 180 kB

Båda påverkar hur bilden används och hur snabbt den laddas.

Artikelbild

Anpassa originalet till användningen

Bilden visas ungefär 700px bred.
Skapa exempelvis en version som är 700px bred.
En version på 1400px kan behövas för en skärm med hög pixeltäthet.
Originalet på 3000–4000px behöver normalt inte skickas.

Komprimering

Minska filstorleken

JPEG, WebP och AVIF kan exporteras med olika kvalitet.

Högre kvalitet
ofta större filLägre kvalitet
ofta mindre filFör låg kvalitet
synliga fel

För hård komprimering

Tecken på för låg kvalitet

Blockighet
Suddiga detaljer
Konstiga färgkanter
Ojämna färgövergångar

Titta på bilden – kontrollera inte bara filstorleken.

Målet

Inte minsta möjliga fil

För stor fil	För hårt komprimerad
Onödigt långsam laddning	Synligt försämrad bild

Rätt balans: tillräckligt tydlig bild utan onödigt stor fil.

Squoosh

Optimera inför publicering

Ändra format.
Justera kvalitet.
Ändra pixeldimensioner.
Jämför original och optimerad bild.
Kontrollera filstorleken innan du sparar.

Photopea

Redigera bilden först

Beskär bilden.
Ändra bildstorlek.
Justera färger.
Arbeta med lager.
Exportera ett webbanpassat format.

Två verktyg

När passar vilket?

Photopea	Squoosh
När bilden behöver redigeras.	När bilden ska optimeras.
Beskärning, färg och lager.	Format, kvalitet och filstorlek.

Lazy loading

Vänta med bilder längre ner

<img
  src="bild.webp"
  alt="..."
  loading="lazy">

Bilden kan vänta med att laddas tills användaren närmar sig den.

När passar lazy?

Bilder utanför den första vyn

Första vynBilder som syns direkt behöver visas tidigt.

Längre nerBilder kan få loading="lazy".

Vid scrollWebbläsaren laddar när användaren närmar sig.

srcset

Erbjud flera bildfiler

srcset="
  hero-400.webp 400w,
  hero-800.webp 800w,
  hero-1200.webp 1200w
"

400w, 800w och 1200w beskriver filernas bredder.

sizes

Beskriv hur stor bilden visas

sizes="(max-width: 700px) 100vw, 700px"

Upp till 700px viewport: bilden visas över hela viewportens bredd.
Annars visas bilden ungefär 700px bred.

Tillsammans

src, srcset och sizes

<img
  src="hero-800.webp"
  srcset="hero-400.webp 400w,
          hero-800.webp 800w,
          hero-1200.webp 1200w"
  sizes="(max-width: 700px) 100vw, 700px"
  alt="Exempelbild">

Webbläsaren väljer en passande källa.

Interaktiv srcset

Vilken fil passar bredden?

Simulerad visningsbredd: 600px400w · 800w · 1200w

Det här är en förenklad simulering av valet mellan kursens tre bildfiler.

Vald fil: hero-800.webp

Bilddemo

Se riktig laddning i webbläsaren

Kursens separata bilddemo visar:

vilken fil webbläsaren väljer med srcset
vilka bilder som väntar med loading="lazy"

Öppna Network-panelen innan du testar.

Network

Kontrollera vad som faktiskt laddas

Name	Type	Size	Vad du kontrollerar
hero-800.webp	webp	...	Valde webbläsaren rätt källa?
bild-5.webp	webp	...	Laddades den först vid scroll?

Arbetsflöde

Från original till webbsida

Bestäm hur stor bilden ska visas.
Beskär eller redigera vid behov.
Skapa rätt pixeldimensioner.
Välj format och komprimering.
Lägg till lazy loading eller srcset när det behövs.
Kontrollera resultatet i Network.

Sammanfattning

Kom ihåg

Skicka inte större pixeldimensioner än sidan behöver.
Balansera kvalitet mot filstorlek.
loading="lazy" passar bilder längre ner.
srcset erbjuder flera filer.
sizes beskriver visningsbredden.
Network visar vad webbläsaren laddar.