WebP, JPG of PNG: welk afbeeldingsformaat kies je?

JPG, PNG en WebP zijn de drie afbeeldingsformaten die je elke dag tegenkomt. Ze tonen allemaal een afbeelding, maar slaan die op heel verschillende manieren op. De verkeerde keuze levert wazige logo's op, te zware pagina's of afbeeldingen die het programma dat je nodig hebt gewoon niet opent. Deze gids legt de verschillen uit en geeft je voor elke gangbare situatie een duidelijke regel.

Het korte antwoord

• JPG voor foto's, als maximale compatibiliteit telt.
• PNG voor logo's, iconen, screenshots en alles wat scherpe randen of transparantie nodig heeft.
• WebP voor afbeeldingen op een website, waar kleinere bestanden snellere pagina's betekenen.

De rest van dit artikel legt uit waarom.

Compressie met en zonder verlies

Het belangrijkste verschil is hoe elk formaat de afbeelding comprimeert.

• JPG is lossy (met verlies). Het gooit details weg die het oog nauwelijks opmerkt, waardoor foto's klein blijven. De prijs: scherpe randen en egale kleurvlakken krijgen blokkerige of vage "artefacten", en elke keer dat je een JPG bewerkt en opnieuw opslaat, verlies je weer wat kwaliteit.
• PNG is lossless (zonder verlies). Elke pixel wordt exact bewaard. Dat is perfect voor tekst, lijnen en egale vlakken, maar een foto als PNG is meestal vele malen groter dan dezelfde foto als JPG.
• WebP kan allebei. Het heeft een lossy modus die concurreert met JPG en een lossless modus die concurreert met PNG. Bij dezelfde zichtbare kwaliteit zijn WebP-bestanden doorgaans kleiner dan hun JPG- of PNG-tegenhangers, en precies daarvoor is het ontworpen: voor het web.

Een handig gevolg: een JPG omzetten naar PNG haalt de details die JPG al heeft weggegooid niet terug. Het voorkomt alleen verder verlies als je de afbeelding nog wilt bewerken.

Transparantie

• JPG kent geen transparantie. Transparante delen worden opgevuld met een effen kleur, meestal wit of zwart.
• PNG ondersteunt een volledig alfakanaal, inclusief zachte, halfdoorzichtige randen. Het is de klassieke keuze voor logo's op een gekleurde achtergrond.
• WebP ondersteunt ook alfatransparantie, zowel in lossy als in lossless modus.

Zet je een transparante PNG of WebP om naar JPG, dan worden de transparante delen opgevuld. Houd daar rekening mee voordat je een logo als JPG verstuurt.

Animatie

JPG en standaard-PNG zijn stilstaande beelden. WebP kan ook animaties bevatten en is daarmee een lichter alternatief voor GIF bij korte loops. Zet je een geanimeerde WebP om naar JPG of PNG, dan krijg je één stilstaand frame, niet de animatie.

Ondersteuning in browsers en programma's

JPG en PNG openen overal: in elke browser, elk besturingssysteem, elke beeldeditor, elke chat-app en elke printer. WebP wordt ondersteund door alle huidige grote browsers, en de meeste moderne besturingssystemen en editors kunnen het openen, maar je komt nog steeds oudere software, uploadformulieren en printdiensten tegen die het weigeren. Dat is de meest voorkomende reden om een WebP naar JPG om te zetten: een gedownloade afbeelding die een programma niet wil openen.

Bestandsgrootte en webprestaties

Op een website telt het gewicht van afbeeldingen. Grote afbeeldingen vertragen het laden, vooral op mobiele verbindingen, en de laadsnelheid beïnvloedt zowel je bezoekers als je positie in zoekmachines. Een paar praktische regels:

• Lever foto's als WebP (lossy) of, als je de breedste compatibiliteit nodig hebt, als goed gecomprimeerde JPG.
• Lever logo's, iconen en interfacegraphics als WebP (lossless) of PNG, of als SVG als je een vectorversie hebt.
• Upload een foto nooit als PNG alleen omdat die "betere kwaliteit" zou hebben. De bezoeker ziet het verschil niet, maar wacht er wel op.
• Schaal afbeeldingen naar het formaat waarop ze echt worden getoond. Geen enkel formaat compenseert een foto van 4000 pixels in een vak van 400.

Welk formaat kies je, per situatie

• Foto's van camera of telefoon: JPG om te delen en af te drukken, WebP voor je website.
• Logo's en iconen: PNG of lossless WebP; beide behouden transparantie en scherpe randen.
• Screenshots: PNG. Tekst en interface-elementen blijven haarscherp; JPG maakt ze vlekkerig.
• Illustraties met egale kleuren: PNG of lossless WebP.
• Korte animaties: geanimeerde WebP in plaats van een zware GIF.
• Afbeeldingen voor een e-mail, een formulier of een ouder programma: JPG of PNG, omdat die overal worden geaccepteerd.

Omzetten tussen formaten

Je hoeft niets opnieuw te maken om van formaat te wisselen. De afbeeldingsconverters van Azpy werken volledig in je browser: je afbeeldingen worden op je eigen apparaat verwerkt en nooit naar een server geüpload. Zet een WebP om naar JPG als een programma hem weigert, een PNG naar WebP om je website lichter te maken of een JPG naar PNG voordat je verder bewerkt. De gratis limiet van deze browsertools is 25 MB per bestand, en je vindt alle converters in het overzicht van tools.

Een vuistregel

Een foto? JPG of WebP. Scherpe randen of transparantie? PNG of WebP. Voor het web kies je bij voorkeur WebP; voor al het andere neem je wat de bestemming accepteert.