Waarom bestaan er zoveel afbeeldingsformaten?

Een afbeelding lijkt misschien eenvoudig: een verzameling kleuren en vormen die samen een beeld vormen. Maar de manier waarop computers dat beeld bewaren, is doorheen de jaren sterk geëvolueerd.

De eerste digitale afbeeldingsformaten ontstonden in een tijd waarin opslagruimte duur was, computers weinig geheugen hadden en internetverbindingen traag waren. Ontwikkelaars zochten manieren om afbeeldingen efficiënt te bewaren en tussen verschillende programma’s uit te wisselen. Later kwamen daar nieuwe eisen bij: meer kleuren, transparantie, animatie, professionele drukkwaliteit en steeds hogere schermresoluties.

Niet ieder formaat probeerde hetzelfde probleem op te lossen. GIF werd populair voor eenvoudige webafbeeldingen en animaties. JPEG richtte zich op efficiënte opslag van foto’s. PNG bood een alternatief met verliesvrije compressie en transparantie. SVG maakte het mogelijk om vormen en lijnen onafhankelijk van de resolutie te beschrijven.

Vandaag draait de ontwikkeling van moderne formaten zoals WebP en AVIF vooral om een betere verhouding tussen bestandsgrootte en beeldkwaliteit. Dat is belangrijk omdat websites steeds meer visuele content bevatten, terwijl bezoekers verwachten dat pagina’s onmiddellijk laden.

Daarbij spelen ook compatibiliteit, bestaande software, technische standaarden en historische keuzes een rol. Een nieuw formaat vervangt zijn voorgangers dus niet zomaar. Het moet ook ondersteund worden door browsers, besturingssystemen, ontwerpprogramma’s en publicatieplatformen.

Eerst het verschil tussen raster en vector

Voordat we afzonderlijke afbeeldingsformaten vergelijken, moeten we twee fundamenteel verschillende manieren begrijpen waarop een afbeelding kan worden opgebouwd.

Rasterafbeeldingen: opgebouwd uit pixels

Een rasterafbeelding bestaat uit een raster van pixels. Iedere pixel heeft een kleurwaarde en samen vormen ze het volledige beeld. Foto’s zijn vrijwel altijd rasterafbeeldingen, omdat ze miljoenen subtiele kleurverschillen en details bevatten.

Het nadeel? Een rasterafbeelding heeft een bepaalde resolutie. Vergroot je een kleine afbeelding sterk, dan worden de afzonderlijke pixels of de gevolgen van het opschalen zichtbaar. Het resultaat kan onscherp worden.

JPG, PNG, WebP, AVIF, GIF, BMP en TIFF zijn voorbeelden van rasterformaten.

Vectorafbeeldingen: opgebouwd uit vormen en berekeningen

Een vectorafbeelding wordt niet primair opgeslagen als een vast raster van pixels, maar als lijnen, punten, curves en vormen. Software berekent hoe die elementen moeten worden weergegeven.

Daardoor kun je een geschikt vectorbestand vrijwel onbeperkt vergroten zonder dat de geometrische vormen hun scherpte verliezen. Dat maakt vectorafbeeldingen ideaal voor logo’s, iconen, pictogrammen en illustraties.

SVG is een bekend vectorformaat voor websites. Ook EPS en AI kunnen vectorinformatie bevatten, al zijn dat andere soorten bestanden met andere toepassingen.

Een belangrijk detail: niet ieder bestand met een vectorgerichte extensie bevat uitsluitend vectoren. Sommige documenten kunnen ook rasterafbeeldingen bevatten.

Lossy en lossless: waarom is de ene afbeelding kleiner dan de andere?

Een tweede belangrijk verschil zit in de manier waarop afbeeldingsformaten hun gegevens comprimeren. Compressie zorgt ervoor dat een afbeelding minder opslagruimte nodig heeft, maar niet iedere compressietechniek werkt op dezelfde manier.

Lossy: kleinere bestanden met mogelijk kwaliteitsverlies

Bij lossy compressie wordt een deel van de oorspronkelijke beeldinformatie weggelaten om het bestand kleiner te maken. De techniek probeert vooral informatie te verwijderen die voor het menselijk oog minder opvalt.

