Een afbeelding klaarmaken om te publiceren

Schaal terug naar de grootte waarop de afbeelding daadwerkelijk getoond wordt, hooguit het dubbele daarvan voor schermen met hoge pixeldichtheid. Snijd bij naar de vorm die de opmaak nodig heeft in plaats van de browser hem te laten platdrukken. Comprimeer tot artefacten net zichtbaar worden en ga dan één stap terug. Verwijder de metadata als laatste. De volgorde doet ertoe: elke stap na de eerste werkt op veel minder pixels.

Afmetingen komen eerst

Het aantal pixels groeit met het kwadraat van de breedte, dus een bescheiden verschil in afmetingen is een enorm verschil in data. Een afbeelding die op 4000 pixels breed is opgeslagen en in een kolom van 800 pixels getoond wordt, draagt ongeveer vijfentwintig keer de data die hij nodig heeft, en geen enkele kwaliteitsinstelling haalt dat terug.

Om een doelbreedte te kiezen meet je hoe breed de afbeelding in de opmaak ooit maximaal getoond wordt, niet hoe breed het scherm wordt. Een kaart in een raster van drie kolommen is misschien nooit breder dan 380 pixels. Dient één bestand op meerdere plekken, kies dan de maat van de grootste.

Apparaatpixels, CSS-pixels en de DPI-mythe

Een CSS-pixel is een opmaakeenheid, geen fysiek puntje. De device pixel ratio is hoeveel apparaatpixels het scherm per CSS-pixel tekent: 1 op oudere monitoren, 2 op de meeste moderne telefoons en laptops, 3 op sommige telefoons. Een kolom van 800 CSS-pixels wordt bij ratio 2 met 1600 apparaatpixels getekend, en daarom oogt een afbeelding die op zijn CSS-breedte is geschaald zacht.

De praktische regel is 2x. Exporteer op twee keer de getoonde breedte en laat de browser terugschalen. Naar 3x gaan kost nog eens 125% aan data voor een verschil dat weinig mensen op normale kijkafstand zien.

DPI en PPI die in een bestand zijn opgeslagen doen op het web niet ter zake. Het is één getal in een header dat zegt op welk fysiek formaat het bestand afgedrukt zou moeten worden, en browsers negeren het volledig.

printed width in inches = pixel width / PPI

3000 px / 300 ppi = 10.0 in
3000 px /  72 ppi = 41.7 in    same file, same 3000 pixels

Exporteren op "300 DPI" voegt geen pixels toe en verandert geen beelddata.

Wat hersamplen doet

Terugschalen betekent dat veel bronpixels er één worden. Detail dat fijner is dan het nieuwe raster kan niet weergegeven worden, en als de resampler te weinig bronpixels bemonstert in plaats van over het hele gebied te middelen, vouwt dat detail terug als vals patroon: kartelige diagonalen, en moiré op fijne herhalende texturen zoals een gestreept overhemd of een tabel met randen van één pixel. Een goede verkleining middelt elke bijdragende pixel, en heeft er meestal wat verscherping na nodig.

Opschalen maakt geen detail. Interpolatie gokt alleen naar waarden tussen pixels die al bestaan, dus het resultaat is zacht of blokkerig. Upscalers op basis van machine learning verzinnen in plaats daarvan plausibel detail, wat niet hetzelfde is als het terughalen.

Beeldverhouding: bijsnijden, letterboxen of uitrekken

Bijsnijden houdt het onderwerp op de juiste schaal en gooit de randen weg, en is de juiste standaard. Letterboxen behoudt het hele beeld maar voegt balken toe en dwingt een keuze voor de balkkleur af; het verdient zijn plek wanneer er niets weggesneden mag worden, zoals bij kunstwerken of een diagram. Uitrekken vervormt, en het oog vangt dat meteen op bij gezichten, cirkels en letters.

.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* crop; contain = letterbox, fill = stretch */
}

Als één bestand in meerdere vormen verschijnt, denk dan in termen van het veilige gebied: het deel dat elke uitsnede overleeft. Een banner van 16:9 snijdt boven en onder weg, een tegel van 1:1 en een kaart van 4:5 snijden aan de zijkanten, dus wat ze allemaal behouden is een band door het midden. Houd het onderwerp en eventuele tekst daarbinnen, anders wordt een gezicht aan de rand van een liggende foto door de vierkante uitsnede onthoofd.

