Afbeelding formats. Afbeeldingen zijn een makkelijke manier om wat variatie op je pagina te creëren. Ze vullen 60% van het internet, dus het is vrij aannemelijk dat jij er ook een aantal op je website hebt staan. Waarschijnlijk denk je bij het plaatsen alleen na over de vraag of je afbeelding past bij je content. Maar wist je dat er meer komt kijken bij zo’n simpele afbeelding? In dit artikel vertel ik je meer over afbeelding management en optimalisatie.
Afbeelding formats: wat zijn de verschillen?
Er zijn veel afbeelding formats waarin je jouw afbeeldingen kan exporteren. In dit artikel bespreek ik de meest gebruikte types: JPEG, PNG, GIF en SVG. Elk van deze formats heeft zijn eigen eigenschappen.
Waarom is het belangrijk om de basics te weten over file types? Een afbeelding in een verkeerd of onjuist format op je website plaatsen kan de laadtijd van je pagina drastisch verlagen. Een no-go met een oog op SEO. Wat zijn de verschillen en welke formats zijn het meest geschikt voor jouw website?
JPEG format
JPEG (of JPG) staat voor Joint Photographic Expert Groups. Het is een veelgebruikt format. Een 24-bit format om precies te zijn. Dit type format kan 16.8 miljoen kleuren weergeven. Dit is ook een van de redenen dat het veel wordt gebruikt voor fotografie. Over het algemeen is de file size van een JPEG afbeelding standaard al redelijk klein.
JPEG slaat data van de afbeelding “lossy” op. Wanneer je een JPEG afbeelding compressed (meestal om de file size nog meer te verkleinen), verliest de afbeelding een aantal details om de file size kleiner te maken. Hoe meer je de afbeelding compressed, hoe meer details er verloren gaan. Dit geeft je complete vrijheid in de hoeveelheid compressie die je aanbrengt op de afbeelding. Je wilt natuurlijk een zo klein mogelijke file size (met een oog op SEO), maar ook dat de afbeelding niet (erg) afwijkt van het origineel.
GIF format
GIF staat voor Graphics Interchange Format. Een vrij oud format. GIF afbeeldingen ondersteunen tot 256 kleuren. Het wordt dan ook weinig tot niet gebruikt voor fotografie of afbeeldingen met veel kleur.
GIF slaat data van de afbeelding “lossless” op. Dus compressie kan worden uitgevoerd zonder dat de kwaliteit van de afbeelding hierdoor omlaag gaat.
GIF was langen tijd het enige format dat transparantie ondersteunde. Maar na de komst van PNG en SVG is er vrijwel nog maar één reden om GIF te gebruiken als format: animatie. GIF ondersteund namelijk geanimeerde/bewegende afbeeldingen.
PNG format
PNG staat voor Portable Network Graphics. Dit format is specifiek ontworpen voor het web.
PNG combineert de beste aspecten van JPEG en GIF. Het komt in twee formats: PNG-8 en PNG-24. Het verschil hiertussen is het aantal kleuren dat wordt ondersteund. PNG-8 ondersteund 256 kleuren. PNG-24 ondersteund er miljoenen. De laatste is dan ook geschikt voor fotografie of afbeeldingen met veel kleur. PNG ondersteund net als GIF ook transparantie. Dit doet het zelfs nog beter.
PNG slaat de data van de afbeelding ook “lossless” op. Dit in combinatie met de vele kleuren resulteert vaak in een grote file size. Het is dan ook aan te raden om alleen PNG afbeeldingen te gebruiken wanneer de kwaliteit van de afbeelding belangrijker is dan de file size.
SVG format
SVG staat voor Scalable Vector Graphics. Het is een vector format. SVG is een van de meest uitgebreide formats. Het speciale aan SVG is dat de afbeelding (in tegenstelling tot JPEG, GIF en PNG) compleet is opgebouwd uit HTML code. Het is dus niet afhankelijk van pixels.
Omdat het een vector format is kan de afbeelding zo groot of klein worden weergeven als nodig zonder dat er kwaliteit verloren gaat.
De file size van SVG wordt niet bepaald door de grootte van de afbeelding, maar door de complexiteit van de afbeelding. Over het algemeen is de file size van SVG graphics veel kleiner dan die van JPEG, GIF of PNG. SVG ondersteund ook animatie.
Er zijn ook nadelen aan SVG. Dit format kan het best worden gebruikt voor logos, icons of andere simpele graphics die bestaan uit lijnen en vormen. Het is niet ideaal voor grote afbeeldingen.
Conclusie
Nu je meer weet over de verschillen tussen de meest populaire formats, is het aan jou om per afbeelding te bepalen in welk format je hem op jouw website plaatst. Hier nog even alle belangrijke punten op een rij:
JPEG
- 16.8 miljoen kleuren
- Aan te raden voor afbeeldingen met veel kleur
- “Lossy” data opslag; kwaliteitsverlies bij compressie
- Over het algemeen een kleine file size
GIF
- 256 kleuren (zeer weinig)
- Aan te raden voor afbeeldingen met simpele animatie
- “Lossless” data opslag; geen kwaliteitsverlies bij compressie
- Ondersteund animatie
- Ondersteund transparantie
PNG
- PNG-8: 256 kleuren (zeer weinig)
- PNG-24: miljoenen kleuren
- “Lossless” data opslag; geen kwaliteitsverlies bij compressie
- Ondersteund transparantie
- Over het algemeen een grote file size
SVG
- Vector format; niet afhankelijk van pixels
- Aan te raden voor logos, icons en andere simple graphics met lijnen en vormen
- Schaalbaar zonder kwaliteitsverlies
- Ondersteund animatie
- Ondersteund transparantie
- Over het algemeen een zeer kleine file size