Modul 6
Kap 6.1 - Bildformat på webben
Rätt bildformat gör sidan tydligare, snabbare och lättare att underhålla.
Mål
- Känna igen vanliga bildformat på webben.
- Välja format efter bildens innehåll och användning.
- Förstå skillnaden mellan pixelbilder och vektorbilder.
Pixelbilder och vektorbilder
JPEG, PNG, WebP och AVIF är pixelbilder. De består av många små bildpunkter. SVG är vektorbaserat och passar bra för ikoner, logotyper och enkla illustrationer som ska kunna skalas utan att bli suddiga.
Pixelbilder kallas också rasterbilder. De fungerar bra för fotografier, men om du zoomar in tillräckligt långt ser du pixlarna. Vektorbilder beskriver former med linjer, punkter och ytor. Därför kan en SVG-logotyp skalas upp utan att bli suddig.
Vanliga format
jpgellerjpegpassar ofta för fotografier.pngpassar när bilden behöver transparens eller skarpa detaljer.svgpassar för logotyper, ikoner och enkel grafik.webpochavifkan ge mindre filstorlek med bra kvalitet.
Formatens styrkor
JPEG/JPG
Passar fotografier och stora bilder med många färger. JPEG komprimerar ofta bra, men använder förstörande komprimering. Om du komprimerar för hårt kan bilden få synliga artefakter och detaljer kan försvinna.
PNG
Passar grafik med skarpa kanter, skärmbilder och bilder som behöver transparens. PNG kan bli tungt för stora fotografier, särskilt jämfört med JPEG, WebP eller AVIF.
WebP
Ett modernt format som ofta ger mindre filer än JPEG och PNG. WebP kan användas för fotografier, transparens och animationer. Det är ofta ett bra standardval när webbläsarstöd och verktyg fungerar i projektet.
AVIF
Ett nyare format som kan ge mycket små filer med hög kvalitet, särskilt för fotografier. AVIF kan vara långsammare att skapa och alla arbetsflöden hanterar det inte lika smidigt, så testa alltid resultatet.
SVG
Passar logotyper, ikoner, diagram och enkel grafik. SVG är vektorbaserat och kan även skrivas direkt som kod. Det passar däremot inte för vanliga fotografier.
GIF
GIF användes tidigare mycket för enkla animationer. I nya projekt är det sällan bästa valet. WebP, video eller andra moderna format ger ofta bättre kvalitet och mindre filer.
Komprimering och transparens
Komprimering betyder att filen görs mindre. Förstörande komprimering, till exempel i JPEG, tar bort bildinformation för att minska filstorleken. Förlustfri komprimering försöker minska filen utan att ändra bildens innehåll på samma sätt. I praktiken behöver du ofta jämföra kvalitet och filstorlek i ett verktyg.
Transparens betyder att delar av bilden kan vara genomskinliga. Det är viktigt för till exempel logotyper, ikoner och UI-grafik som ska ligga ovanpå olika bakgrunder. JPEG stöder inte transparens, men PNG, WebP, AVIF och SVG kan göra det.
Jämförelse
| Format | Typ | Styrka | Transparens | Vanlig användning |
|---|---|---|---|---|
| JPEG/JPG | Raster | Bra för fotografier | Nej | Foton, stora bildytor |
| PNG | Raster | Skarpa detaljer och transparens | Ja | Skärmbilder, enkel grafik, logotyper |
| WebP | Raster | Små filer med bra kvalitet | Ja | Fotografier, grafik, animationer |
| AVIF | Raster | Mycket effektiv komprimering | Ja | Fotografier där låg filstorlek är viktig |
| SVG | Vektor | Skalbar utan pixlighet | Ja | Ikoner, logotyper, diagram |
Testa format själv
För att förstå skillnaden behöver du jämföra samma bild i flera format. Använd till exempel Squoosh och testa JPEG, WebP och AVIF med samma målstorlek. Titta både på filstorlek och bildkvalitet. En himmel, hudton eller jämn bakgrund kan avslöja skillnader tydligare än en mycket rörig bild.
Kontrollera också webbläsarstöd när du använder nyare format. Can I Use visar vilka webbläsare som stöder olika format.
Format är ett val
Det finns inget format som alltid är bäst. En produktbild, en ikon och ett stort bakgrundsfoto har olika behov. Välj format efter kvalitet, filstorlek, transparens, webbläsarstöd och hur bilden ska användas.