JPG vs PNG: Welk afbeeldingsformaat moet je gebruiken?

Het fundamentele verschil: lossy vs lossless

Het kernverschil tussen JPG en PNG draait om één technische keuze: hoe elk formaat omgaat met compressie. Dit enkele verschil bepaalt elke andere vergelijkingspunt — bestandsgrootte, kwaliteit, ondersteuning voor transparantie, en ideale gebruikssituaties.

Hoe JPG-compressie werkt (DCT-gebaseerd lossy)

JPG (ook geschreven als JPEG, afkorting van Joint Photographic Experts Group) gebruikt lossy-compressie op basis van de Discrete Cosine Transform (DCT). Het algoritme is specifiek ontworpen voor foto's en maakt gebruik van de beperkingen van het menselijk gezichtsvermogen.

Dit gebeurt er wanneer een afbeelding als JPG wordt opgeslagen:

1. Kleurruimteconversie — de afbeelding wordt omgezet van RGB naar YCbCr, waarbij luminantie (helderheid) wordt gescheiden van chrominantie (kleur). Menselijke ogen zijn veel gevoeliger voor helderheidsveranderingen dan voor kleurveranderingen.
2. Chroma-subsampling — de kleurkanalen (Cb en Cr) worden doorgaans verlaagd naar de halve resolutie (4:2:0), waardoor de kleurdata direct met 50% wordt verminderd met minimale visuele impact.
3. 8×8 blokdeling — de afbeelding wordt verdeeld in blokken van 8×8 pixels, en elk blok wordt omgezet in frequentiecomponenten met behulp van de DCT.
4. Kwantisering — hoge-frequentiecomponenten (fijne details) worden gedeeld door grotere getallen, waardoor ze naar nul worden afgerond. Hier gaan gegevens permanent verloren. De kwaliteitsschuifregelaar (1–100) bepaalt hoe agressief deze kwantisering wordt toegepast.
5. Entropiecodering — de resterende waarden worden gecomprimeerd met Huffman-codering (baseline JPEG) of rekenkundige codering voor de uiteindelijke opslag.

Het resultaat is een bestand dat dramatisch kleiner is dan het origineel, terwijl het visueel overtuigend blijft. Bij kwaliteit 85 verliest een typische foto minder dan 1% van zijn perceptuele kwaliteit, terwijl het wordt gecomprimeerd tot ongeveer 10–15% van de ongecomprimeerde grootte.

Hoe PNG-compressie werkt (DEFLATE-gebaseerd lossless)

PNG (Portable Network Graphics) gebruikt lossless-compressie op basis van het DEFLATE-algoritme — dezelfde compressie als in ZIP-bestanden. Elk afzonderlijk pixel in de originele afbeelding wordt exact bewaard. Er worden nooit gegevens weggegooid.

PNG-compressie werkt in twee stappen:

1. Filteren — vóór compressie wordt elke rij pixels door een voorspellingsfilter geleid (None, Sub, Up, Average of Paeth). Het filter voorspelt elke pixelwaarde op basis van naburige pixels en slaat het verschil op. Voor afbeeldingen met vloeiende kleurovergangen of herhalende patronen zijn deze verschillen meestal nullen, die extreem goed comprimeren.
2. DEFLATE-compressie — de gefilterde data wordt gecomprimeerd met DEFLATE, dat LZ77 (het vinden van herhalende byte-patronen) combineert met Huffman-codering. Dit is lossless — decompressie reconstrueert de originele gefilterde data perfect, en het terugdraaien van het filter reconstrueert de originele pixels perfect.

PNG-compressie is het meest effectief op afbeeldingen met grote gebieden van identieke kleur, scherpe randen en herhalende patronen — precies de kenmerken van schermafbeeldingen, logo's, pictogrammen en UI-elementen. Voor foto's met continue toonvariatie is PNG-compressie veel minder effectief, omdat aangrenzende pixels zelden identiek zijn.

Transparantie: de exclusieve functie van PNG

