shadcn.io— duizenden kant-en-klare shadcn/ui-blokken
Ga naar de inhoud

Waarom je schermafbeeldingen 2 MB zijn — en hoe je ze 60–90% verkleint

Ik 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:

SchermafbeeldingAls PNGAls WebP
Een instellingenpagina, grotendeels wit1,6 MB~180 KB
Een volledig analytics-dashboard2,4 MB~310 KB
Een code-editor in donkere modus1,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


Alle artikelen