Dat werkt bijzonder goed bij foto’s. Een afbeelding kan daardoor aanzienlijk kleiner worden zonder dat je bij normaal gebruik onmiddellijk kwaliteitsverlies ziet. Bij te sterke compressie kunnen wel onscherpte, blokvorming of andere compressieartefacten ontstaan.

JPEG is het bekendste voorbeeld. Ook WebP en AVIF kunnen met kwaliteitsverlies comprimeren.

Let wel op wanneer je een afbeelding herhaaldelijk opnieuw opslaat met lossy compressie. Daarbij kan extra kwaliteitsverlies ontstaan. Bewaar daarom bij voorkeur ook een origineel bronbestand.

Lossless: beeldinformatie behouden

Bij lossless compressie blijft de oorspronkelijke pixelinformatie behouden. De afbeelding kan na het uitpakken exact worden gereconstrueerd, zonder verlies door de compressie zelf.

Dat is interessant voor screenshots, technische afbeeldingen, grafische elementen met scherpe randen en beelden die later nog nauwkeurig bewerkt moeten worden.

PNG is een bekend verliesvrij formaat. Maar ook WebP, AVIF en TIFF kunnen, afhankelijk van de gekozen instellingen of codering, verliesvrije opslag ondersteunen.

Lossless betekent overigens niet automatisch dat een afbeelding er beter uitziet. Een goed gecomprimeerde foto in JPEG of AVIF kan visueel uitstekend zijn en tegelijk veel minder ruimte innemen dan een verliesvrij bestand.

De belangrijkste afbeeldingsformaten uitgelegd

Welke formaten kom je vandaag het vaakst tegen? En waarom zou je het ene boven het andere verkiezen?

JPG en JPEG: de klassieker voor foto’s

JPEG ontstond uit het werk van de Joint Photographic Experts Group, de groep waaraan het formaat zijn naam dankt. De JPEG-standaard werd begin jaren negentig gepubliceerd en groeide uit tot een van de belangrijkste standaarden voor digitale fotografie.

JPG en JPEG verwijzen in de praktijk doorgaans naar hetzelfde afbeeldingsformaat. De kortere extensie .jpg werd onder andere populair door oudere systemen die bestandsnamen beperkten tot drie tekens na de punt.

JPEG is bijzonder geschikt voor foto’s met veel kleuren, details en vloeiende overgangen. Het formaat ondersteunt doorgaans geen transparantie en gebruikt in zijn klassieke vorm compressie met kwaliteitsverlies.

De grote troef blijft de compatibiliteit. Vrijwel ieder apparaat, programma en platform kan met JPEG overweg. Voor websites zijn er ondertussen vaak efficiëntere alternatieven, maar JPEG is allesbehalve verdwenen.

PNG: scherp, verliesvrij en transparant

PNG staat voor Portable Network Graphics en werd in de jaren negentig ontwikkeld als een open alternatief voor bestaande bitmapformaten, waaronder GIF.

PNG ondersteunt verliesvrije compressie en kan transparante delen bevatten, inclusief gedeeltelijke transparantie. Daardoor is het bijzonder bruikbaar voor screenshots, illustraties, grafieken en afbeeldingen met tekst of scherpe contouren.

Voor grote foto’s is PNG doorgaans minder efficiënt dan moderne formaten die met kwaliteitsverlies comprimeren. Een foto die als JPEG of WebP relatief klein is, kan als PNG aanzienlijk groter uitvallen.

Dat betekent niet dat PNG achterhaald is. Het blijft een uitstekende keuze wanneer exacte pixelinformatie of brede compatibiliteit met transparantie belangrijk is.

WebP: ontwikkeld voor efficiënte webafbeeldingen

Google introduceerde WebP in 2010 als een afbeeldingsformaat dat specifiek interessant is voor gebruik op het web. Het ondersteunt zowel lossy als lossless compressie, transparantie en animatie.

Die veelzijdigheid is een belangrijk voordeel. Waar vroeger verschillende formaten nodig waren voor foto’s, transparante afbeeldingen en eenvoudige animaties, kan WebP meerdere van die toepassingen combineren.