Een van de meest significante praktische verschillen tussen JPG en PNG is de ondersteuning voor transparantie.

PNG ondersteunt een volledig alfakanaal met 256 niveaus van transparantie (0 = volledig transparant, 255 = volledig ondoorzichtig). Dit betekent dat een PNG-afbeelding vloeiende, anti-aliased randen kan hebben die naadloos samenvloeien met elke achtergrond. Elk pixel heeft zijn eigen onafhankelijke transparantiewaarde, waardoor het volgende mogelijk is:

• Logo's op elke achtergrond — een PNG-logo met transparantie werkt op witte pagina's, donkere pagina's, gekleurde achtergronden en foto's zonder zichtbare randen of halo's
• Halftransparante overlays — slagschaduwen, glaseffecten, verloopvervagingen van ondoorzichtig naar transparant
• Onregelmatige vormen — pictogrammen, stickers, productuitsnijdingen met vloeiende anti-aliased randen
• Gelaagde compositing — UI-elementen, game-sprites en ontwerpassets die over andere content moeten worden gelegd

JPG heeft helemaal geen transparantieondersteuning. Elk pixel in een JPG-afbeelding is volledig ondoorzichtig. Wanneer je een PNG met transparantie converteert naar JPG, moeten de transparante gebieden worden gevuld met een effen kleur — doorgaans wit. Er is geen manier om gedeeltelijke transparantie voor te stellen in de JPG-formaatspecificatie.

Vergelijking van bestandsgroottes

Bestandsgrootte is waar JPG en PNG het meest dramatisch verschillen — maar het verschil hangt volledig af van het type afbeelding. De gangbare aanname dat "JPG altijd kleiner is" klopt niet. De werkelijkheid is genuanceerder.

Foto's: JPG is 5–10x kleiner

Voor foto's en afbeeldingen met complexe, continue toonvariatie (natuurscènes, portretten, productfoto's) produceert JPG dramatisch kleinere bestanden. Een 24-megapixelfoto van 72 MB als ongecomprimeerde RGB-data kan worden gecomprimeerd tot:

• PNG: 35–50 MB (lossless — pixels variëren te veel voor DEFLATE om efficiënt te comprimeren)
• JPG bij kwaliteit 92: 5–8 MB (visueel niet te onderscheiden van het origineel)
• JPG bij kwaliteit 85: 3–5 MB (uitstekende kwaliteit, verwaarloosbare artefacten)
• JPG bij kwaliteit 70: 1,5–3 MB (goede kwaliteit, lichte vervaging zichtbaar bij 100% zoom)

De reden is fundamenteel: foto's hebben een hoge entropie. Aangrenzende pixels verschillen met kleine, onvoorspelbare bedragen. De lossless-compressie van PNG kan deze willekeur niet efficiënt voorstellen. De DCT-aanpak van JPG maakt gebruik van het feit dat deze fijne variaties onder de drempel van menselijke waarneming liggen en gooit ze weg voor enorme opslagwinst.

Eenvoudige graphics: PNG kan kleiner zijn

Voor afbeeldingen met grote gebieden van effen kleur, scherpe tekst, geometrische vormen of beperkte kleurpaletten kan PNG daadwerkelijk kleinere bestanden produceren dan JPG. Dit lijkt tegenstrijdig, maar het is logisch als je begrijpt hoe elk algoritme werkt:

• Een eenvoudig logo met 5 kleuren en grote vlakke gebieden comprimeert extreem goed met DEFLATE, omdat de voorspellingsfilters lange reeksen nullen produceren
• De DCT-transformatie van JPG heeft moeite met scherpe randen — de 8×8-blokstructuur creëert ringing-artefacten (Gibbs-fenomeen) rond hoog-contrast grenzen, en de encoder moet meer bits gebruiken om deze randblokken adequaat voor te stellen

Een logo van 500×500 pixels is mogelijk 15 KB als PNG-8 (geïndexeerde 256 kleuren) versus 40 KB als JPG — PNG is bijna 3x kleiner terwijl het ook perfect scherp is.

