JPG, GIF, PNG, EPS, SVG… välj rätt format till era bilder

Vilka format passar bäst för foton, grafik, tryck och webb? Varför blir bilderna ibland pixliga? Vi hjälper dig att förstå skillnaden mellan de olika formaten och när de ska användas.

Vilka bildformat finns?

Det finns mängder med olika format. I denna artikel väljer vi att fokusera på de vanligaste. Sen om du arbetar med grafik, foto, ritningar med mera så använder du säkert program som har egna format. Sparar du ett projekt i InDesign heter formatet indd, i Illustrator .ai, i Photoshop .psd och så vidare. Men i steg ett så är det främst formaten i den här artikeln som du bör ha koll på.

Pixelbaserat vs vektoriserat

Innan vi går in på de olika formaten vill jag förklara skillnaden mellan när något är pixelbaserat och vektoriserat. Detta är den största skillnaden mellan de olika formaten.

En pixelbaserad bild består av små kvadratiska punkter. Om en bild exempelvis är 500 pixlar bred och 500 pixlar hög består den totalt av 250 000 pixlar som tillsammans skapar bilden. När du förstorar en sådan bild blir den lätt suddig, eller pixlig som vi brukar säga. Den består nämligen fortfarande av samma mängd pixlar.

När någon önskar en bild med hög upplösning menas en bild som oftast är väldigt stor, både till yta och filstorlek då den innehåller många pixlar som tillsammans skapar en bild som ser skarpare ut. Nedan har bilden till vänster fler pixlar vilket gör att den ser bättre ut. Den högra bilden har färre pixlar vilket ger den dess pixliga utseende. Om din bild är i formaten JPG eller PNG så är den pixelbaserad. Dessa format används främst för foton men PNG kan även användas för grafik.

En vektoriserad bild är uppbyggd på ett helt annat sätt. Den består av banor som är matematiskt beräknade. Så när en vektoriserad bild ändras i storlek räknar den om så bilden behåller sina linjer i rätt proportioner och utan att förlora kvalitet. Om din bild är i formaten EPS eller SVG så är den vektoriserad. Dessa format används främst för grafik som exempelvis illustrationer och logotyper.

 

Denna bild är sparad som en PNG med transparent bakgrund, dvs den är pixelbaserad.

 

Denna bild är sparad som en SVG och har också transparent bakgrund, skillnaden är att denna är vektoriserad och ser skarp ut hur stor eller liten den är.

Färger återges också olika beroende på om det är pixlar eller vektoriserat, men det sparar vi till en annan artikel. Nu fokuserar vi på bildformaten och hur de i stora drag skiljer sig åt.

jpg

• Pixelbaserad
• Ej skalbar
• En bild omgjord till JPG minskas i kvalitet då många pixlar plockas bort
• Fördelen med jpg är att filstorlek minskas vilket gör den bra för webben

JPG, eller JPEG, är ett bildformat som främst används för foton inom digital marknadsföring. När ett foto sparas till JPG komprimeras den, det vill säga den förlorar i kvalitet. Samtidigt minskas också filstorleken vilket kan vara bra för exempelvis en webbplats. En webbplats vill vi ska ladda snabbt, så att lägga upp foton på den som inte har så hög filstorlek är bra. Men hur dålig får kvaliteten vara? Det bestämmer du när du sparar om den till JPG. I Photoshop kan du exempelvis bestämma hur mycket bilden ska komprimeras så där gäller det att hitta en lagom nivå. Ibland får man testa sig fram. Men hur kan filstorleken bli mindre? Datorn plockar helt enkelt bort information (pixlar) ur filen så den blir lättare, det är därför kvaliteten också minskar.

gif

• Pixelbaserad
• Ej skalbar
• Begränsad i antalet färger, därför ej lämpligt för foton
• Bäst för enklare grafik på webben
• Kan ha transparent bakgrund
• Kan animeras

GIF är ett pixelbaserat format men också väldigt begränsat i antalet färger vilket gör att det inte lämpar sig för foton utan mer för grafik för webben. Dessutom går det enkelt att animera vilket är uppskattat. Och det är främst för animationer det används idag. Formatet PNG har ersatt GIF när det gäller enklare grafik och där man önskar en transparent bakgrund.

png

• Pixelbaserad
• Ej skalbar
• Bäst för enklare grafik på webben och foton där kvaliteten är viktig
• Kan ha transparent bakgrund
• Uttalas ”ping”

