Soorten afbeeldingen
png, gif, jpg, en...?
Er zijn heel veel soorten afbeeldingen. Je kan ze normaal herkennen aan de extensie. Dat is het stukje bestandsnaam dat na de punt komt. Bijvoorbeeld in afbeelding.jpg is ‘jpg’ de extensie.
De verschillende soorten afbeelding hebben vooral te maken met compressie. Dat is een manier om alle pixels van een beeld zo klein mogelijk op te slaan. Elk soort afbeeldingen doet dat op een andere manier. Elk soort afbeeldingen heeft dan ook eigen voor- en nadelen. De details hoef je niet te kennen, maar het is wel handig dat je weet welk soort afbeelding wanneer het beste geschikt is.
We zetten de verschillende soorten afbeelding even op een rijtje.
| soort | voorbeeld |
|---|---|
| jpg | 
|
| gif | 
|
| png | 
|
jpeg
Jpeg wordt vooral gebruikt voor foto’s en andere afbeeldingen die geen scherpe kleurvlakken hebben. De compressie van jpeg zorgt er namelijk voor dat scherpe lijnen en volle kleuren ‘vuil’ en vager worden. Bij foto’s zie je dat niet.
Je maakt jpegs met een fotobewerkingsprogramma als Gimp. De meeste digitale fototoestellen slaan hun foto’s ook meteen op als jpeg. Om die op je website te gebruiken, maak je ze best eerst wel kleiner.
gif
Dit is het oudste soort afbeeldingen voor het web. Een gif kan maximum 256 kleuren bevatten. Dat merk je vooral als je kleurrijke foto’s als gif wil opslaan. Een gif kan transparant zijn, maar elke pixel is ofwel helemaal onzichtbaar ofwel helemaal zichtbaar. Daardoor zie je soms kartelranden.
Het grootste voordeel van gifs is dat je gif-animaties kan maken. Die zijn meestal wel heel erg groot (in megabytes), dus je houdt ze best klein en kort.
Je maakt animated gifs online of met een programma als Gimp.
Animated gifs zijn vaak heel erg groot. Als je er zelf maakt, let je dus best op dat ze niet te groot worden (in kilo- of megabytes). Je kan ook heel veel kant-en-klare gifs vinden op Giphy
png
Dit is de ‘modernste’ veelgebruikte soort afbeeldingen voor het web. png’s kunnen een transparante achtergrond hebben, zelfs gedeeltelijk doorschijnend. Het belangrijkste nadeel aan png is dat je er geen animatie in kan stoppen.
Je maakt png’s met een fotobewerkingsprogramma als Gimp. Online kan je bijvoorbeeld Pixlr gebruiken.
svg
SVG hoort niet helemaal thuis in dit lijstje, want het is een vectorieel soort afbeelding. Dat betekent dat een svg afbeelding niet bestaat uit pixels, maar uit lijnen en punten. Dat betekent dat je een svg-afbeelding zo groot kan maken als je wil, zonder dat je pixels begint te zien. Voor eenvoudige vormen, zoals logo’s, is svg meestal ook erg klein.
SVG is eigenlijk ook code, die lijkt op HTML . Je kan svg ook meteen in je website als code schrijven. De details daarvan gaan we hier niet uitleggen, maar hier is een voorbeeld:
SVG-afbeeldingen maak je in een programma als Inkscape of Illustrator.