Lichtere afbeeldingen uitleveren zonder kwaliteitsverlies

Afbeeldingen zijn meestal het zwaarste onderdeel van een pagina, dus zijn ze ook de grootste, makkelijkste winst voor prestaties. Het doel is niet "kleiner tot elke prijs" — het is het kleinste bestand dat er nog goed uitziet op het scherm waar het terechtkomt. Hier is een workflow die daar komt zonder elke export met het blote oog te controleren.

Verklein vóór je comprimeert

De grootste besparing zit meestal in de <b>afmetingen</b>, niet in de codec. Een hero-afbeelding van 4000px die in een slot van 800px wordt getoond, verspilt ~96% van zijn pixels nog vóór de compressie begint. Bepaal de echte weergavegrootte, houd rekening met schermen met hoge DPR (2× is ruim voldoende voor de meeste foto's), en verklein daar eerst naartoe. Comprimeer een afbeelding met de juiste afmetingen en elke volgende stap heeft minder te doen.

Kies het juiste formaat voor de klus

Foto's: AVIF of WebP, met een JPEG-fallback als je die nog nodig hebt. Vlakke UI, logo's en screenshots: lossless PNG of WebP. Publiceer geen PNG van een foto of een JPEG van een screenshot — beide zijn het verkeerde gereedschap en kosten je bytes <i>én</i> kwaliteit. Twijfel je, encodeer dan op beide manieren en behoud de winnaar.

Stel een perceptueel kwaliteitsdoel in

"Kwaliteit 80" betekent iets anders per encoder, dus richt je op een <b>perceptueel</b> resultaat in plaats van op een magisch getal. Een SSIMULACRA2-score rond 80–90 is visueel lossless voor de meeste foto's; onder ~70 begin je het te zien op verlopen en huid. Kies een ondergrens, laat de encoder die halen, en je krijgt consistente kwaliteit over een hele bibliotheek in plaats van giswerk per bestand.

# Verklein naar weergavegrootte, converteer dan met een kwaliteitsdrempel
imageforge hero.png --resize 1600 --convert avif --quality 82
imageforge ./gallery/*.jpg --convert webp --quality 80 --recursive

Automatiseer het

Een workflow blijft alleen hangen als hij saai is om uit te voeren. Verwerk een hele map in één batch, laat de originelen ongemoeid, en laat de tool rapporteren wat hij bespaarde zodat je het resultaat kunt vertrouwen. Het punt is om "lichter" het standaardpad te maken, geen handmatige klus die iemand vergeet vóór de lancering.

Publiceer het kleinste bestand dat er nog goed uitziet — niet het kleinste bestand. Dat verschil is de hele klus.

Meet, gok niet

Sluit de cirkel door de werkelijke besparing én de werkelijke kwaliteit te controleren, niet alleen de bestandsgrootte. Een 90% kleiner bestand dat er verslechterd uitziet, is geen winst; een 60% kleiner bestand dat er visueel identiek uitziet, wel. Volg beide en je kunt met vertrouwen instellingen opschroeven in plaats van op zeker te spelen.