Welke bestandtypes gebruik ik voor afbeeldingen op het web?

Ontwerp zonder titel (31)

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 of SVG kan je jouw bestand opslaan. Wat zijn de verschillen en welke bestandstypes kan je nu het beste kiezen? 

Bestandstype keuzehulp

Als je geen tijd of zin hebt om het hele artikel te lezen, gebruik dan ondertaande 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).

0x0-smart-fill-85 (62)

Welke bestandtypes zijn er?

Anno 2020 zijn er enorm veel bestandstypes voor afbeeldingen. Ze hebben (of hadden) allemaal hun nut, maar op het web kunnen we deze in 95% van de gevallen beperken tot een 3-tal keuzes. We lijsten de belangrijkste bestandstypes op.

JPG

JPG (of JPEG) is veruit het meest gebruikte bestandsformaat 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 ilustraties of logo's.

Samengevat: 

  • Beste formaat voor foto's
  • Minder geschikt voor logo's of illustraties
  • Ondersteunt geen transparantie
  • Gebruikt lossy compressie
0x0-smart-fill-85 (22)

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
0x0-smart-fill-85 (63)

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 en illustraties of 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
0x0-smart-fill-85 (64)

Veelbelovende bestandstypes in de toekomst

Onderstaande formaten zijn veelbelovend (vooral door hun kleine bestandsgrootte). Echter worden deze nog niet voldoende ondersteund, waardoor we beslissen om deze nog niet te gebruiken. Simpelweg omdat we dan nog steeds een ander bestandsformaat als fallback moeten voorzien, indien de gebruikte browser het bestandsformaat niet kan herkennen.

  • JPEG 2000: verbetering op de JPEG standaard, maar voorlopig enkel ondersteund door Safari
  • JPEG XR: verbetering op de JPEG standaard, enkel ondersteund door Internet Explorer
  • WebP: bestandsformaat ontwikkeld door Google. Dit zorgt voor een betere compressie dan JPEG en voor bestanden die 25 tot 34% kleiner zijn. Kan zowel lossy als lossless gebruikt worden. WebP wordt intussen door de meeste webbrowsers ondersteund en zal hoogstwaarschijnlijk in de komende jaren een belangrijke rol gaan spelen

Verouderde bestandstypes

  • GIF: voor de komst van PNG was GIF de beste keuze voor het tonen van afbeeldingen met een transparante achtergrond. Door het beperkt kleurenpallet 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 tegenwoordig 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 en PNG).

Bestandstypes die niet geschikt zijn voor het web

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 vector-bestanden, 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

Hulp nodig bij de juiste keuze?

Moet jij binnenkort afbeeldingen aanleveren voor jouw nieuwe website? Of wil je graag nieuwe afbeeldingen toevoegen aan jouw huidige website? Met de hulp van bovenstaande richtlijnen, kies jij voortaan steeds de juiste bestandstypes. Twijfel je nog of heb je hulp nodig? Aarzel dan niet om ons te contacteren. Onze developers helpen jou graag bij het maken van de juiste keuze.