Bildformat på webben

Mål

Efter kapitlet ska du kunna...

• känna igen vanliga bildformat
• välja format efter innehåll och användning
• förklara skillnaden mellan pixelbild och vektorbild

Två bildtyper

Raster och vektor

Pixelbild

Zooma in på hundens vänstra öga

Zoom: 1×Återställ position

Zooma med reglaget och dra sedan bilden med mus eller touch. Vid hög förstoring syns de enskilda pixlarna.

Vektorbild

Zooma i en specialbyggd SVG

Zoom: 1×Återställ position

Zooma med reglaget och dra sedan bilden till en tunn linje, kurva eller bokstav. Kanterna fortsätter i princip att vara skarpa.

JPEG/JPG

Fotografier med många färger

• Komprimerar fotografier effektivt.
• Använder förstörande komprimering.
• För hård komprimering kan ge artefakter och förlorade detaljer.
• Stöder inte transparens.

PNG

Skarpa detaljer och transparens

• Passar grafik med skarpa kanter.
• Passar skärmbilder.
• Stöder transparent bakgrund.
• Kan bli tungt för stora fotografier.

WebP

Modernt och flexibelt

• Ger ofta mindre filer än JPEG och PNG.
• Kan användas för fotografier.
• Stöder transparens och animationer.
• Är ofta ett bra standardval när projektets stöd och verktyg fungerar.

AVIF

Mycket effektiv komprimering

• Kan ge mycket små filer med hög kvalitet.
• Passar särskilt fotografier.
• Kan vara långsammare att skapa.
• Alla arbetsflöden hanterar inte formatet lika smidigt.

Testa alltid resultatet.

SVG

Skalbar enkel grafik

• Passar logotyper, ikoner och diagram.
• Är vektorbaserat.
• Kan skrivas direkt som kod.
• Passar inte vanliga fotografier.

GIF

Ett äldre animationsformat

• Användes tidigare mycket för enkla animationer.
• Är sällan bästa valet i nya projekt.
• WebP, video eller andra moderna format ger ofta bättre kvalitet och mindre filer.

Komprimering

Gör filen mindre

Jämför alltid kvalitet och filstorlek.

Transparens

Genomskinliga delar

Transparens är användbart när grafik ska ligga ovanpå olika bakgrunder.

Jämförelse

Typ och transparens

Fotografi

Flera möjliga format

• JPEG är ett etablerat äldre fotoval.
• WebP och AVIF är normalt att föredra för rasterbilder på webben idag.
• I den här kursen använder vi WebP.
• Jämför alltid kvalitet, filstorlek och stöd.

WebP eller AVIF?

Kursens val: WebP

I mer avancerade projekt kan båda formaten användas. Valet beror på kvalitet, filstorlek, kodning och stöd.

Logotyp eller ikon

Välj skalbarhet eller pixelgrafik

• SVG passar enkel grafik som ska skalas.
• PNG och WebP kan användas när pixelbild och transparens behövs.

Interaktiv formatväljare

Vad ska bilden användas till?

Testa själv

Jämför samma bild

1. Öppna samma bild i Squoosh.
2. Testa JPEG, WebP och AVIF.
3. Jämför vid liknande kvalitet.
4. Kontrollera filstorleken.
5. Zooma in och leta efter förlorade detaljer eller artefakter.

Var syns skillnaden?

Titta på känsliga bildytor

• Jämn himmel
• Hudtoner
• Mjuka färgövergångar
• Skarpa kanter och liten text

En rörig bild kan dölja komprimeringsfel.

Webbläsarstöd

Kontrollera nyare format

Nyare format kan ge små filer, men projektets webbläsare och verktyg måste kunna hantera dem.

Can I Use visar stöd för olika format i webbläsare.

Stöd är en del av formatvalet.

Inget format vinner alltid

Välj efter situationen

• Vad innehåller bilden?
• Hur viktig är filstorleken?
• Behövs transparens?
• Vilken kvalitet krävs?
• Vilket webbläsarstöd behövs?
• Hur ska bilden användas?

Sammanfattning

Kom ihåg

• JPEG, PNG, WebP och AVIF är rasterformat.
• SVG är vektorbaserat och skalbart.
• JPEG passar ofta foto men saknar transparens.
• PNG passar skarpa detaljer och transparens.
• WebP och AVIF kan ge små filer med bra kvalitet.
• Formatet ska väljas efter bildens uppgift.