Afbeeldingsformaten uitgelegd: JPG, PNG, WebP, AVIF, GIF, BMP en ICO
Welk formaat je gebruikt voor foto's, logo's, schermafbeeldingen, webpagina's, print en social media, en waarom.
Elk afbeeldingsformaat is een set afwegingen tussen bestandsgrootte, kwaliteit, transparantie, animatie en compatibiliteit. Kies de verkeerde en je krijgt ofwel een opgeblazen bestand ofwel een wazig logo. Deze gids zet uiteen waar elk formaat goed in is, met de getallen die je nodig hebt om te beslissen.
De twee soorten compressie
Verliesvrije compressie slaat elke pixel exact op en vindt simpelweg een efficiëntere manier om dezelfde gegevens te schrijven, zoals een ZIP doet. Open en bewaar een verliesvrije afbeelding duizend keer en hij is onveranderd. PNG, BMP, GIF en verliesvrije WebP werken zo.
Lossy compressie gooit informatie weg en richt zich op het detail waar het menselijk oog het minst gevoelig voor is: fijne textuur, subtiele kleurverschillen, hoogfrequente ruis. Het resultaat kan een tiende van de grootte van een verliesvrij bestand zijn zonder zichtbaar verschil, maar elke keer opnieuw opslaan verliest weer een beetje. JPG, lossy WebP en AVIF werken zo.
Regel één volgt daar direct uit: gebruik lossy formaten voor foto's, die vol ruis en textuur zitten die niemand mist, en verliesvrije formaten voor graphics met scherpe randen, vlakke kleuren en tekst, waar elke pixel telt.
Formaat voor formaat
JPG (JPEG)
Het fotoformaat sinds 1992. Lossy, 8-bits kleur, geen transparantie, geen animatie. Ondersteund door alles wat ooit is gemaakt. Een kwaliteitsinstelling van 0 tot 100 regelt de afweging; 80 tot 85 is de dagelijkse gulden middenweg. Zijn zwaktes zijn zichtbare "blokvorming" op lage kwaliteit, echo's rond scherpe randen en het ontbreken van transparantie. Gebruik het voor foto's die ergens buiten een browser terechtkomen: e-mail, print, marktplaatsen, oudere software.
PNG
Verliesvrij, tot 16-bits kleur, volledige alfatransparantie, geen animatie (APNG bestaat maar is zeldzaam). De juiste keuze voor logo's, iconen, schermafbeeldingen, diagrammen, grafieken en elke afbeelding die een transparante achtergrond nodig heeft. Zijn zwakte is grootte: een PNG-foto kan tien keer zo groot zijn als een JPG. Gebruik nooit PNG voor foto's op een website.
WebP
Het webformaat van Google, nu ondersteund door elke huidige browser. Heeft zowel een lossy als een verliesvrije modus, ondersteunt transparantie in beide en ondersteunt animatie. Lossy WebP is zo'n 25 tot 35% kleiner dan JPG bij gelijke kwaliteit; verliesvrije WebP is zo'n 25% kleiner dan PNG. Het is het beste allround formaat voor alles wat in een browser wordt getoond. Zijn zwakte is compatibiliteit buiten de browser: oudere desktopsoftware, sommige e-mailprogramma's en veel uploadformulieren weigeren het nog.
AVIF
Nog nieuwer, gebaseerd op de AV1-videocodec. Doorgaans 50% kleiner dan JPG en 20% kleiner dan WebP bij gelijke kwaliteit, met transparantie, animatie en brede kleurondersteuning. Ondersteund door alle huidige browsers sinds 2024. Coderen is traag, vooral in de browser, en de ondersteuning in software buiten de browser is nog wisselend. Gebruik het als bestandsgrootte kritiek is en je de weergaveomgeving beheert; serveer een WebP- of JPG-fallback ernaast.
GIF
Uit 1987. Beperkt tot 256 kleuren per frame, transparantie in één kleur, en animatie, wat de enige reden is dat het nog overal is. Verschrikkelijk voor foto's, prima voor eenvoudige graphics, onverslaanbaar in compatibiliteit. Voor stilstaande beelden doet PNG alles wat GIF doet maar beter; voor animatie zijn MP4 of geanimeerde WebP veel kleiner.
BMP
Ongecomprimeerde Windows-bitmap. Enorme bestanden, geen transparantie in gangbaar gebruik, geen compressie. Overleeft alleen omdat het triviaal eenvoudig te lezen is, wat ertoe doet voor embedded apparaten en verouderde software. Gebruik het nooit voor het web of voor opslag.
ICO
Het formaat voor Windows-iconen en browserfavicons. Bevat meerdere formaten van dezelfde afbeelding in één bestand zodat het juiste kan worden gekozen voor een tabblad, een bladwijzer of een snelkoppeling op het bureaublad. Gemaakt van een PNG met de tool PNG naar ICO.
Vergelijkingstabel
| Formaat | Compressie | Transparantie | Animatie | Fotogrootte vs JPG | Compatibiliteit |
|---|---|---|---|---|---|
| JPG | Lossy | Nee | Nee | 1× | Universeel |
| PNG | Verliesvrij | Ja, volledige alfa | Nee | 5 tot 10× | Universeel |
| WebP | Beide | Ja, volledige alfa | Ja | 0,65 tot 0,75× | Alle browsers, de meeste moderne apps |
| AVIF | Beide | Ja, volledige alfa | Ja | 0,5× | Alle huidige browsers, weinig apps |
| GIF | Verliesvrij, 256 kleuren | Ja, aan/uit | Ja | 2 tot 4× (en slechtere kwaliteit) | Universeel |
| BMP | Geen | Nee | Nee | 20 tot 30× | Universeel maar zelden gebruikt |
Welk formaat voor welke klus
- Foto's op een website: WebP op kwaliteit 75 tot 85, met een JPG-fallback als je heel oude browsers moet ondersteunen. AVIF als je de kleinst mogelijke pagina's wilt.
- Logo's en iconen op een website: SVG als je die hebt; anders PNG of verliesvrije WebP.
- Schermafbeeldingen: PNG. Lossy compressie vervaagt tekst.
- E-mailbijlagen: JPG voor foto's, PNG voor graphics. Stuur geen WebP; te veel mailprogramma's gaan er verkeerd mee om.
- Print: JPG op kwaliteit 95 of PNG/TIFF, op 300 pixels per inch van het printformaat.
- Social media: JPG of PNG; elk platform comprimeert bij het uploaden toch opnieuw, dus upload op hoge kwaliteit en de juiste afmetingen.
- Transparante productuitsnedes: PNG voor maximale compatibiliteit, WebP voor het web.
- Favicons: ICO plus een PNG voor mobiele beginschermen.
Ertussen converteren
Elke conversie op deze site draait in je browser. De meest gebruikte routes zijn PNG naar WebP en JPG naar WebP voor het web, WebP naar JPG en WebP naar PNG voor compatibiliteit, en PNG naar JPG om foto's te verkleinen die in het verkeerde formaat zijn geëxporteerd. De afbeeldingscompressor doet ze allemaal, met batchondersteuning.