WebP levert bij vergelijkbare visuele kwaliteit vaak kleinere bestanden op dan oudere alternatieven. Hoe groot de winst is, hangt af van de afbeelding, de encoder en de gekozen instellingen.

Voor veel moderne websites is WebP een bijzonder praktische standaardkeuze. De browserondersteuning is breed en het formaat wordt door veel tools en contentmanagementsystemen ondersteund.

AVIF: moderne compressie met hoge efficiëntie

AVIF staat voor AV1 Image File Format en werd ontwikkeld binnen de Alliance for Open Media. Het gebruikt beeldcodering gebaseerd op AV1-technologie en is ontworpen om afbeeldingen efficiënt op te slaan.

AVIF kan uitstekende resultaten behalen bij lage bestandsgroottes. Het ondersteunt onder meer transparantie, hoge kleurdieptes, HDR en zowel compressie met als zonder kwaliteitsverlies.

Voor fotografie en andere complexe beelden kan AVIF bij vergelijkbare kwaliteit kleiner uitvallen dan JPEG of WebP. Maar dat is geen absolute regel. De resultaten verschillen per afbeelding en compressie-instelling.

Ook het verwerken en coderen van AVIF-bestanden kan meer rekenwerk vragen. Voor websites is het daarom verstandig om niet blindelings alles naar AVIF om te zetten, maar de uiteindelijke kwaliteit en bestandsgrootte te vergelijken.

SVG: de ideale keuze voor schaalbare grafische elementen

SVG staat voor Scalable Vector Graphics en is een door het W3C gestandaardiseerd vectorformaat dat op XML is gebaseerd.

In plaats van een afbeelding pixel voor pixel te beschrijven, kan SVG vormen, lijnen, kleuren en tekst als gestructureerde gegevens vastleggen. Daardoor blijven geschikte SVG-afbeeldingen scherp op verschillende schermgroottes.

Het formaat is bijzonder interessant voor logo’s, iconen, diagrammen en relatief eenvoudige illustraties. Bovendien kunnen SVG-elementen in bepaalde toepassingen met CSS worden gestyled of geanimeerd.

Voor gewone foto’s is SVG doorgaans geen logische keuze. Een complexe fotografische afbeelding laat zich niet efficiënt vervangen door een verzameling vectorvormen.

Een aandachtspunt bij WordPress: SVG-bestanden kunnen actieve inhoud bevatten. Upload daarom alleen betrouwbare bestanden en zorg voor een veilige verwerking wanneer je SVG-uploads mogelijk maakt.

GIF: een pionier die vooral dankzij animaties bleef bestaan

GIF werd in 1987 geïntroduceerd door CompuServe en behoort tot de oudste afbeeldingsformaten die vandaag nog regelmatig worden gebruikt.

Het formaat kan per beeld maximaal 256 kleuren uit een palet gebruiken. Voor eenvoudige illustraties was dat jarenlang voldoende, maar voor moderne fotografie is die beperking aanzienlijk.

GIF werd vooral beroemd door zijn ondersteuning voor animaties. Bewegende banners, kleine illustraties en later internetmemes maakten het formaat bijzonder herkenbaar.

Voor moderne webanimaties is GIF vaak niet meer de efficiëntste keuze. Animated WebP, APNG of een geschikt videoformaat kan een betere verhouding tussen kwaliteit en bestandsgrootte bieden.

JPEG XL: een veelbelovende opvolger

JPEG XL, herkenbaar aan de extensie .jxl, is een moderner afbeeldingsformaat dat ontwikkeld werd met aandacht voor efficiënte compressie, hoge beeldkwaliteit en geavanceerde fotografische toepassingen.

Het ondersteunt onder andere lossy en lossless compressie, HDR en hoge kleurdieptes. Een bijzondere eigenschap is dat bepaalde bestaande JPEG-bestanden verliesvrij naar JPEG XL kunnen worden omgezet, waarbij de oorspronkelijke JPEG-gegevens later opnieuw gereconstrueerd kunnen worden.

Technisch is JPEG XL interessant, maar voor websites blijft browserondersteuning een belangrijke factor. Het is daarom geen formaat dat je zonder compatibiliteitscontrole als enige bron voor al je websiteafbeeldingen moet gebruiken.

En wat met TIFF, BMP, HEIC, EPS en al die andere formaten?