De kwaliteitsinstelling vinden

Een kwaliteitsgetal is geen percentage van iets, en de schalen zijn niet vergelijkbaar tussen encoders. JPEG 80, WebP 80 en AVIF 80 zijn drie ongerelateerde instellingen.

De methode is voor alle drie dezelfde. Exporteer op een paar instellingen, bekijk het resultaat op de grootte waarop het getoond wordt, en let op waar artefacten het eerst opduiken: gelijkmatige kleurverlopen zoals luchten, die banden en vlekken krijgen; harde randen en tekst, die gaan ringen. Zoek waar de schade zichtbaar wordt, ga één stap terug, en stop.

Eén vast getal is voor elke afbeelding verkeerd omdat de inhoud bepaalt hoeveel er weggegooid kan worden: een ruizige, texturige foto heeft meer bits nodig om te overleven, terwijl een vlakke illustratie uiteenvalt bij een instelling waar een drukke foto zijn schouders over ophaalt.

Uitsnedes, zachte randen en halo's

De achtergrond weghalen is juist wanneer de afbeelding op meer dan één achtergrondkleur moet staan, of andere elementen moet overlappen: productfoto's, logo's, een persoon die in een opmaak gemonteerd wordt. Het is verkeerd waar de grens werkelijk fijn is, zoals bij haar, gebladerte of glas, want een slechte matte ziet er slechter uit dan een eerlijke rechthoek.

Een harde rand is binair, elke pixel volledig ondoorzichtig of volledig transparant, wat past bij vlakke afbeeldingen maar trapjes geeft op alles wat fotografisch is. Een zachte matte staat gedeeltelijke dekking toe, zodat een pixel voor 40% onderwerp kan zijn, en dat is de enige manier waarop haar er goed uitziet.

De halo komt uit de randpixels. Lensonscherpte en antialiasing hebben de kleur van het onderwerp al met de oude achtergrond gemengd, dus elke pixel bevat:

observed = alpha * foreground + (1 - alpha) * background

Achtergrondverwijdering berekent alleen de alfa. De kleur die in die pixels achterblijft is nog steeds vervuild, dus een onderwerp dat uit een witte studio-opname is geknipt draagt een bleke rand: onzichtbaar op een witte pagina, overduidelijk op een donkere. Goede matting lost ook de voorgrondkleur op, wat als defringe of decontamineren van kleuren beschikbaar is. Lukt dat niet, trek de matte dan een fractie van een pixel naar binnen en verzacht de rand opnieuw.

Rotatie en metadata

Een afbeelding die in het ene programma rechtop staat en in het andere op zijn kant, is vrijwel altijd EXIF-oriëntatie. Camera's slaan het sensorbeeld ongedraaid op en voegen een tag toe die zegt hoe het gedraaid moet worden. Software die de tag leest toont het goed; software die hem negeert, waaronder veel beeldbibliotheken en miniatuurgeneratoren, toont de ruwe pixels op hun kant.

De oplossing is de rotatie in de pixels vast te leggen en de tag op 1 te zetten of te verwijderen. Draaien in stappen van 90 graden herschikt pixels zonder ze te hersamplen. Let op de dubbele rotatie: pixels al gedraaid, tag nog gezet, dus elke viewer die zich aan de regels houdt draait ze nog een keer.

Metadata verwijderen is een privacystap, geen opruimwerk. EXIF-, IPTC- en XMP-blokken dragen routinematig GPS-coördinaten met een nauwkeurigheid van enkele meters, het tijdstip van de opname, het merk, model en serienummer van de camera, de naam van de eigenaar, en soms een ingesloten miniatuur die de afbeelding nog toont zoals hij voor het bijsnijden was. Een foto die thuis is genomen en ongewijzigd wordt geplaatst, publiceert een huisadres.

Verwijder het als laatste, met één uitzondering: het ICC-kleurprofiel staat naast die metadata, en het weghalen bij een afbeelding met breed kleurbereik laat getallen achter die als sRGB gelezen worden, wat als vlakke of oververzadigde kleur opduikt. Zet eerst om naar sRGB en verwijder daarna al het overige.