PNG is verre van verouderd — goed gebruikt, is het het beste formaat voor vlakke graphics. Hier lees je hoe je de kleinste bestanden krijgt zonder banding- of ditheringartefacten.
PNG krijgt onterecht de naam "groot" te zijn, maar de meeste opgeblazen PNG's zijn gewoon slecht gecodeerd. Met een duidelijke workflow in drie stappen — kwantiseren, optimaliseren, opnieuw comprimeren — kun je een PNG routinematig met de helft of meer verkleinen, lossless, terwijl je scherpe randen en zuivere kleur behoudt. Dit is de volgorde die ertoe doet.
PNG is gebouwd voor <b>vlakke graphics met scherpe randen</b>: logo's, iconen, UI-exports, diagrammen, screenshots en alles met transparantie. Het is lossless, dus randen blijven messcherp — geen JPEG-mosquito-ruis rond tekst. Voor foto's is het de verkeerde keuze (gebruik WebP/AVIF/JPEG), maar voor de synthetische graphics die moderne apps vullen, is niets beter dan een goed gemaakte PNG.
De meeste UI-graphics gebruiken veel minder dan 16 miljoen kleuren. Een 24-bit truecolor PNG omzetten naar een <b>8-bit geïndexeerd palet</b> (≤256 kleuren) is de grootste hefboom — het halveert het bestand vaak al vóór enige andere optimalisatie. De valkuil is de kleuren goed kiezen en verlopen zorgvuldig behandelen; een goede kwantiseerder kiest een optimaal palet en dithert alleen waar het echt helpt.
PNG past vóór compressie een <i>filter</i> per rij toe, en die keuze beïnvloedt de grootte drastisch. <b>oxipng</b> test filterstrategieën en comprimeert de afbeelding opnieuw, snel en parallel, zonder enig kwaliteitsverlies. Het is de veilige, dagelijkse standaard: richt het op een map en het maakt gewoon elke PNG kleiner. Draai het zowel op truecolor- als op paletafbeeldingen.
Als je het absolute minimum wilt en het niet erg vindt om te wachten, is <b>zopfli</b> een DEFLATE-compatibele compressor die veel harder zoekt naar een kleinere stream. Het is traag — soms seconden per afbeelding — maar het produceert standaard PNG's die elke decoder leest, vaak een paar procent kleiner dan met alleen oxipng. Perfect voor assets die je één keer publiceert en miljoenen keren serveert.
# De volledige pipeline, van begin tot eind lossless imageforge ui.png --palette auto --lossless # stap 1 imageforge ./icons/*.png --optimize oxipng # stap 2 imageforge logo.png --optimize zopfli --effort max # stap 3
De twee faalmodi van paletgebaseerde PNG's zijn <b>banding</b> (zichtbare stappen in een verloop wanneer er niet genoeg kleuren zijn) en <b>ditheringruis</b> (spikkels door kleuren te spreiden om er meer te laten lijken). De oplossing is beoordelingsvermogen: houd verlopen in truecolor, kwantiseer de vlakke gebieden, en dither alleen bij kleine paletgroottes waar het oog ruis verkiest boven banden. Twijfel je, vergelijk dan de gekwantiseerde versie met het origineel voordat je publiceert.
Palet, oxipng en zopfli in één keer — standaard lossless, op je Mac.