Sök  
Onsdag, 12 Juni 2013

Bästa filformaten för bilder på webben

Pixlar eller vektorer, GIF, JPEG eller PNG - vilket filformat ska jag använda och när? Svaret beror både på vad det är för typ av bild och var du ska använda den. Här går vi igenom grunderna.

Pixel- eller vektorgrafik?

Det finns två olika typer av bildgrafik, pixlar och vektorer.

Fotografier är uppbyggda av pixlar
Ett foto är uppbyggt av pixlar, som är små fyrkantiga punkter. En pixel är alltid lika stor och en större bild har därför fler pixlar och en mindre bild har färre pixlar. Nedan visas en bild uppbyggd av pixlar, och en del av bilden förstorad så att man kan se pixlarna med blotta ögat.

Ett foto är uppbyggt av pixlar

Den första bilden nedan består av 16 pixlar. Om vi förminskar bilden till hälften försvinner varannan pixel, resultatet blir bild två. Om vi sedan förstorar bilden till det dubbla igen fördubblas antalet pixlar, datorn fyller i varannan pixel. Men datorn vet ju inte vilken färg det ska vara, utan gissar och väljer den färg som ligger närmast mellan de två färgerna. Resultatet blir som bild tre.

Pixlar

Med det här exemplet är det lätt att förstå varför det går bra att förminska en bild utan att den förlorar i kvalité, men om du däremot förstorar en bild är det lätt att den blir suddig och "pixlig".

(Pixelbaserade bilder kallas även ibland för bitmapsbilder, men det är egentligen ett format för att lagra bilder i pixelformat. Läs mer om Bitmap här)

Vektorer är matematiskt uträknade punkter
Vektorgrafik består av matematiskt uträknade linjer, kurvor och punkter, så kallade vektorer. De bildar tillsammans olika objekt som sedan fylls med en färg. Om bilden förstoras blir linjerna mellan punkterna längre, men det blir inte fler antal punkter eller linjer. Detta gör att bilden behåller samma kvalité oavsett hur mycket du förstorar eller förminskar bilden. Nedan syns tre cirklar i vektorgrafik, en linje sammanbunden av fyra punkter definierar varje cirkel.

Vektorgrafik

Vektorgrafik är bra för logotyper, geometriska former och diagram. Vektorgrafik fungerar i normala fall inte på webben. Om du har en bild i vektorformat som du vill använda på din webbsida måste du först spara om den till ett format som fungerar på webben.

GIF, JPEG eller PNG?

En bild kan sparas i olika filformat. Det finns en mängd olika format, vissa fungerar för pixelgrafik, andra för vektorgrafik. Det finns tre olika filformat som fungerar på webben, GIF, JPEG och PNG, de är alla tre pixelbaserade format.

GIF
Formatet GIF fungerar utmärkt för logotyper och grafiska element med raka linjer och få färger eftersom bilden behålls precis som den ser ut när man sparar den. GIF tillåter dock endast ett begränsat antal färger i varje bild (max 256 stycken). Det gör att GIF inte fungerar så bra för fotografier då de ofta innehåller tusentals färger.

GIF kan hantera genomskinlighet, om du till exempel har en logotyp som du vill ha genomskinlig bakgrund på i stället för en vit ruta runtom. Du måste dock ställa in mot vilken färg den ska ligga. Om du till exempel sparar en logotyp med genomskinlig bakgrund som ska ligga mot vitt, och sedan lägger in den på en webbsida med mörk bakgrund, kommer det se ut som den har ljusa kanter.

JPEG
(Skrivs även JPG) En JPEG-fil kan innehålla tusentals färger och fungerar därför bra för fotografier. Ett foto från en digitalkamera eller en mobiltelefon är oftast i JPEG-format från början. När man sparar en fil i JPEG så tar den dock bort viss färginformation för att göra filen mindre, den "smälter ihop" färger med liknande färger som finns runtomkring, ungefär som i den blå och röda bilden ovan. Detta gör att grafiska element får sämre kvalité när man sparar dem i JPEG. En tunn svart linje mot vit bakgrund skulle till exempel bli grå och suddig.

PNG
PNG fungerar bra för både logotyper och foton, den räknar ut vad som finns i bilden och anpassar sedan filformatet efter det. Ett foto som sparas som en PNG blir dock ofta något tyngre än om du sparade det som JPEG.

En fördel med PNG är att de hanterar genomskinlighet på ett bra sätt. Om du sparar en bild med genomskinlig bakgrund fungerar den lika bra oavsett vilken bakgrundsfärg du lägger bilden mot.

Sammanfattning:
  • GIF lämpar sig bäst för att spara logotyper, grafiska element och tabeller. Kan hantera genomskinlighet.
  • JPEG fungerar bäst för fotografier
  • PNG fungerar för både logotyper och fotografier. PNG hanterar även genomskinlighet på ett bra sätt

Läs mer om pixel- och vektorgrafik här
Lär mer om olika filformat här
Skrivet av Frida kl. 09:32

Dela inlägget med andra:
X
Vi använder cookies för att ge dig den bästa upplevelsen av vår webbplats. Genom att fortsätta använda webbplatsen godkänner du detta. Läs mer