Waarom je schermafbeeldingen 2 MB zijn — en hoe je ze 60–90% verkleint
Dov Azencot
@DovAzencotIk heb ooit de schermafbeeldingen in één e-mailthread van een ontwerpreview geteld. Elf stuks, PNG, gemiddeld net onder de 2 MB per stuk. Ruim twintig megabyte aan grotendeels witte dashboards, heen en weer vliegend tussen zes mensen die allemaal dezelfde app in een ander tabblad open hadden. Niemand stond erbij stil, want het „werkte." Dat is de val. Schermafbeeldingen zijn stiekem enorm, en de reden zit ingebakken in hoe je computer ze maakt.
Waarom een schermafbeelding een bestand van 2 MB is
Als je de sneltoets voor een schermafbeelding indrukt, slaat je besturingssysteem een PNG op. Dat is een verstandige standaard — PNG is lossless, dus de opname is pixelperfect, en voor een schermafbeelding vol scherpe tekst is dat echt het juiste instinct. Het probleem is wat PNG met grootte doet.
PNG slaat elke pixel exact op. Een modern scherm is dicht — een opname van een volledig venster op een Retina- of 4K-scherm kan 2.000+ pixels breed zijn, en PNG legt elk van die miljoenen pixels trouw op volle kwaliteit vast. Het maakt het niet uit dat 60% van het beeld dezelfde tint bijna-wit is. Het gooit niets weg, want weggooien is niet wat het doet. Dus een schermafbeelding van een bijna lege instellingenpagina — visueel vrijwel niets — weegt nog steeds 1,5 tot 2,5 MB, omdat het canvas enorm is, zelfs als de inhoud schaars is.
De zet: zet om naar WebP
WebP kan iets wat PNG niet kan — lossy comprimeren terwijl het scherpe randen en transparantie behoudt. Op schermafbeeldingen specifiek grenst die combinatie aan magie, want een schermafbeelding is grotendeels platte vlakken (goedkoop te comprimeren) met wat tekst (die WebP scherp houdt). De lossy-doorgang gooit de onmerkbare ruis weg; je oog dient nooit een klacht in.
Echte cijfers van schermafbeeldingen op mijn eigen schijf:
| Schermafbeelding | Als PNG | Als WebP |
|---|---|---|
| Een instellingenpagina, grotendeels wit | 1,6 MB | ~180 KB |
| Een volledig analytics-dashboard | 2,4 MB | ~310 KB |
| Een code-editor in donkere modus | 1,9 MB | ~240 KB |
Dat is ruwweg 85–90% eraf, en naast elkaar gelegd kan ik niet zien welke welke is. De tekst blijft leesbaar tot op de pixel. Dit is de omzetting met het hoogste rendement die ik doe, juist omdat schermafbeeldingen om te beginnen al zo waanzinnig zwaar zijn — er zit een enorme hoeveelheid niets uit te knijpen.
„Wordt de tekst dan niet wazig?"
Dit is de angst, en het is een terechte, want je hebt waarschijnlijk een JPG-schermafbeelding met wazige, omrande tekst gezien en aangenomen dat alle lossy-formaten dat doen. WebP is beter met randen dan JPG — merkbaar beter. Bij een verstandige kwaliteitsinstelling blijft tekst op een WebP-schermafbeelding scherp. Ik heb tot 400% ingezoomd op zoek naar artefacten rond letters en kwam met lege handen te staan bij normale UI-opnames.
De eerlijke uitzondering: draai je de kwaliteit hard omlaag om een piepklein bestand na te jagen, dan zul je tekst uiteindelijk zien verzachten. De oplossing is dat niet te doen. Een middenkwaliteitsinstelling levert je de winst van 60–90% al op met de tekst intact. Er is geen reden om door te duwen tot in het bereik waar het breekt.
Wanneer verkleinen niet helpt
Twee gevallen waarin ik de PNG met rust laat.
Gaat de schermafbeelding terug een ontwerptool in om van aantekeningen te worden voorzien, geannoteerd of samengesteld, dan houd ik hem lossless. WebP's lossy-doorgang is een deur in één richting, en ik wil geen compressie inbakken in iets wat ik ga bewerken en opnieuw exporteren. Lever de WebP uit, bewaar het PNG-master — dezelfde regel als altijd.
En is een schermafbeelding al klein — een klein bijgesneden detail, één enkele knop, iets dat al onder de ~100 KB zit — dan verzet de omzetting nauwelijks iets. De winst van 60–90% komt van bestanden die enorm zijn omdat het canvas enorm is. Een kleine uitsnede heeft dat probleem al opgelost. Voeg geen stap toe voor niets.
Hoe ik het echt doe
Ik haal schermafbeeldingen door de PNG-naar-WebP-converter op deze site voordat ze ook maar in de buurt van een e-mail of document komen. Het gebeurt in je browser, dus de opname — die, eerlijk gezegd, vaak de helft van je scherm laat zien plus wat er op de achtergrond stond — verlaat je apparaat nooit. Zet de PNG erin, kijk hoe de groottekolom instort, download de WebP, voeg die in plaats daarvan toe.
Het grotere punt is niet de tool, het is de reflex. Zodra „schermafbeelding, dan verkleinen" automatisch wordt, stop je met afbeeldingen van 2 MB af te vuren op mensen die de app al open hebben, versturen je e-mails sneller, en houden threads op tot in de tientallen megabytes op te zwellen. Die e-mail met elf schermafbeeldingen zou samen ongeveer 2 MB zijn geweest in plaats van ruim twintig. Dezelfde plaatjes. Alles hetzelfde. Alleen zonder al dat dode gewicht.
Gerelateerde artikelen
Waarom ik PNG naar WebP converteer (en die ene keer niet)
PNG is een schitterend formaat om in te werken en een verkwistend om uit te leveren. Dit is wat WebP je echt bespaart, waar het niets oplevert, en de ene regel die ik nooit breek.
AVIF vs WebP — het kleinste bestand is niet altijd het juiste
AVIF wint meestal op grootte van WebP, soms met 20% of meer. Dit is wat die extra compressie je kost aan encodeertijd en randgevallen, en wanneer ik toch naar WebP grijp.
SVG naar PNG — wanneer je echt pixels nodig hebt (en wanneer niet)
Een SVG schaalt eindeloos en blijft piepklein, dus rasteren voelt als een stap terug. Soms is het dat ook. Wanneer je echt PNG-pixels uit een vector nodig hebt, en wanneer je de SVG met rust laat.
Alle artikelen