Praktijkvoorbeelden van bestandsgroottes

Het patroon is duidelijk: JPG domineert voor foto's (10x kleiner), terwijl PNG wint voor eenvoudige graphics met vlakke kleuren en scherpe randen. Schermafbeeldingen en infographics vallen ergens tussenin, afhankelijk van hun inhoudscompliciteit.

Kwaliteitsbehoud en generatieverlies

Een van de belangrijkste verschillen tussen JPG en PNG is wat er gebeurt wanneer je een bestand meerdere keren bewerkt en opnieuw opslaat.

JPG: generatieverlies bij elke nieuwe opslag

Elke keer dat je een JPG opent, bewerkt en opnieuw opslaat, gaan er meer gegevens verloren. Dit heet generatieverlies. Elke opslagcyclus voert het DCT-kwantiseringsproces opnieuw uit, waarbij aanvullende details worden weggegooid die de vorige ronde hadden overleefd. Na 10–20 open-bewerk-opslaan-cycli wordt de degradatie duidelijk zichtbaar:

• Kleuren verschuiven en worden geposteriseerd
• Blokkige 8×8-pixel-rasterartefacten verschijnen
• Scherpe randen worden steeds waziger
• Fijne texturen (haar, stof, gebladerte) worden modderig
• Ringing-artefacten (muggenruis) intensiveren rondom hoog-contrast grenzen

Dit is bijzonder problematisch voor workflows waarbij afbeeldingen meerdere keren worden bewerkt: grafisch ontwerp, het maken van sociale media-inhoud en gezamenlijke fotobewerking. Elke persoon die de JPG opent, bijsnijdt of aanpast en opnieuw opslaat, introduceert een nieuwe ronde van degradatie.

PNG: onbeperkt opslaan zonder degradatie

PNG bewaart elk pixel perfect, ongeacht hoe vaak het bestand wordt geopend, bewerkt en opnieuw opgeslagen. Omdat PNG-compressie lossless is, produceert decompressie altijd exact de originele pixeldata. Bewerken en opnieuw opslaan comprimeert de (mogelijk gewijzigde) pixels gewoon opnieuw lossless. Er is geen generatieverlies, geen ophopende artefacten en geen kwaliteitsdegradatie in de loop van de tijd.

Dit maakt PNG de juiste keuze voor:

• Werkbestanden — ontwerpassets, sjablonen en bronbestanden die vele malen worden bewerkt
• Schermafbeeldingen voor documentatie — tekst en UI-elementen in schermafbeeldingen moeten perfect scherp blijven door elk aantal bewerkingen
• Archiefkopieën — wanneer je de exacte pixeldata voor onbepaalde tijd moet bewaren
• Bronmateriaal voor toekomstige exports — een PNG-master bewaren laat je later naar JPG exporteren op elk gewenst kwaliteitsniveau

Kleurdiepte

Zowel JPG als PNG ondersteunen miljoenen kleuren, maar hun mogelijkheden voor kleurdiepte verschillen op belangrijke manieren.

JPG ondersteunt 8 bits per kanaal (24-bit kleur), wat 16,7 miljoen mogelijke kleuren biedt. Dit is voldoende voor vrijwel alle foto's en webcontent. JPG ondersteunt geen 16-bit per kanaal afbeeldingen of geïndexeerde kleurmodi.

PNG ondersteunt meerdere kleurdieptemodi:

• PNG-24 (truecolor): 8 bits per kanaal, 16,7 miljoen kleuren — hetzelfde als JPG maar lossless
• PNG-32 (truecolor + alfa): 8 bits per kanaal plus 8-bit alfatransparantie — 32 bits per pixel totaal
• PNG-48 (diepe kleur): 16 bits per kanaal, 281 biljoen mogelijke kleuren — gebruikt in wetenschappelijke beeldvorming, medische beeldvorming en hoogwaardige fotografieworkflows
• PNG-8 (geïndexeerd): 256-kleurenpalette met optionele 1-bit transparantie — extreem kleine bestanden voor eenvoudige graphics
• Grijswaarden: 1, 2, 4, 8 of 16 bits per pixel voor monochrome afbeeldingen

