Eerst verkleinen, dan comprimeren

Hoe groot een afbeeldingsbestand is, hangt vooral af van het aantal pixels, en dat aantal groeit met het kwadraat van de afmetingen. Een foto van 3000 × 2000 heeft 6.000.000 pixels; dezelfde foto op 1200 × 800 heeft er 960.000, 6,25 keer minder. Afmetingen terugbrengen is wat een bestand echt kleiner maakt; de kwaliteitsschuif bepaalt alleen hoe hard de codec de rest samenperst.

Mensen grijpen eerst naar de kwaliteitsschuif omdat die in beeld staat. Het is de tweede stap, en hem alleen gebruiken betekent detail weggooien uit een afbeelding die nog steeds veel groter is dan waar hij ooit op getoond wordt.

Hoeveel gegevens zitten er in elke maat?

Het aantal pixels van de maten die je het vaakst tegenkomt, en hoe die zich verhouden tot een foto van een hedendaagse telefoon.

Afmetingen Pixels Ten opzichte van 4032 × 3024
4032 × 3024 12.192.768
3000 × 2000 6.000.000 0,49×
1920 × 1080 2.073.600 0,17×
1200 × 800 960.000 0,08×
800 × 600 480.000 0,04×

Een telefoonfoto teruggebracht naar 1200 breed houdt 8 procent van de pixels waarmee hij begon. Geen enkele kwaliteitsinstelling komt daar in de buurt, en op een pagina waar de afbeelding op 600 of 800 pixels verschijnt is het zichtbare verschil nul.

Welke breedte moet je nemen?

De grootste maat waarop de afbeelding getoond wordt, keer twee voor schermen met een hoge pixeldichtheid, en geen pixel meer. Voor een afbeelding in een artikel is dat 1.600 pixels; voor een header over de volle breedte 1.920 of 2.400; voor een miniatuur 512.

Het getal om te vermijden is ‘het origineel’. Een foto van 12 megapixel uploaden om hem op 600 pixels breed te tonen, stuurt elf twaalfde van het bestand mee zodat de browser het kan weggooien, bij elk bezoek en op elk apparaat.

Welke passing wil je?

Drie modi, en ze beantwoorden verschillende vragen.

  • Binnen passen. Verkleint tot de hele afbeelding in het kader past, snijdt nooit bij en vergroot nooit voorbij het kader. De juiste standaard voor een galerij.
  • Vullen. Snijdt bij om het kader precies te bedekken. Goed voor een vierkante avatar of een kaart met een vaste verhouding, en er gaan randen af.
  • Uitrekken. Negeert de verhouding volledig. Bijna nooit wat je wilt, en het zit erin omdat het af en toe toch zo is.

Binnen passen is ook de veilige keuze als je afbeeldingen van verschillende vormen in één keer verwerkt, omdat het garandeert dat er niets wegvalt zonder dat je het ziet.

Maakt het voor meer uit dan de laadtijd?

Ja, op twee plekken die je later merkt. De grenzen van mail en uploadformulieren gaan het eerst open bij foto’s op volle grootte, en een formulier dat een bijlage van 12 MB weigert, neemt dezelfde afbeelding op 1200 pixels zonder mopperen aan. En op een trage of beperkte verbinding is een te grote afbeelding een pagina die nooit af laadt, niet een pagina die langzaam laadt.

Aan de ontvangende kant speelt opslag. Een gedeelde schijf die volloopt met kopieën van 12 megapixel van afbeeldingen die alleen op 800 pixels worden bekeken, betaalt dat verschil voor altijd.

Welk formaat, en waarom werd mijn PNG groter?

JPEG voor foto’s, PNG voor vlakke graphics met harde randen, WebP voor allebei waar het kan. PNG is verliesvrij, dus een foto als PNG opslaan bewaart elke pixel exact en geeft een bestand dat een veelvoud is van de JPEG waar hij uit kwam.

De omgekeerde fout komt net zo vaak voor. Een schermafbeelding of logo als JPEG opslaan zet compressievlekken rond elke harde rand, precies het soort inhoud waar JPEG het slechtst mee overweg kan, en transparantie kan het formaat al helemaal niet bewaren.

WebP is voor vrijwel elke inhoud bij vergelijkbare kwaliteit kleiner dan beide, en elke huidige browser leest het. De reden die overblijft om het niet te gebruiken is software verderop in de keten: sommige oudere desktopprogramma’s en drukkerijworkflows openen het nog niet.

Welke kwaliteitsinstelling klopt?

Voor JPEG 75 tot 85 bij foto’s. Onder de 70 worden vlekken zichtbaar in zachte verlopen, lucht en huid als eerste, en boven de 90 groeit het bestand snel voor een verschil dat niemand ziet.

Kwaliteit is ook geen percentage van iets. Het is een parameter van de codec, en 82 in de ene encoder is niet hetzelfde als 82 in de andere. Beoordeel het resultaat, niet het getal.

Eén ding om te weten: JPEG-compressie verliest iets elke keer dat hij wordt toegepast. Een JPEG openen, verkleinen en opnieuw opslaan past het verlies twee keer toe. Bestaat er een origineel, werk dan altijd daarvan en niet van een kopie die al eens geëxporteerd is.

Vragen die mensen stellen

Worden mijn foto’s ergens geüpload? Nee. Het verkleinen gebeurt op een canvas in je eigen browser en de bestanden verlaten je apparaat niet.

Haalt het de EXIF-gegevens weg? Ja, als gevolg van hoe de afbeelding opnieuw wordt getekend. Locatie, cameramodel en datums overleven het niet, wat meestal is wat je wilt voordat je een foto deelt, en goed om te weten als je ze nodig had.

Waarom ziet het resultaat er zachter uit dan het origineel? Omdat verkleinen pixels middelt. Een beetje verscherpen na het verkleinen is in de fotografie precies daarom gewoon.

Hoeveel afbeeldingen kan ik tegelijk doen? Zoveel als je wilt. Er is geen upload en geen wachtrij, dus de enige grens is het geheugen van je apparaat, en een grote stapel grote foto’s duurt zo lang als jouw machine erover doet.

Zet de afmetingen op wat er echt getoond wordt en schaaf daarna met de kwaliteit. Foto verkleinen doet beide in één keer, heic naar jpg regelt het standaardformaat van de iPhone, en png naar pdf is waar afbeeldingen heen gaan als ze een document moeten worden.