Naast de bekende webformaten bestaat er een uitgebreide verzameling bestandsformaten voor fotografie, grafisch ontwerp, drukwerk, archivering en gespecialiseerde toepassingen.

Een handig overzicht:

Die tabel toont meteen waarom het weinig zin heeft om één formaat als universele winnaar aan te duiden. Een fotograaf heeft andere eisen dan een webdesigner. Een drukker werkt anders dan een browser. En een bewerkbaar ontwerpbestand heeft een andere functie dan een geoptimaliseerde afbeelding voor een website.

Ook de verschillen tussen sommige extensies zijn subtiel. HEIF is bijvoorbeeld een containerformaat, terwijl HEIC doorgaans verwijst naar HEIF-afbeeldingen met HEVC-codering. PDF kan zowel tekst, vectorinformatie als rasterafbeeldingen bevatten. En TIFF kan verschillende compressietechnieken gebruiken.

Welk afbeeldingsformaat gebruik je het best?

In de praktijk hoef je gelukkig niet al deze formaten te kennen. Voor de meeste ondernemers, marketeers en websitebeheerders volstaan enkele duidelijke richtlijnen.

Voor websites is onze praktische voorkeur meestal eenvoudig: WebP als veelzijdige standaard, AVIF waar het voordeel oplevert, SVG voor geschikte vectorafbeeldingen en JPEG of PNG wanneer daar een duidelijke reden voor is.

Maar het juiste formaat is slechts één onderdeel van een goed geoptimaliseerde afbeelding.

Wat betekenen afbeeldingsformaten voor SEO en websitesnelheid?

Afbeeldingen kunnen een aanzienlijk deel van het totale downloadgewicht van een webpagina uitmaken. Wanneer bezoekers grote afbeeldingen moeten downloaden, kan dat de laadtijd beïnvloeden. Vooral op mobiele toestellen of tragere verbindingen kan het verschil merkbaar zijn.

Daarom is afbeeldingsoptimalisatie een belangrijk onderdeel van technisch webdesign. Moderne formaten kunnen de bestandsgrootte beperken, maar ook de afmetingen, compressie-instellingen en manier waarop afbeeldingen geladen worden, spelen een rol.

Google gebruikt onder andere Core Web Vitals om aspecten van de gebruikerservaring te beoordelen. Een belangrijke metriek is Largest Contentful Paint (LCP): de tijd tot het grootste zichtbare inhoudselement in de viewport wordt weergegeven. Dat element is op veel websites een grote afbeelding.

Een onnodig zwaar hero-beeld kan daardoor de LCP negatief beïnvloeden. Een kleiner, correct gecomprimeerd bestand kan helpen, al spelen ook serverrespons, rendervertraging en andere technische factoren mee.

Met Google Lighthouse kun je onderzoeken waar je website verbeterd kan worden. De officiële web.dev-richtlijnen voor afbeeldingen leggen bovendien uit hoe moderne formaten, responsive afbeeldingen en efficiënte laadtechnieken samenwerken.

Dat is extra relevant op smartphones. Een afbeelding die op een groot desktopscherm wordt getoond, hoeft niet noodzakelijk in dezelfde afmetingen naar een mobiel toestel gestuurd te worden. Meer daarover lees je in ons artikel over mobiele optimalisatie.

Belangrijk om te onthouden: Google geeft geen automatische SEO-bonus omdat een afbeelding AVIF of WebP is. Het voordeel zit vooral in de mogelijke verbetering van laadtijd en gebruikerservaring. Ook de relevantie van de afbeelding, beschrijvende bestandsnamen en zinvolle alt-teksten blijven belangrijk.

Afbeeldingen optimaliseren in WordPress: waar moet je op letten?

Wie met WordPress werkt, hoeft niet iedere afbeelding handmatig in tientallen formaten te exporteren. WordPress kan bij uploads verschillende afbeeldingsgroottes genereren en gebruikt die onder meer om passende versies aan browsers aan te bieden.

Welke formaten je kunt uploaden en welke conversies automatisch beschikbaar zijn, hangt af van je WordPress-versie, serverconfiguratie en eventuele optimalisatieplugins. Ondersteuning voor WebP en AVIF is dus niet hetzelfde als de garantie dat iedere upload automatisch naar het efficiëntste formaat wordt omgezet.

