Complete gids voor afbeeldingsformaten: PNG, JPG, WebP, AVIF en SVG

JPG / JPEG  Joint Photographic Experts Group

JPG werd in 1992 bedacht door de Joint Photographic Experts Group, met één doel: foto's efficiënt comprimeren. Het algoritme verdeelt het beeld in blokken van 8×8 pixels en past de discrete cosinustransformatie (DCT) toe om elk blok als een combinatie van frequenties weer te geven — waarbij het de sterk wisselende frequenties weggooit die het oog het minst opmerkt. Dat levert lossy compressie op: een deel van de oorspronkelijke data verdwijnt definitief.

Waarom het zo goed werkt bij foto's: in foto's verlopen kleuren zacht en geleidelijk — precies het soort informatie dat JPG het efficiëntst comprimeert. Een landschapsfoto als JPG op 80% kwaliteit kan tien keer kleiner zijn dan hetzelfde bestand zonder compressie, zonder dat je op het scherm verschil ziet.

Waar het misgaat: het blokalgoritme van 8×8 veroorzaakt zichtbare artefacten bij scherpe randen, tekst en egale kleurvlakken. Een zwart logo op wit levert als JPG grijzige vegen rond de letters op — de beruchte JPEG-artefacten. Daarnaast kent JPG geen alfakanaal, dus geen transparantie.

Wanneer gebruiken: foto's voor web, drukwerk en e-mail. Productfoto's, banners, blogbeelden. Kortom: elk beeld met veel kleurvariatie dat geen transparantie nodig heeft.

Wanneer niet: logo's, iconen, schermafbeeldingen met tekst, beeld met een transparante achtergrond, illustraties met scherpe randen en bestanden die je nog vaak opnieuw gaat bewerken en opslaan.

PNG  Portable Network Graphics

PNG verscheen in 1996 als alternatief voor GIF, dat toen patentbeperkingen kende, en comprimeert lossless: er gaat geen data verloren. Het DEFLATE-algoritme (een combinatie van LZ77 en huffmancodering) herschikt de pixeldata efficiënter zonder iets weg te gooien. Daardoor is het uitgepakte beeld altijd pixelgelijk aan het origineel, hoe vaak je het bestand ook opslaat.

Het alfakanaal: naast RGB heeft PNG een vierde kanaal per pixel — het alfakanaal, dat de dekking regelt van 0 (volledig transparant) tot 255 (volledig dekkend). Zo krijg je volledige transparantie, halftransparantie en zacht uitgevloeide randen op elke achtergrond.

PNG-8, PNG-24 en PNG-32: PNG-8 werkt met een palet van maximaal 256 kleuren (zoals GIF) en is ideaal voor eenvoudige iconen en beeld met weinig kleuren. PNG-24 gebruikt de volledige kleurruimte (16 miljoen) zonder transparantie. PNG-32 combineert de volledige kleurruimte met een alfakanaal — dat is wat mensen bedoelen met "transparante PNG".

Waar het misgaat: bij foto's is PNG inefficiënt — een foto als PNG kan drie tot tien keer groter uitvallen dan dezelfde foto als JPG. Lossless compressie kan de kleurvariatie van fotografie nu eenmaal niet efficiënt wegwerken.

Wanneer gebruiken: logo's en iconen met transparante achtergrond, schermafbeeldingen met tekst, infographics, beeld met egale kleurvlakken, digitale kunst met scherpe randen en alles wat je nog moet kunnen bewerken zonder verlies te stapelen.

Wanneer niet: foto's voor het web (kies JPG of WebP), situaties waarin het bestand licht moet zijn en e-mailmarketing, waar JPG breder wordt ondersteund.

WebP  Web Picture format

