Welke bestandtypes gebruik ik voor afbeeldingen op het web?

Beeldbewerkingsprogramma's zoals Adobe Photoshop en Adobe Illustrator geven enorm veel opties om afbeeldingen op te slaan of te exporteren. Zo klinken JPG en PNG waarschijnlijk al bekend in de oren, maar ook als EPS, SVG of WebP kan je jouw bestand opslaan. Wat zijn de verschillen en welke bestandstypes kies je nu het best?

Als je geen tijd of zin hebt om het hele artikel te lezen, gebruik dan onderstaande keuzehulp om snel te beslissen welk bestandsformaat je het best gebruikt voor je afbeelding.

Hou er rekening mee dat we hier enkel spreken over gebruik op het web, en dus niet voor afdrukken (print).

Er zijn enorm veel bestandstypes voor afbeeldingen. Ze hebben (of hadden) allemaal hun nut, maar op het web kunnen we deze in de meeste gevallen beperken tot een handvol keuzes. We lijsten de belangrijkste bestandstypes op.

JPG

JPG (of JPEG) is nog steeds een van de meest gebruikte bestandsformaten voor afbeeldingen op het web en de beste keuze voor foto's.

JPG-bestanden kunnen enorm hard geoptimaliseerd (en dus gecomprimeerd of verkleind) worden zonder zichtbaar kwaliteitsverlies. Door de compressie gaat er in principe informatie verloren (het is lossy compressie) en wordt de afbeelding minder scherp. Daarom is het niet aangeraden dit bestandstype te gebruiken voor logo's of illustraties. Bij foto's kan er echter enorm veel informatie 'weggehaald' worden, voor er nog maar iets van kwaliteitsverlies zichtbaar wordt.

Ook het feit dat JPG geen transparantie ondersteunt, maakt het minder geschikt voor illustraties of logo's.

Samengevat:

• Beste formaat voor foto's
• Minder geschikt voor logo's of illustraties
• Ondersteunt geen transparantie
• Gebruikt lossy compressie

PNG

PNG wordt vaak aangehaald als 'het beste formaat voor web', maar dit is wat kort door de bocht.

Waar PNG vooral goed in is, zijn afbeeldingen met relatief simpele vormen of weinig kleuren. Denk maar aan logo's of illustraties.

Een andere troef is dat PNG-bestanden transparantie ondersteunen. Dit is bijvoorbeeld handig als je een logo over een andere afbeelding of gekleurde achtergrond wil tonen.

Doordat PNG gebruik maakt van lossless compressie (er gaat geen informatie verloren) is het minder geschikt voor foto's. In foto's zitten meestal veel verschillende kleuren, waardoor de bestandsgrootte snel zal toenemen.

Samengevat:

• Beste voor simpele vormen / weinig kleuren / transparantie
• Minder geschikt voor foto's
• Ondersteunt transparantie
• Gebruikt lossless compressie

SVG

SVG staat voor Scalable Vector Graphics. Dit beschrijft eigenlijk perfect waarvoor het bestandsformaat geschikt is: vectoren tonen in verschillende resoluties (groottes).

SVG-bestanden zijn in principe niet meer dan een reeks wiskundige formules die lijnen, cirkels, vierkanten of meer complexe vormen beschrijven. Hierdoor maakt het niet uit in welke afmetingen de afbeelding getoond wordt, deze kan oneindig veel uitvergroot worden en zal haarscherp blijven. Doordat niet elke aparte pixel wordt opgeslagen maar enkel een formule om de afbeelding op te bouwen, zijn SVG-afbeeldingen extreem klein in bestandsgrootte.

SVG's zijn enorm goed voor logo's, illustraties en iconen (net zoals PNG's). Ook net zoals PNG's ondersteunen ze transparantie.

Waarom dan niet altijd SVG gebruiken in plaats van PNG?
Een vereiste voor het gebruik van SVG is dat de afbeelding opgebouwd is in vectoren. Alles begint dus bij de designer die bij het maken van zijn logo of illustratie rekening moet houden met de beperkingen van vectoren (niet alles kan namelijk zomaar uitgedrukt worden in formules).

Samengevat:

• Beste voor logo's of illustraties
• Niet geschikt voor foto's
• Ondersteunt transparantie
• Gebruikt lossless compressie

WebP

WebP is een bestandsformaat ontwikkeld door Google, en wordt vandaag door alle grote browsers ondersteund. Het zorgt voor een betere compressie dan JPEG, met bestanden die doorgaans 25 tot 34% kleiner zijn bij een gelijkaardige kwaliteit. WebP kan zowel lossy als lossless gebruikt worden, waardoor het inzetbaar is voor zowel foto's als logo's of illustraties, en het ondersteunt daarnaast ook transparantie.

Samengevat:

• Goed voor zowel foto's als illustraties
• Ondersteunt transparantie
• Kan lossy én lossless compressie gebruiken
• Kleinere bestandsgrootte dan JPEG bij gelijke kwaliteit

AVIF

AVIF is een nieuwer bestandsformaat, gebaseerd op de AV1-videocodec, dat nog verder gaat dan WebP op vlak van compressie. Bij een gelijkaardige visuele kwaliteit levert AVIF doorgaans nog kleinere bestanden op dan WebP. Het wordt intussen ondersteund door de meeste moderne browsers, al ligt de ondersteuning nog niet helemaal op het niveau van WebP of JPG.

Samengevat:

• Beste compressie van alle huidige webformaten
• Ondersteunt transparantie
• Iets minder breed ondersteund dan WebP, controleer dit voor kritieke toepassingen

Onderstaand formaat is veelbelovend, maar wordt nog niet voldoende breed ondersteund om het zonder fallback te gebruiken:

• JPEG 2000: verbetering op de JPEG-standaard, maar wordt voorlopig enkel door een beperkt aantal browsers ondersteund.

• GIF: voor de komst van PNG was GIF de beste keuze voor het tonen van afbeeldingen met een transparante achtergrond. Door het beperkt kleurenpalet levert het echter minder scherpe afbeeldingen op. Een voordeel van GIF over PNG is dat het ook gebruikt kan worden voor animaties. Jammer genoeg worden bestanden dan al snel enorm groot en blijf je nog steeds met de andere beperkingen van GIF-bestanden zitten. Daarom is het vandaag vaak beter om animaties te tonen als video's. Een andere optie zijn SVG-animaties, maar deze zijn dan weer complex om te maken.
• BMP: BMP's (ook wel bekend als 'bitmap'-bestanden) zijn een verouderd formaat dat door zijn grote bestanden niet geschikt is voor gebruik op het web, simpelweg omdat er betere alternatieven zijn (zoals JPG, PNG en WebP).
• JPEG XR: dit was een verbetering op de JPEG-standaard, maar werd enkel door verouderde, intussen stopgezette browsers ondersteund, en is vandaag niet meer relevant.

Hoewel volgende bestandsformaten zeker hun nut hebben, zijn ze niet geschikt voor gebruik op het web.

• PSD: voor Photoshop-bestanden
• TIFF: ouder formaat voor Photoshop-bestanden, enkel geschikt voor print
• EPS: ouder formaat voor het opslaan van vectorbestanden, enkel geschikt voor print
• PDF: vector bestandsformaat, enkel geschikt voor print
• AI: voor Adobe Illustrator-bestanden, gebaseerd op EPS en PDF, niet geschikt voor het web
• RAW: bestanden gegenereerd door digitale camera's, niet geschikt voor gebruik op het web