PNG är också ett pixelbaserat format men det komprimerar inte bilden lika hårt när du minskar storleken på den. Så önskar du foton i  bättre kvalitet än vad JPG ger så är PNG ett bra alternativ. Filstorleken är däremot naturligt större vilket gör att man får väga vad som är viktigast från gång till gång. En styrka med PNG är att du kan spara grafik utan bakgrund. Det skapades delvis för att ersätta GIF och det finns två varianter, PNG 8 och PNG 24. PNG 8 har samma färgmängd som GIF medan PNG 24 kan visa miljontals färger.

svg

• Vektoriserad
• Skalbar
• Används för grafik på webben som inte är så detaljrika
• Kan ha transparent bakgrund
• Kräver mer avancerad program för att hantera, ex Illustrator

SVG är egentligen inte ett bildformat utan ett dokumentformat som med kod bestämmer hur en bild kan se ut. Har du skapat vektoriserad grafik i Illustrator kan du exportera den till en SVG och sedan använda den på webben. SVG går även att animera. Vill du ha en skarp logotyp på webbplatsen är SVG att föredra och även all annan vektoriserad grafik som ikoner, illustrationer med mera. Sådant du vill ska kunna förstoras och förminskas i exempelvis en responsiv webbdesign och som inte har allt för många detaljer. Är det för mycket detaljer kan filstorleken bli rätt stor, då kan PNG eller GIF vara att föredra.

eps

• Kan vara både pixelbaserad och vektoriserad
• Skalbar om vektoriserad
• Används främst för grafik och illustrationer som ska tryckas
• Kan ha transparent bakgrund
• Kräver mer avancerad program från Adobe för att hantera, ex Illustrator, Photoshop, InDesign mm.

EPS är ett format som är framtaget av Adobe och det är med deras programvaror du kan öppna en EPS. Bara för att en bild sparas som en EPS så betyder det inte att den är vektoriserad. Har du din logo som en JPG och infogar den i Illustrator eller Photoshop och sedan sparar filen som en EPS så är den fortfarande pixelbaserad. Har du däremot en vektoriserad bild och sparar den som en EPS så är den vektoriserad.  Ofta innehåller då en EPS både en pixelbaserad förhandsvisningsfil och en vektoriserad variant.

Det är vanligt att du av din byrå får er logotyp som en EPS, den är då tryckbar och används i trycksaker men kan också användas för att skapa en SVG till webben.

pdf

• Kan vara både pixelbaserad och vektoriserad
• Skalbar om vektoriserad
• Används främst för grafik och illustrationer som ska tryckas
• Kan ha transparent bakgrund
• Kräver mer avancerad program från Adobe för att hantera, ex Acrobat, Illustrator, Photoshop, InDesign mm.

PDF kanske främst associeras med filer där man läser texter och visuellt visar upp text och bild ihop. Men det går även att använda på samma vis som en EPS, de använder samma teknik. Så du kan spara vektoriserade objekt som en PDF och bevara dess skalbarhet. Ofta görs trycksaker om till en tryckbar PDF innan det skickas till tryckeriet.

raw

• Obehandlat format
• Kan endast skapas i en digital kamera

Raw kallas ibland för digitalt negativ. När bilden fotas i digitalkameran sparas det som RAW, det vill säga precis så som det fotades, helt obehandlat. Om du sedan valt att kameran ska ge dig JPG så gör kameran om bilden till en JPG och lägger på de inställningar du valt på kameran. Sedan tas RAW-filen bort om du inte valt att kameran ska spara den också. Dessa filer är oerhört stora och sparas av många fotografer för att sen bearbetas och sparas om som exempelvis JPG eller TIFF.

Så när ska de olika formaten användas?

Kortfattat kan man säga att JPG används för digitala foton, inte grafik. Till webben är JPG bra när du vill ha snabbladdade foton och du kan själv välja hur mycket du vill komprimera dem, hitta en lagom nivå innan de blir för pixliga.

PNG använder du när du önskar bättre kvalitet på bilderna och det inte gör något att filstorleken är större. PNG fungerar även bra om du önskar bilder eller grafik med transparent bakgrund.

GIF används idag främst vid enkla animeringar i få färger.

SVG använder du på grafik och logotyper på webben där det är viktigt att behålla skärpan och att de kan förstoras och förminskas utan att förlora kvalitet. Du skulle även kunna göra dessa i PNG men då är de inte fullt så skarpa och ej skalbara. SVG gör sig bäst när det är färre färger och värt att komma ihåg är att det fortfarande finns gamla webbläsare och mailklienter som inte kan hantera SVG. Så det är en avvägning att göra här, fråga oss om hjälp om du vill veta mer.