Voor webgebruik is de 8-bit per kanaal ondersteuning in beide formaten meer dan voldoende. De 16-bit PNG-modus is relevant voor gespecialiseerde workflows: astrofotografie, medische beeldvorming, high-dynamic-range-compositing en wetenschappelijke datavisualisatie waarbij subtiele toonverschillen informatie dragen.

JPG vs PNG: volledige vergelijkingstabel

Wanneer gebruik je JPG

JPG is de juiste keuze wanneer bestandsgrootte belangrijk is en de afbeelding complexe, continue toonvariatie bevat. Dit zijn de belangrijkste gebruikssituaties:

• Foto's — portretten, landschappen, evenementfoto's, productfotografie. JPG is specifiek ontworpen voor fotografische inhoud. Een 12-megapixelfoto bij kwaliteit 85 produceert een JPG van 2–5 MB versus een PNG van 25–40 MB.
• Hero-afbeeldingen en achtergronden op websites — grote bannerafbeeldingen die snel moeten laden. Een 1920×1080 hero-afbeelding bij kwaliteit 85 is ongeveer 200–400 KB als JPG, snel genoeg voor de meeste verbindingen.
• Uploads naar sociale media — elk groot platform (Instagram, Facebook, Twitter/X, LinkedIn) hercomprimeert geüploade afbeeldingen sowieso naar JPG. Een JPG uploaden geeft je meer controle over de initiële kwaliteit dan de agressieve compressie van het platform te laten beslissen.
• E-mailbijlagen — JPG-foto's zijn klein genoeg om direct bij te voegen. Een PNG-versie van dezelfde foto kan de bestandsgrootte van e-mail overschrijden.
• Miniaturen en voorbeeldweergaven — kleine voorbeeldafbeeldingen waarbij de bestandsgrootte minimaal moet zijn en de lossy-artefacten onzichtbaar zijn bij kleinere afmetingen.
• Printfotografie — professionele fotolabs accepteren JPG bij kwaliteit 95–100. Bij deze instellingen is de compressie bijna lossless en toch aanzienlijk kleiner dan PNG.

Wanneer gebruik je PNG

PNG is de juiste keuze wanneer pixel-perfecte nauwkeurigheid, transparantie of het behoud van scherpe randen belangrijker is dan bestandsgrootte:

• Logo's en merkidentiteiten — logo's moeten op elke grootte scherp blijven en naadloos samenvloeien op elke achtergrond. PNG met transparantie is het standaardformaat voor logodistributie.
• Pictogrammen en UI-elementen — app-pictogrammen, knopgraphics, navigatie-elementen en interface-componenten vereisen perfecte randen en hebben vaak transparantie nodig.
• Schermafbeeldingen — tekst, code, menu's en interface-elementen in schermafbeeldingen hebben hoog-contrast scherpe randen die JPG slecht verwerkt. Een JPG-schermafbeelding van een code-editor toont zichtbare artefacten rondom elk teken.
• Afbeeldingen met veel tekst — elke afbeelding met leesbare tekst (infographics met lopende tekst, diagrammen met labels, memes met bijschriften) moet PNG gebruiken om tekst scherp te houden.
• Lijntekeningen en illustraties — vectorachtige graphics, technische diagrammen, grafieken en schema's met nette lijnen en vlakke kleuren.
• Pixel art — retro-gamegraphics en pixel art moeten exacte pixelwaarden bewaren. JPG zou de opzettelijk scherpe pixelgrenzen vervagen.
• Medische en wetenschappelijke beeldvorming — elke toepassing waarbij de exacte pixeldata diagnostische of meetinformatie draagt. Lossy-compressie is onaanvaardbaar.
• Werk-/bronbestanden — ontwerpassets die meerdere keren worden bewerkt, gelaagd of opnieuw geëxporteerd. PNG voorkomt generatieverlies.

