Kiezen tussen PNG, JPEG, WebP en AVIF

Foto's gaan in JPEG, WebP of AVIF. Schermafbeeldingen, logo's, pictogrammen, diagrammen en alles met vlakke kleur of scherpe tekst gaan in PNG, of in de lossless modus van WebP. Heb je transparantie nodig, dan valt JPEG helemaal af. Kies je vandaag een formaat voor het web en kun je meer dan één versie uitleveren, dan AVIF eerst, WebP als terugval, en het oorspronkelijke JPEG of PNG voor alles wat heel oud is.

Dat is de hele beslissing. De rest legt uit waarom, zodat je kunt zien wanneer de vuistregel niet opgaat.

Waar elk formaat werkelijk goed in is

Lossless betekent dat de gedecodeerde afbeelding bit voor bit identiek is aan wat erin ging. Lossy betekent dat de encoder informatie definitief weggooit in ruil voor een kleiner bestand, en dat je een benadering terugkrijgt.

PNG is lossless en zal dat altijd zijn. De compressie voorspelt elke pixel uit zijn buren en comprimeert de verschillen vervolgens met deflate, wat schitterend werkt wanneer grote vlakken identiek zijn of zich herhalen, en slecht wanneer elke pixel iets afwijkt, zoals in een foto. Een foto die als PNG is opgeslagen is vaak vijf tot tien keer groter dan een goede JPEG van dezelfde afbeelding, zonder zichtbaar voordeel.

JPEG is lossy en heeft geen alfakanaal, dus het kan transparantie helemaal niet opslaan. Het verdeelt de afbeelding in blokken, zet elk blok om naar frequentie-informatie, en gooit het fijne detail weg waarvoor je oog het minst gevoelig is. Dat werkt prachtig bij foto's met doorlopende tonen en slecht bij harde randen, waar het de vage halo's en mosquito noise oplevert die je rond tekst ziet die als JPEG is opgeslagen.

WebP en AVIF zijn allebei moderne containerformaten die van videocodecs zijn afgeleid. Beide doen lossy en lossless, beide ondersteunen volledige alfatransparantie, en beide worden door elke actuele reguliere browser ondersteund. AVIF comprimeert over het algemeen harder dan WebP, vooral bij lage kwaliteitsinstellingen, en gaat om met brede kleurbereiken en hogere bitdieptes. De prijs is de codeertijd, die merkbaar trager kan zijn, en iets smallere ondersteuning buiten browsers, in oudere desktopprogramma's en beeldbewerkers.

Transparantie

Alleen PNG, WebP en AVIF kunnen een echt alfakanaal opslaan, waarbij elke pixel zijn eigen dekkingswaarde draagt. Dat is wat een logo netjes op elke achtergrondkleur laat staan.

Zet je een transparante afbeelding om naar JPEG, dan moet de transparantie ergens heen. De meeste tools vlakken hem af op wit, sommige op zwart, en je komt er pas achter welke wanneer de afbeelding op een gekleurde achtergrond verschijnt met een wit blok eromheen. Als je de uiteindelijke achtergrondkleur kent, vlak dan bewust af op die kleur in plaats van de converter te laten gokken.

Wanneer lossy prima is, en wanneer niet

Lossy is prima voor de definitieve uitlevering van fotografisch materiaal op de grootte waarop het daadwerkelijk getoond wordt. Bij verstandige kwaliteitsinstellingen is het verlies werkelijk moeilijk te zien.

Lossy is een slecht idee wanneer:

• De afbeelding tekst, dunne lijnen of grote vlakken van één kleur bevat. Compressie-artefacten hopen zich precies op harde randen op.
• Het bestand een werkmaster is die je later gaat bewerken en opnieuw exporteren.
• De afbeelding vergroot gaat worden, of achteraf zwaar wordt gekleurd, wat versterkt wat de encoder ook maar gedaan heeft.
• Exacte pixelwaarden ertoe doen, zoals bij wetenschappelijk, medisch of forensisch werk, of bij een schermafbeelding waar iemand cijfers van gaat aflezen.

Waarom een JPEG opnieuw opslaan hem telkens slechter maakt

Elke keer dat een JPEG gedecodeerd en opnieuw opgeslagen wordt, kwantiseert de encoder data die al gekwantiseerd is, en de afrondingsfout stapelt zich op. Het is niet zo dat de kwaliteit twee keer vanaf het origineel verlaagd wordt; het is zo dat de artefacten uit de eerste ronde nu als echt beelddetail behandeld en op hun beurt benaderd worden.

Op een hogere kwaliteitsinstelling opslaan draait dat niet terug. Detail dat bij de eerste opslag verdween is weg. Opnieuw coderen op kwaliteit 95 vanaf een bestand van kwaliteit 60 levert alleen een groter bestand op dat de artefacten van kwaliteit 60 trouw bewaart. Bewerk je een afbeelding herhaaldelijk, houd de master dan in een lossless formaat en exporteer aan het eind een JPEG, WebP of AVIF.

Globale verwachtingen voor de omvang

Dit zijn vuistregels, geen metingen, en de echte cijfers verschillen enorm met de inhoud van de afbeelding. Voor een typische foto bij dezelfde waargenomen kwaliteit kun je JPEG als uitgangspunt nemen, WebP ergens rond een kwart kleiner, en AVIF nog kleiner, waarbij het gat groter wordt naarmate je harder comprimeert. Voor vlakke afbeeldingen verslaat lossless WebP meestal PNG, soms ruimschoots. Ruis en fijne textuur blazen elk lossy formaat op, dus een korrelige foto zal nooit comprimeren als een schone studio-opname.

Schaal terug voordat je comprimeert

De grootste winst zit vrijwel nooit in het formaat. Hij zit in de afmetingen. Een afbeelding die op 4000 pixels breed wordt uitgeleverd en in een kolom van 800 pixels getoond wordt, draagt ongeveer vijfentwintig keer meer pixeldata dan nodig, en geen enkele encoder kan dat repareren. Schaal terug naar ruwweg de grootte waarop hij getoond wordt (het dubbele, als je op schermen met hoge pixeldichtheid mikt), kies dan het formaat, en stel daarna de kwaliteit bij tot je het verschil net kunt zien en ga dan één stap terug.