Snelle vergelijking
| Eigenschap | JPG (JPEG) | PNG |
|---|---|---|
| Compressie | Lossy | Lossless |
| Foto bestandsgrootte (1080p) | 200–800 KB | 2–8 MB |
| Transparantie | Niet ondersteund | Volledig alfakanaal |
| Kleurdiepte | 8-bit (24-bit kleur) | 8 of 16-bit (tot 48-bit) |
| Kwaliteit bij opnieuw opslaan | Verslechtert elke keer | Geen verslechtering |
| Scherpe randen & tekst | Artefacten zichtbaar | Pixelscherp |
| Kleurverlopen & foto's | Uitstekend (hiervoor ontworpen) | Goed maar grote bestanden |
| Animatie | Nee | Nee (APNG is apart) |
| Browserondersteuning | 100% | 100% |
| Standaard | 1992, JPEG-commissie | 1996, W3C |
| Het beste voor | Foto's, webafbeeldingen | Schermafbeeldingen, logo's, graphics |
Hoe compressie werkt: Lossy vs Lossless
JPG: Lossy-compressie
JPG gebruikt de Discrete Cosine Transform (DCT) om 8×8 pixelblokken te analyseren en visuele informatie te verwijderen die het menselijk oog waarschijnlijk niet opmerkt. Daardoor is JPG zo effectief voor foto's — natuurlijke afbeeldingen bevatten enorme hoeveelheden visuele redundantie die veilig verwijderd kunnen worden.
Het nadeel: verwijderde data kan niet worden hersteld. Elke keer dat je een JPG opent, bewerkt en opnieuw opslaat, wordt er meer data verwijderd. Na 5–10 keer opnieuw opslaan worden zichtbare kwaliteitsverslechteringen zichtbaar — dit noemen we generatieverlies. Daarom fotograferen fotografen in RAW en exporteren ze pas als allerlaatste stap naar JPG.
PNG: Lossless-compressie
PNG gebruikt DEFLATE-compressie (hetzelfde algoritme als ZIP-bestanden) om de bestandsgrootte te verkleinen zonder data te verliezen. Elke pixel in de uitvoer is wiskundig identiek aan de invoer. Je kunt een PNG duizend keer openen, bewerken en opnieuw opslaan zonder enig kwaliteitsverlies.
Het nadeel: PNG-bestanden zijn 5–10× groter dan JPG voor fotografisch materiaal, omdat alle visuele data bewaard blijft. Voor graphics met vlakke kleuren en scherpe randen (logo's, pictogrammen, schermafbeeldingen) is PNG juist heel efficiënt, omdat DEFLATE repetitieve pixelpatronen goed comprimeert.
Transparantie: de sterkste troef van PNG
JPG heeft helemaal geen ondersteuning voor transparantie. Elke pixel moet een effen kleur hebben. Als je afbeelding een transparante achtergrond heeft, vult het opslaan als JPG die op met wit (of welke achtergrondkleur je software standaard gebruikt).
PNG ondersteunt volledig 8-bit alfakanaal-transparantie — elke pixel kan 256 niveaus van doorzichtigheid hebben, van volledig transparant tot volledig dekkend. Dit maakt mogelijk:
- Transparante logo's die op elke achtergrondkleur werken
- Productfoto's met uitgesneden achtergronden voor e-commerce
- UI-elementen zoals pictogrammen, knoppen en overlays
- Vloeiende anti-aliased randen zonder witte rand-artefacten
Als je transparantie nodig hebt, is PNG je enige keuze onder de traditionele formaten. (WebP en AVIF ondersteunen ook transparantie met kleinere bestandsgroottes.)
Wanneer gebruik je JPG
- Foto's: portretten, landschappen, productfoto's, reisfoto's. JPG is hier speciaal voor gebouwd — uitstekende kwaliteit bij 80–90% van de originele bestandsgrootte.
- Hero-afbeeldingen en banners op websites: grote fotografische afbeeldingen waarbij bestandsgrootte belangrijk is. Een hero-afbeelding van 1920×1080 kan 300 KB zijn als JPG tegenover 5 MB als PNG.
- Afbeeldingen in e-mails: kleinere bestanden laden sneller in e-mailclients en voorkomen limieten voor bijlagegroottes.
- Uploads op sociale media: platforms hercomprimeren geüploade afbeeldingen sowieso, dus het lossy-karakter van JPG maakt niet uit — het platform past zijn eigen lossy-compressie toe.
- Thumbnails en voorbeeldweergaven: kleine afmetingen verbergen compressie-artefacten, en kleine bestandsgroottes verbeteren de prestaties.
- Grote afbeeldingscollecties: fotoalbums, galerijpagina's, afbeeldingsarchieven. PNG zou 5–10× meer opslagruimte verbruiken.
Wanneer gebruik je PNG
- Schermafbeeldingen: tekst, UI-elementen en interfacedetails moeten pixelscherp zijn. JPG-compressie vervaagt tekst en creëert artefacten rondom scherpe randen.
- Logo's en huisstijl: logo's moeten overal identiek eruitzien. JPG-compressie kan kleuren subtiel veranderen en ruis introduceren rondom scherpe randen.
- Pictogrammen en UI-graphics: app-pictogrammen, websitepictogrammen, knoppen, badges — kleine graphics met vlakke kleuren en strakke lijnen.
- Afbeeldingen met tekstoverlay: infographics, diagrammen, grafieken, memes met tekst. JPG creëert zichtbare artefacten rondom teksttekens.
- Transparante afbeeldingen: alles wat een transparante achtergrond nodig heeft.
- Bronbestanden voor bewerking: als je de afbeelding meerdere keren wilt bewerken, gebruik dan PNG om generatieverlies te voorkomen.
- QR-codes en streepjescodes: elke pixel telt voor scanbaarheid. JPG-compressie kan codes onleesbaar maken.
- Pixel art: individuele pixels zijn bewust zichtbaar. JPG vervaagt ze.
Vergelijking bestandsgroottes in de praktijk
| Afbeeldingstype | Resolutie | JPG (kwaliteit 85) | PNG | Verhouding |
|---|---|---|---|---|
| Landschapsfoto | 1920×1080 | ~400 KB | ~4,5 MB | 11× |
| Portretfoto | 1080×1350 | ~350 KB | ~3,8 MB | 11× |
| Schermafbeelding (desktop) | 1920×1080 | ~250 KB | ~800 KB | 3× |
| Logo (vlakke kleuren) | 500×500 | ~30 KB | ~15 KB | 0,5× |
| Pictogram | 256×256 | ~12 KB | ~8 KB | 0,7× |
| Infographic | 1080×3000 | ~500 KB | ~1,2 MB | 2,4× |
| 4K-foto | 3840×2160 | ~1,5 MB | ~18 MB | 12× |
Merk op dat voor logo's en pictogrammen met vlakke kleuren, PNG in werkelijkheid kleiner is dan JPG. Dit komt doordat DEFLATE uniforme kleurgebieden zeer efficiënt comprimeert, terwijl de DCT-aanpak van JPG overhead toevoegt voor eenvoudige graphics.
Converteren tussen JPG en PNG
JPG naar PNG
JPG naar PNG converteren is veilig maar verbetert de kwaliteit niet. De conversie bewaart de huidige pixeldata exact (PNG is lossless), maar details die verloren zijn gegaan door JPG-compressie kunnen niet worden hersteld. Je converteert om de volgende redenen:
- Transparantie aan de afbeelding toevoegen
- Verdere kwaliteitsverslechtering door opnieuw opslaan voorkomen (PNG verslechtert niet)
- Voldoen aan formaateisen (sommige systemen vereisen PNG)
- Voorbereiden voor verdere bewerking (bewerken als PNG, eindresultaat exporteren als JPG)
PNG naar JPG
PNG naar JPG converteren verkleint de bestandsgrootte maar gaat gepaard met enig kwaliteitsverlies. Dit is handig wanneer:
- Je een kleiner bestand nodig hebt voor het web, e-mail of opslag
- Transparantie niet nodig is (JPG vult transparante gebieden op met wit)
- De afbeelding een foto is waarbij JPG-compressie efficiënt is
Moderne alternatieven: WebP en AVIF
Zowel JPG als PNG zijn meer dan 30 jaar oud. Moderne formaten bieden betere afwegingen:
| Eigenschap | JPG | PNG | WebP | AVIF |
|---|---|---|---|---|
| Lossy fotogrootte | 400 KB | N/A | ~280 KB | ~100 KB |
| Transparantie | Nee | Ja | Ja | Ja |
| Browserondersteuning | 100% | 100% | ~97% | ~95% |
| Software-ondersteuning | Universeel | Universeel | Goed | Groeiend |
Voor nieuwe webprojecten kun je overwegen WebP of AVIF te serveren met JPG/PNG als fallback. Voor offline gebruik, delen en compatibiliteit blijven JPG en PNG de veilige standaard.