Ook met een optimalisatieplugin blijft het verstandig om de oorspronkelijke bestanden correct aan te leveren.

Enkele praktische aandachtspunten:

• Gebruik realistische afmetingen. Een afbeelding van 6000 pixels breed is meestal overbodig wanneer ze slechts op 800 pixels wordt weergegeven.
• Stem de compressie af op de inhoud. Een foto verdraagt andere instellingen dan een screenshot met kleine tekst.
• Gebruik responsive afbeeldingen. Zo kan de browser een geschikte versie kiezen voor het scherm en de weergavegrootte.
• Vermijd onnodig lazy loading voor belangrijke beelden bovenaan de pagina. Vooral een LCP-afbeelding moet tijdig kunnen laden.
• Controleer de visuele kwaliteit. Een kleiner bestand is geen verbetering als gezichten, producten of belangrijke details zichtbaar achteruitgaan.

Wie verder wil gaan, kan met het HTML-element <picture> meerdere formaten aanbieden. Een browser kan dan bijvoorbeeld AVIF gebruiken wanneer dat ondersteund wordt, en terugvallen op WebP of JPEG wanneer dat nodig is.

De documentatie van MDN over het picture-element legt uit hoe die techniek werkt. In WordPress wordt de concrete implementatie meestal bepaald door het thema, de gebruikte afbeeldingsfuncties of optimalisatiesoftware.

En voor grafisch ontwerp of drukwerk?

Bij grafisch ontwerp liggen de prioriteiten anders dan bij een website. Niet de kleinst mogelijke bestandsgrootte, maar bewerkbaarheid, kleurbeheer, resolutie en correcte aanlevering worden dan belangrijker.

Een logo dat je later wilt aanpassen, bewaar je bij voorkeur in het originele vectorbronbestand. Een JPG van datzelfde logo bevat geen afzonderlijk bewerkbare vormen of tekstlagen meer.

Voor drukwerk kan een drukker een specifieke PDF-standaard, kleurprofiel, afloop of minimale resolutie vereisen. TIFF en andere hoogwaardige rasterformaten kunnen daarbij nuttig zijn, maar de juiste keuze hangt af van het productieproces.

Ook kleurgebruik speelt een rol. Digitale schermen werken doorgaans met RGB-kleurinformatie, terwijl veel drukprocessen gebruikmaken van CMYK. Het afbeeldingsformaat en de kleurruimte zijn twee verschillende zaken. Dat verschil leggen we uitgebreider uit in wat is het verschil tussen RGB en CMYK?.

Het bewaren van goede bronbestanden is bovendien belangrijk voor de toekomst. Een huisstijl wordt gebruikt op websites, sociale media, verpakkingen, drukwerk en allerlei andere toepassingen. Met de juiste bestanden kun je die uitingen consistent houden, zonder telkens opnieuw te moeten beginnen. Lees ook waarom een consistente huisstijl zo belangrijk is.

Het beste afbeeldingsformaat bestaat niet

JPG, PNG, WebP, AVIF, SVG, TIFF, GIF en al die andere formaten bestaan niet toevallig naast elkaar. Ze zijn ontstaan vanuit verschillende technische behoeften en blijven relevant zolang ze een bepaald probleem beter oplossen dan de alternatieven.

Voor moderne websites zijn WebP en AVIF vaak interessante keuzes. SVG blijft bijzonder geschikt voor schaalbare grafische elementen. JPEG en PNG behouden hun waarde dankzij hun brede ondersteuning en specifieke eigenschappen. En in professionele ontwerp- en drukwerkprocessen zijn weer heel andere bestandsformaten nodig.

De belangrijkste les is dan ook niet dat je voortaan alles naar één modern formaat moet converteren. Het juiste afbeeldingsformaat is het formaat dat past bij de inhoud, de toepassing en de technische omgeving.

Een goede website vraagt bovendien meer dan kleine afbeeldingsbestanden. Beeldkwaliteit, snelheid, toegankelijkheid en een doordacht ontwerp moeten samenwerken. Dat is precies waar goed webdesign het verschil maakt.