Snelle keuzegids

Als je niet zeker weet welk formaat je moet gebruiken, doorloop dan dit beslissingsproces:

1. Heeft de afbeelding transparantie nodig? → PNG. JPG heeft geen transparantieondersteuning.
2. Is het een foto of complexe natuurlijke afbeelding? → JPG. Lossy-compressie produceert bestanden die 5–10x kleiner zijn met nauwelijks waarneembaar kwaliteitsverlies.
3. Bevat het tekst, scherpe randen of lijntekeningen? → PNG. JPG creëert zichtbare artefacten rondom hoog-contrast grenzen.
4. Is het een schermafbeelding? → PNG. Schermafbeeldingen bevatten UI-elementen, tekst en scherpe randen die verslechteren onder JPG-compressie.
5. Is het een logo of pictogram? → PNG. Logo's hebben perfecte randen nodig en vereisen doorgaans transparantie.
6. Wordt het bestand meerdere keren bewerkt en opgeslagen? → PNG. Voorkomt generatieverlies door herhaald opslaan als JPG.
7. Is laadsnelheid van webpagina's de prioriteit? → JPG voor foto's, PNG voor graphics (PNG-8 voor eenvoudige graphics is tiny).
8. Twijfel je? → Sla op als PNG. Je kunt altijd later converteren naar JPG. Je kunt een JPG niet naar PNG converteren en verloren data terugkrijgen.

JPG-compressie-artefacten begrijpen

Wanneer JPG-compressie te agressief is ingesteld (lage kwaliteitswaarden), worden er meerdere soorten visuele artefacten zichtbaar. Het begrijpen van deze artefacten helpt je geschikte kwaliteitsinstellingen te kiezen en te weten wanneer je JPG volledig moet vermijden.

Blokartefacten (DCT-raster)

Omdat JPG afbeeldingen verwerkt in blokken van 8×8 pixels, kan agressieve compressie de blokgrenzen zichtbaar maken als een rasterpatroon over de afbeelding. Dit valt het meest op in vloeiende verlopen (zoals lucht) waarbij het oog continue toonvariatie verwacht. Bij kwaliteit 50 of lager wordt blokkering duidelijk zichtbaar in de meeste foto's.

Ringing-artefacten (muggenruis)

JPG heeft moeite met scherpe, hoog-contrast randen. De DCT-transformatie produceert het Gibbs-fenomeen — oscillerende artefacten rondom abrupte overgangen. Dit verschijnt als een halo van ruis rondom tekst, logo's en elke scherpe grens tussen donkere en lichte gebieden. Dit is de primaire reden waarom JPG ongeschikt is voor schermafbeeldingen en afbeeldingen met veel tekst.

Kleurbandering en posterisering

In gebieden met subtiele verlopen (huidtinten, zonsondergangsluchten, effen-kleur achtergronden) kan JPG-compressie het aantal zichtbare kleurstappen verminderen, waardoor zichtbare banden ontstaan in plaats van vloeiende overgangen. Dit wordt verergerd door chroma-subsampling, dat de kleurresolutie halveert voordat DCT-compressie zelfs begint.

Kleurverschuiving

Herhaalde JPG-opslagen veroorzaken cumulatieve kleurverschuiving doordat het kwantiseringsproces waarden in iets verschillende richtingen afrond bij elke cyclus. Na veel generaties kunnen oorspronkelijk neutrale grijstinten een kleurcast krijgen en kunnen verzadigde kleuren van tint verschuiven. Dit is een van de meest verraderlijke effecten van generatieverlies omdat het moeilijk ongedaan te maken is.

Context 2026: WebP en AVIF

Hoewel JPG en PNG de universele basisformaten blijven, zijn twee nieuwere alternatieven in 2026 steeds relevanter:

WebP: het beste van twee werelden

