JPG, PNG, WebP of AVIF?

Voordat je indelingen vergelijkt, ken het onderscheid dat ze allemaal aandrijft. Verliesvrij-indelingen slaan elke pixel exact op en kunnen voor altijd opnieuw geopend en opgeslagen worden zonder verslechtering — PNG is de belangrijkste. Verliesvol-indelingen gooien informatie weg die het oog waarschijnlijk niet opmerkt, ruilen wat kwaliteit in voor een veel kleiner bestand — JPG, WebP en AVIF doen dit allemaal. Er is geen enkel "beste" bestandsindeling omdat de juiste keuze afhangt van of je afbeelding een foto, een logo of een schermafbeelding is, en van hoe veel je waarde hecht aan grootte versus compatibiliteit.

JPG (of JPEG) is de veteraan. Het werd gebouwd voor foto's en gebruikt verliesvol-compressie afgestemd op de vloeiende gradiënten van afbeeldingen uit de echte wereld. Het heeft geen transparantie en de compressie kan blokkige artefacten rond scherpe randen en tekst achterlaten, daarom is het verkeerd voor logo's en schermafbeeldingen. Het sterke punt is universele ondersteuning: elk apparaat, editor en website accepteert een JPG.

PNG is de verliesvrij-keuze. Het behoudt elke pixel en ondersteunt volledige transparantie, waardoor het de standaard is voor afbeeldingen met harde randen, tekst, UI-schermafbeeldingen en alles met een doorzichtige achtergrond. De prijs is bestandsgrootte: een PNG-foto is vaak enkele keren groter dan dezelfde foto als JPG, dus PNG is een slechte keuze voor fotografische inhoud op het web.

WebP, van Google, is de moderne veelzijdige indeling. Het biedt zowel verliesvol- als verliesvrij-modi plus transparantie en animatie, en bij vergelijkbare kwaliteit produceert het bestanden ruwweg 25-35% kleiner dan JPG en vaak veel kleiner dan PNG. Elke huidige browser ondersteunt het, wat het het pragmatische standaardkeuze voor een snelle website vandaag maakt.

AVIF is het nieuwste van de vier, gebaseerd op moderne videocodetechnologie. Het bereikt meestal de kleinste bestanden van allemaal — vaak WebP met een grote marge op foto's overtref — en ondersteunt transparantie, brede kleur en hoog dynamisch bereik. De ondersteuning is nu breed maar niet universeel, dus sites bedienen meestal AVIF met een WebP of JPG-terugval voor de laatste paar oudere clients.

Een goed geoptimaliseerde webpagina gebruikt zelden één indeling voor alles. Foto's worden uitgestuurd als WebP of AVIF voor snelheid, met een JPG-terugval. Logo's, pictogrammen en alles met transparantie blijven als PNG — of beter, als SVG als ze vectorafbeeldingen zijn — omdat een verliesvol-indeling hun scherpe randen zou vervagen. Schermafbeeldingen van tekst zien er om dezelfde reden het beste uit als PNG.

Als je niet zeker bent of een wissel het waard is, converteer je een representatieve afbeelding en vergelijk je zowel de bestandsgrootte als hoe deze volledig ingezoomd eruitziet. De groottedaling van JPG naar WebP of AVIF is vaak dramatisch zonder zichtbaar kwaliteitsverlies, wat precies de winst is die pagina's sneller laadt. Wanneer compatibiliteit meer uitmaakt dan bytes — een e-mailbijlage, een oud systeem, een drukkerij — val je terug op JPG of PNG, de twee indelingen die overal werken.