Beeldformaten uitgelegd: PNG, JPG, GIF, WebP, SVG

Het juiste beeldformaat kiezen is een van de makkelijkste manieren om een pagina sneller en scherper te maken. Kies verkeerd en je krijgt een wazig logo of een foto die vijf keer zo zwaar weegt als zou moeten. Hier is waar elk gangbaar formaat goed in is, zodat je het formaat bij het beeld kunt laten passen.

De twee families

Eerst een onderscheid dat al het andere verklaart. Raster-formaten (PNG, JPG, GIF, WebP) slaan een raster van pixels op, dus vervagen of pixeleren ze bij het opschalen. Vector-formaten (SVG) slaan vormen op als wiskunde, dus blijven ze op elk formaat vlijmscherp. Foto's zijn altijd raster; logo's en iconen zijn het best als vector.

De formaten

JPG / JPEG

Verliesgevende compressie, gebouwd voor fotografie. Uitstekende grootte voor fotografische inhoud, overal ondersteund, maar geen transparantie en zichtbare artefacten bij overcompressie. De standaard voor foto's wanneer WebP geen optie is.

PNG

Verliesloos, met transparantie. Perfect voor logo's, iconen, screenshots en alles met scherpe randen, tekst of vlakke kleur. Omdat het verliesloos is, komen als PNG opgeslagen foto's groot uit.

GIF

Een oud formaat beperkt tot 256 kleuren, nu bijna uitsluitend gebruikt voor eenvoudige animaties. Voor statische beelden wordt het door PNG overtroffen; voor animatie zijn moderne formaten (geanimeerde WebP of video) kleiner en van hogere kwaliteit.

WebP

Een modern formaat dat alles doet: verliesgevend of verliesloos, met transparantie en animatie. Het levert doorgaans 25–35% kleinere bestanden dan JPG of PNG bij gelijke visuele kwaliteit, en elke huidige browser ondersteunt het. Voor de meeste webafbeeldingen vandaag is WebP de beste standaard.

SVG

Vectorafbeeldingen gedefinieerd als XML. Ideaal voor logo's, iconen en illustraties — oneindig schaalbaar, piepklein voor eenvoudige vormen en te stylen met CSS. Niet geschikt voor fotografie.

Snelle beslisgids

• Fotografie → WebP (of JPG voor maximale compatibiliteit)
• Logo of icoon → SVG (of PNG als je een rasterkopie nodig hebt)
• Screenshot of afbeelding met tekst → PNG (of WebP)
• Transparantie nodig → PNG, WebP of SVG
• Eenvoudige animatie → geanimeerde WebP

Zodra je een formaat hebt gekozen, behandelt onze gids voor beeldcompressie het verkleinen. Converteer tussen formaten met de SVG-converter en het afbeelding-formaat-aanpassen, en verklein bestanden met de afbeeldingcompressor — allemaal in je browser.