Ontwikkeld door Google en uitgebracht in 2010, ondersteunt WebP zowel lossy- als lossless-compressie, plus transparantie en animatie — waarbij de sterke punten van zowel JPG als PNG worden gecombineerd in één formaat. Lossy WebP-afbeeldingen zijn doorgaans 25–35% kleiner dan gelijkwaardige JPG-bestanden bij dezelfde visuele kwaliteit. Lossless WebP-afbeeldingen zijn doorgaans 26% kleiner dan PNG.

Vanaf 2026 heeft WebP 97%+ browserondersteuning (alle moderne browsers inclusief Chrome, Firefox, Safari, Edge en Opera). Safari voegde WebP-ondersteuning toe in 2020, waarmee de laatste grote achterblijver verdween.

AVIF: compressie van de volgende generatie

AVIF (AV1 Image File Format) is gebaseerd op de AV1-videocodec en biedt nog betere compressie dan WebP. Lossy AVIF-afbeeldingen zijn ongeveer 50% kleiner dan gelijkwaardige JPG-bestanden en ondersteunen transparantie, brede kleurengamma (HDR) en tot 12-bit kleurdiepte.

De AVIF-browserondersteuning is ongeveer 93% in 2026 (Chrome, Firefox, Safari 16.4+, Edge). Codering is langzamer dan JPG of WebP, maar decodeerprestaties zijn competitief.

Waarom JPG en PNG nog steeds belangrijk zijn

Ondanks de voordelen van WebP en AVIF blijven JPG en PNG in 2026 essentieel om meerdere redenen:

• Universele compatibiliteit — JPG en PNG werken in elke applicatie, elk besturingssysteem, elke e-mailclient en elk apparaat dat de afgelopen 30 jaar is gemaakt. WebP en AVIF stoten nog steeds op randgevallen in oudere software, e-mailclients en native applicaties.
• Fallback-vereiste — zelfs websites die WebP of AVIF aanbieden via het <picture>-element moeten JPG/PNG-fallbacks bieden voor de resterende 3–7% van browsers en voor crawlers, sociale media-previews en RSS-lezers.
• Bewerkingsecosysteem — Photoshop, GIMP, Lightroom en de meeste beeldeditors gebruiken JPG en PNG als hun primaire import-/exportformaten. WebP- en AVIF-ondersteuning groeit maar is nog niet universeel.
• Sociale media en e-mail — platforms als Instagram, Facebook en e-mailclients accepteren JPG en PNG betrouwbaar. WebP-uploadondersteuning is inconsistent op verschillende platforms.
• Printworkflows — de printindustrie gebruikt JPG (voor foto's) en PNG/TIFF (voor graphics). WebP en AVIF hebben nul aanwezigheid in print.

Converteren tussen JPG en PNG

Soms moet je tussen formaten converteren. Dit is wanneer elke richting zinvol is:

PNG naar JPG: bestandsgrootte verkleinen

Converteer PNG naar JPG wanneer je een fotografische afbeelding als PNG hebt opgeslagen en een kleiner bestand nodig hebt. Dit komt veel voor bij:

• Schermafbeeldingen van telefoons die als PNG worden opgeslagen
• Afbeeldingen geëxporteerd vanuit ontwerphulpmiddelen bij maximale kwaliteit
• Gescande documenten en foto's
• Afbeeldingen die moeten worden geüpload naar platforms met groottelimieten

Bij het converteren gebruikt CleverUtils kwaliteit 92, wat een uitstekende balans biedt tussen vermindering van bestandsgrootte en visuele kwaliteit. Transparante gebieden worden afgeplat naar wit, en de kleurruimte wordt gestandaardiseerd naar sRGB voor maximale compatibiliteit.

JPG naar PNG: bewaren voor bewerking

Converteer JPG naar PNG wanneer je een afbeelding moet bewerken en verder generatieverlies wilt voorkomen. Converteren naar PNG verbetert de beeldkwaliteit niet — de data die verloren ging tijdens JPG-compressie is permanent weg. Het bewaart echter de huidige staat van de afbeelding lossless, waardoor latere bewerkingen en opslagen geen extra degradatie introduceren.