Vilka bildformat är egentligen optimala för webben och vad är det för skillnad?
Datorer och mobila enheter som mobiltelefon eller Ipad kan ”läsa” bilder i olika format. Så länge du har bilderna på din enhet, i filer på din dator eller i din telefon, så är är det inga större bekymmer. Problemet uppstår när du ska ha ut bilden på internet, exempelvis ladda upp den på en webbsida eller skicka den i ett mail. Då vill du att bilden ska vara så lätt som möjligt.
Du bör använda JPG eller JEPG på webben.
Är det någon skillnad på JPG och JPEG? Nej, det är samma sak. JPG är egentligen bara en förkortning på JPEG. Förkortningen står för Joint Photographic Experts Group och är det vanligaste bildformatet för webben.
Det är ett komprimerat bildformat vilket betyder att kvalitén minskas genom att pixlarna grupperas som leder till att mindre data krävs för att ”rita” ut bilden. Det i sin tur gör bilden lättare, att den inte blir så tung, för webben att ladda upp. Du bör få ner tyngden på dina bilder till 100-150 kb för att din webbsida inte ska bli för långsam. Har du väldigt många bilder på din webbsida bör de ligga under 100 kb per bild. Försök att dra ner tyngden på din bild så pass mycket utan att bilden börjar bli pixlig och suddig. Använder du Photoshop kan du dra ner bildkvalitén till ungefär 50 %. Använder du Canva kan du dra ner till mellan 50-60 % innan du sparar dem.
En bra sak att komma ihåg är att varje gång du sparar ner samma bild så förlorar din JPG-fil information och försämrar kvalitén ytterligare. Om du vet att du kommer ändra i din bild flera gånger så spara ner ditt original i PNG, när du är nöjd med bilden så sparar du ner den i JPG och laddar ner den till din webbsida.
Plus: Använd JPG när du vill ha lätta bilder utan att förlora för mycket kvalitét och som inte tynger ner din webbsida
Minus: Du kan inte skapa JPG med transparenta bakgrunder. Förminskar du JPG för mycket förlorar du information som försvinner från bilden = lossy-komprimering.
PNG - perfekt för logotyper på webben
Bildformatet PNG är en förkortning på Portable Network Graphic. PNG kan hantera ca 16 miljoner färger, vilket gör filformatet unikt. Detta bildformat bör enbart användas på logotyper när det kommer till webbsidor. Det beror på att filformatet kan bli väldigt stort men fördelen är att du kan skapa logotyper med transparent bakgrund.
PNG är en rasterfil vilket innebär att de är uppbyggda av ett fast antal färgpixlar. Därför fungerar de bra för detaljrika foton och grafik.
Plus: Du får en mycket mer detaljerad bild är en JPG-bild. En PNG bild tappar ingen data om den komprimeras.
Minus: Filstorleken är mycket större än JPG vilket medför att din webbsida kommer bli slöare för dina besökare på din webbsida. Med en slö webbsida riskerar du att dina besökare lämnar.
Vill du komprimera din PNG bild kan du med fördel köra den genom detta program: Compress PNG
GIF - för animationer
GIF är en förkortning på Graphics Interchange Format och formatet stöder animationer på webben. Du har antagligen sett giffar på Sociala medier. På Facebook kan du exempelvis lägga till en GIF i din kommentar. GIF är inte ett videoformat utan du lägger ihop ett antal bildrutor som sedan spelas upp automatiskt utan att du behöver trycka på en playknapp som om det vore en video.
Plus: Enda filformatet som stöder animering och har relativt små filstorlekar.
Minus: GIF-formatet kan enbart innehålla 256 färger vilket innebär att bilderna kan se ”korniga” eller ”pixliga” ut.
SVG
SVG är en förkortning på Scalable Vector Graphics och är egentligen inget bildformat. Det är ett dokumentformat som HTML, det betyder att SVG består av en snutt kod som talar om för webbläsaren hur bilden ska se ut. Du kan dessutom öppna SVG i vilken textredigerare du vill.
SVG är vektorgrafik och består alltså inte av pixlar i olika färger som bygger upp bilden utan SVG består av matematiska formler och därför kan ”bilden” skalas upp och ner hur som helst utan att tappa någon kvalité.
Plus: Du kan skala upp och ner utan att tappa någon kvalité vilket betyder att din bild ser alltid bra ut oavsett bildskärmens upplösning.
Minus: Är bilden väldigt detaljrik så kommer bilden bli väldigt tung. WordPress tillåter inte SVG-filer i sitt mediaibliotek eftersom bilden består av kod och är därför sårbar för hackare som kan lägga in oönskad skadlig kod som sedan hamnar på webbsidan.
Webp - det nya filformatet för webben (Bonus)
WebP är ett nytt filformat som är utvecklat av Google. Dessa ger betydligt mindre filstorlekar men behåller samma kvalité som en JPG och PNG bild. WebP stöder också transparenta bakgrunder, precis som PNG och animering som GIF.
Filformatet kan ersätta och komprimera JPG, PNG, GIF till ungefär 25 % mindre bilder utan att förlora kvalité.
Plus: Du behöver enbart fundera på ett enda filformat för webben.
Minus: Alla webbläsare stöder inte WebP ännu.