WebP is door Google ontwikkeld op basis van de videocodec VP8 en verscheen in 2010 als beoogde universele opvolger van JPG en PNG op het web. Het kent twee modi: lossy (gebaseerd op VP8, voor foto's) en lossless (met een eigen algoritme, voor graphics). In de lossy-modus gebruikt WebP blokvoorspelling en adaptieve transformatie — geavanceerder dan de DCT van JPG — en levert zo bij gelijke kwaliteit bestanden op die 25 tot 35% kleiner zijn.

Het beste van twee werelden: WebP vervangt niet alleen JPG voor foto's (lossy), maar ook PNG voor logo's en graphics (lossless met alfakanaal), doorgaans met bestanden die 20 tot 30% kleiner zijn. Het is het enige formaat dat beide toepassingen verenigt en op allebei efficiënter is.

Ondersteuning in 2026: Chrome, Firefox, Safari (vanaf 14), Edge en Opera ondersteunen het, samen goed voor meer dan 97% van de webgebruikers. De grote uitzonderingen zijn oudere e-mailclients (vooral Outlook) en verouderde bedrijfssystemen met IE11.

Wanneer gebruiken: vrijwel elk beeld voor het web — foto's, logo's, iconen, banners. Het is het aanbevolen standaardformaat voor uploads op moderne sites. Google PageSpeed Insights raadt WebP expliciet aan zodra het JPG of PNG aantreft waar WebP kon.

Wanneer niet: e-mailmarketing (wisselende ondersteuning), drukwerk, YouTube-thumbnails (die WebP niet accepteren) en downloads die mensen lokaal op oudere systemen openen.

AVIF  AV1 Image File Format

AVIF komt voort uit de videocodec AV1, ontwikkeld door de Alliance for Open Media (met onder meer Google, Mozilla, Netflix en Amazon). Het is het nieuwste en technisch meest geavanceerde beeldformaat voor het web: bestanden zijn bij gelijke kwaliteit vaak 20 tot 50% kleiner dan WebP, vooral bij lagere kwaliteitsinstellingen, waar WebP zichtbaar artefacten begint te tonen.

Waarom het zo efficiënt is: AV1 gebruikt veel geavanceerdere compressietechnieken dan de VP8 achter WebP — met intraframe-voorspelling, transformaties van variabele grootte en loopfilters. Het resultaat is vooral indrukwekkend bij complexe foto's en subtiele kleurverlopen.

Het probleem van het encoderen: omzetten naar AVIF duurt fors langer dan naar WebP — een AVIF-encoder kan er tien tot honderd keer zo lang over doen bij hetzelfde beeld. Bij sites met veel afbeeldingen of buildprocessen die beeldvarianten live genereren, telt die rekentijd echt mee.

Ondersteuning in 2026: Chrome 85+, Firefox 93+, Safari 16+. IE11 en de meeste e-mailclients ondersteunen het niet. De dekking blijft achter bij WebP, dus lever AVIF uit met WebP en JPG als terugval via de <picture>-tag.

Wanneer gebruiken: op drukbezochte sites waar elke bespaarde KB je bandbreedtekosten drukt, bij beeld van hoge kwaliteit waar je het verschil met WebP echt ziet, en in nieuwe projecten waarvan het buildproces AVIF al ondersteunt.

Wanneer niet: als encodeertijd kritiek is, of in de converter van ImageTools (de AVIF-encoder via de Canvas-API in browsers is niet geoptimaliseerd en kan bestanden opleveren die groter zijn dan het origineel — gebruik daarvoor serverside gereedschap zoals sharp).

SVG  Scalable Vector Graphics

SVG verschilt fundamenteel van alle andere formaten in deze lijst. In plaats van pixels bewaart het wiskundige instructies in XML — "teken een rechthoek van 200 breed op positie X,Y in kleur #3ecf8e". De browser of het programma berekent de pixels live, op de resolutie die nodig is. Een SVG van 5 KB staat er net zo goed op als favicon van 16 px als op een billboard van twintig meter.

Waarom het ideaal is voor logo's en iconen: die bestaan uit geometrische vormen — rechthoeken, cirkels, bézierkrommen, tekst. SVG beschrijft precies die vormen, zonder informatieverlies. Een logo als PNG van 200 px wordt blokkerig op 2000 px; hetzelfde logo als SVG blijft op elk formaat perfect.

Aanpasbaar met CSS en JavaScript: inline SVG-elementen in je HTML stuur je aan als elk ander DOM-element — kleur via CSS, animatie via CSS-transitions of JS, interactie via muisgebeurtenissen. Het is HTML, maar dan voor beeld.

Waar het misgaat: foto's en beeld met veel kleuren en complexe verlopen leveren gigantische, onwerkbare SVG's op — en dan nog zou de kwaliteit onderdoen voor JPG, want SVG is niet gemaakt om fotografische data weer te geven.

Wanneer gebruiken: logo's, iconen, geometrische illustraties, datagrafieken, kaarten, elk beeld dat op meerdere formaten scherp moet blijven en interactieve iconen in webinterfaces.

Wanneer niet: foto's, beeld met veel kleuren en textuur, social media (de meeste platforms accepteren geen SVG) en e-mailmarketing.

GIF  Graphics Interchange Format

GIF stamt uit 1987, van CompuServe, en comprimeert lossless met het LZW-algoritme (Lempel-Ziv-Welch) — met één fundamentele beperking: maximaal 256 kleuren per frame. Elke pixel verwijst naar een plek in een palet van hooguit 256 kleuren, wat het formaat inefficiënt maakt voor foto's (met miljoenen kleuren) maar prima voor eenvoudig beeld met weinig kleuren.

Waarom GIF nog altijd bestaat: het is het enige breed ondersteunde rasterformaat dat animaties met meerdere frames van huis uit aankan — en juist dat hield het decennia in leven nadat technisch betere formaten waren verschenen. Geanimeerde WebP en AVIF zijn efficiënter, maar de brede ondersteuning en de culturele status van de gif houden hem overeind.

Beperkte transparantie: GIF kent per frame maar één transparante kleur — geen halftransparantie, geen anti-aliasing. Daardoor krijg je kartelige randen rond gebogen vormen, zeker op een gekleurde achtergrond.

Wanneer gebruiken: eenvoudige animaties op platforms die geen geanimeerde WebP of MP4 ondersteunen, geanimeerde iconen met weinig kleuren, en memes en socialmediacontent waar de gif nu eenmaal bij hoort.

Wanneer niet: stilstaande foto's (kies JPG of WebP), stilstaande logo's (kies PNG of SVG) en complexe webanimaties (kies MP4 of geanimeerde WebP, die veel efficiënter zijn).

BMP  Bitmap

BMP is het bitmapformaat van Windows, gemaakt door Microsoft. In de meeste instellingen comprimeert het niet: elke pixel wordt rechtstreeks met zijn kleurwaarde opgeslagen. Dat geeft heel grote bestanden — een beeld van 1920×1080 als 24-bits BMP is altijd precies 5,93 MB, wat er ook op staat.

Waarom het nog bestaat: BMP werkt gegarandeerd overal binnen het Microsoft-ecosysteem — Windows, Office, printers en oudere bewerkingssoftware. Binnen verwerkingsprocessen waar juist de afwezigheid van compressie een voordeel is (geen artefacten bij elke tussenstap), heeft BMP nog altijd zijn plek.

Wanneer gebruiken: wanneer een specifiek (meestal verouderd) systeem erom vraagt, als tussenformaat in een verwerkingsketen waar compressie ongewenste artefacten zou opleveren, en bij industrieel drukwerk op bepaalde systemen.

Wanneer niet: op het web, in e-mail, op social media of waar de bestandsgrootte ook maar enigszins telt.