PNG of JPG? De vuistregel die ik al tien jaar gebruik

PNG en JPG zijn al meer dan twintig jaar de twee standaardantwoorden op „sla deze afbeelding op", en de meeste mensen kiezen er per ongeluk tussen — wat het exportvenster ook als standaard had staan. Dat gaat goed tot de dag dat je iemand een schermafbeelding van 9 MB mailt, of een logo uitlevert met een lelijke grijze halo eromheen, en opeens telt de keuze.

Het punt is dit: de beslissing is echt simpel. Ze komt neer op één vraag die ik al zo'n tien jaar stel, en die me nog geen enkele keer in de steek heeft gelaten.

De ene vraag

Bestaat deze afbeelding uit randen, of uit licht?

Dat is het. Tekst, logo's, iconen, schermafbeeldingen, diagrammen, lijntekeningen, alles met harde grenzen en platte kleurvlakken — dat zijn randen. Foto's, verlopen, alles met vloeiende, doorlopende tonen en duizenden subtiele kleurovergangen — dat is licht.

Randen willen PNG. Licht wil JPG. Bijna alles volgt daaruit.

Waarom randen PNG willen

PNG is lossless. Elke pixel die je opslaat, komt exact terug, voor altijd, hoe vaak je hem ook opnieuw opent. Het comprimeert door reeksen identieke kleur te vinden, precies waar op randen gebaseerde afbeeldingen vol mee zitten — een effen knop, een witte achtergrond, een zwarte lijn. PNG verslindt dat en blijft messcherp.

Het heeft ook een alfakanaal, dus het kan echt transparant zijn. Daarom hoort elk logo dat je op een gekleurde achtergrond wilt zetten een PNG te zijn. JPG kent helemaal geen transparantie — het vult die vlakken met wit, en daar komt die lelijke halo vandaan.

De zwakke plek zijn foto's. Sla een foto op als PNG en hij legt trouw elke korrel sensorruis en elk micro-verloop op volle kwaliteit vast, en het bestand loopt op. PNG is niet verkwistend omdat het slecht is. Het is verkwistend omdat het eerlijk is over detail dat je oog graag zou vergeven.

Waarom licht JPG wil

JPG is lossy. Het gooit informatie weg die je oog slecht opmerkt — fijne kleurvariatie, hoogfrequent detail — en dat doet het opmerkelijk goed op foto's. Dat is precies het spul dat een foto over heeft. Het resultaat is een bestand van een fractie van de grootte, en je ziet niet wat er ontbreekt.

Richt JPG op randen, en het valt uit elkaar. Het smeert wazige artefacten rond harde grenzen — vooral rond tekst — omdat scherpe randen precies het hoogfrequente detail zijn dat het is ontworpen om weg te gooien. Een JPG-schermafbeelding van code oogt licht vervuild rond elke letter. Dat is niet je monitor. Dat is het formaat dat werkt zoals bedoeld op de verkeerde invoer.

De groottetabel die het beslecht

Dezelfde twee bronafbeeldingen, op beide manieren opgeslagen bij verstandige instellingen:

Lees hem in beide richtingen. De foto is als JPG bijna 5x kleiner, zonder zichtbaar verlies. Maar de schermafbeelding en het logo zijn als JPG groter — en ze zouden er ook slechter uitzien, met halo's en wazigheid. Welk formaat kleiner is, klapt volledig om afhankelijk van wat er op de afbeelding staat. Dat is de hele les in drie regels.

De randgevallen (er zijn er maar twee het weten waard)

Transparantie dwingt PNG af. Moet enig deel van de afbeelding doorschijnend zijn, dan valt JPG af, ongeacht de inhoud, omdat het fysiek geen alfakanaal kan opslaan. Zelfs een foto uitgeknipt op een transparante achtergrond moet PNG zijn (of WebP).

Tekst-over-foto is een afweging. Een foto met een ingebakken bijschrift is deels licht, deels rand. Ik kies JPG als het vooral foto is en accepteer iets zachtere tekst, of PNG als de tekst scherp moet blijven en ik me de grootte kan veroorloven. Er is geen zuivere winnaar; je kiest welk gebrek je liever hebt.

Als je de verkeerde al hebt

Meestal kies je niet bij het exporteren — je zit vast aan een bestand dat iemand al verkeerd heeft opgeslagen. Een fotograaf gaf je PNG's van 14 MB. Een ontwerper stuurde een logo als een JPG met halo. Dat is gewoon een omzetting.

De slimme richting op gaan — PNG naar JPG voor een foto die te zwaar is opgeslagen — is een duidelijke winst, en het draait hier gewoon in je browser, zodat het bestand je apparaat nooit verlaat. De andere kant op — JPG naar PNG — is eerlijk maar beperkt: het maakt het bestand vanaf hier lossless, wat je wilt vóór het bewerken, maar het kan artefacten die de JPG al inbakte niet wegpoetsen. Lossy is een deur in één richting. Omzetten naar PNG loopt je niet terug naar binnen; het stopt alleen dat je nog meer verliest.

Stel de ene vraag — randen of licht — en je zit vrijwel elke keer goed. Ik stel hem nog steeds bij elke export. Het kost een halve seconde en het heeft me een hoop grijze halo's bespaard.