Skrevet af den

Billeder: Hvilket filformat skal du vælge?

Som webredaktør kan det være svært at vide, hvilket filformat man skal gemme sine billeder i. I denne artikel er en gennemgang af de fire mest udbredte filformater til billeder: Jpeg, gif, png og svg.

Digitalt er der primært fire billedeformater, der har relevans: Jpeg, Gif, Png og Svg.

Jpeg: Gode til fotografier i mange farver

Jpeg står for “Joint Photographic Experts Group” og som navnet antyder, er det bedst til at håndtere fotografier og især fotografier med mange farver.

Derfor bør dette format ikke bruges til andet.

Den algoritme der benyttes, når en jpeg-fil genereres, er baseret på, hvordan mennesket ser verden.

Det vil sige, at algoritmen bl.a. søger at gøre fokuspunktet i billedet skarpere (og sløre det øvrige).

Jpeg-filer er gode til bløde farveovergange i lav kontrast, men ikke særligt gode til billeder med meget høj kontrast og skarpe kanter. Jpeg understøtter ikke billeder med gennemsigtighed.

Gif: Optimeret til animationer

Gif står for “Graphics Interchange Format”. Det er et filformat, der blev udviklet tilbage i 1987 og siden opdateret i 1989, så det kunne afspille små animationer.

Dancing BabyDu husker nok websites tilbage fra 90’erne.

Gif er primært velegnet til animationer, og mangler en masse detaljer sammenlignet med de andre formater. Dog supporterer det gennemsigtighed, hvilket dog ikke bliver særligt pænt, hvis billedet er detaljeret.

Gif kan bl.a. kun inkludere 256 farver – jpeg kan have mange millioner.  Og fordi der er så få farver i formatet, vil billeder (og især fotografier) gemt som gif hurtigt se grynede og uskarpe ud.

Det er et format, der ikke bliver brugt så meget mere online, da man med CSS og JavaScript (f.eks. kombineret med png eller svg) kan skabe samme animationer og som fylder væsentligt mindre.

Png: God til gennemsigtighed

Png står for “Portable Network Graphics” og blev i 1996 introduceret som udskiftning af gif.

Der er to forskellige former for png:

Png-8
Optimeret til billeder med få farver. Png-8 har – ligesom gif-filer – kun mulighed for at indeholde 256 farver, og minder generelt meget om gif.

Png-24
Png-24 har ikke nogle restriktioner på, hvor mange farver det kan indeholde. Derudover kan png-24 håndtere transparens og pæne forløb i transparens. Png-filer kan det meste, og kan også næsten hamle op med jpeg-filer hvad angår kvaliteten af fotografier. Dog fylder png-24 mere end jpeg i dette tilfælde. Png-24 er velegnet til logoer, ikoner og andre ligene web-elementer (der dog i dag ofte bygges gennem svg).

Svg: Vektorgrafik der (stort set) ikke fylder noget

AppudviklingSvg er fra 2001 og står for “Scalable Vector Graphics”. Det er baseret på XML frem for pixel dots.

Svg er meget velegnet til ikoner, logoer og andre stregtegninger. Fordelen ved svg er, at det er baseret på vektorgrafik, så man kan ændre størrelsen, uden det har indflydelse på kvaliteten. 

Dette understøtter ingen af de 3 andre formater.

Da svg er baseret på kode (XML) frem for pixels, bliver størrelserne på filerne meget små sammenlignet med png, jpg og gif.

Det har i dog den ulempe, at det som udgangspunkt ikke fungerer i Internet Explorer 8. Derudover vil filen som udgangspunkt vil inkludere data om, hvor filen er genereret, hvilken version af programmet, man bruger mv. Det er dog muligt at slette denne tekst.

Benytter man svg online, kan man farvelægge filen gennem CSS. Det vil sige, at hvis man kan arbejde med en ikonpakke i sort, men nemt farvelægge de enkelte ikoner som ønsket. (her benytter man kommandoen “fill”). 

Hvilket filformat skal du bruge?

De fire omtalte formater har hver sine styrker og svagheder. (Okay, gif har dog primært svagheder).

Er man i tvivl om, hvad man skal vælge som webredaktør, så ty til jpeg eller png-24:

  • Jpeg hvis det er et fotografi i mange farver
  • Png-24 hvis det drejer sig om mindre grafiske elementer logoer og ikoner. 

Som webudvikler kan png-24 i mange tilfælde skiftes ud med svg.