21 augustus 2024
Afbeeldingen opschalen
Toen ik in 2007 begon met mijn bedrijf had ik net een Wacom Cintiq 21UX gekocht. Mijn werk bestond toen vooral uit het maken van illustraties en retoucheren van foto’s. Een veelgevraagd verzoek was het ‘opschalen’ van foto’s met een lage resolutie.
Menigeen weet dat je foto’s niet echt kunt opschalen, althans… ze krijgen wel een hogere resolutie, maar worden vooral waziger. Je ogen registreren dat en je hersenen interpreteren dat alsof je ogen niet goed scherp gesteld zouden hebben. Daardoor is het heel vermoeiend/vervelend om naar een onscherp beeld te kijken.
Om dat te vookomen gebruikte ik destijds een truc. Deze truc had ik afgekeken van reclameborden. Reclameborden worden gedrukt met puntjes in slechts 4 kleuren: cyaan, magenta, geel en zwart (CMYK). Deze druktechniek wordt halftone genoemd.
Een voorbeeld van een halftone afbeelding (klik voor kleur)
Het opmerkelijke is dat je bij zo’n halftone reclamebord nooit het idee hebt dat de afbeelding onscherp is, zoals je hierboven kunt zien. Natuurlijk is de foto dat wel, maar je hersenen krijgen door de puntjes het signaal dat er juist is scherpgesteld door de ogen. Dit principe gebruikte ik bij het opschalen van foto’s. Om vergelijkbare puntjes in de foto toe te voegen, vergrootte ik de foto altijd eerst in Photoshop, waardoor hij wazig werd, waarna ik een noise filter toevoegde voor de puntjes. Dit werkte uitstekend, net als bij de reclameborden.
Tegenwoordig maak ik vrijwel nooit meer drukwerk. Ik ben alleen maar met websites bezig. Daar worden ook veel afbeeldingen gebruikt en die moeten vaak juist verkleind worden zodat ze sneller laden. Op mijn website doe ik er ALLES aan om deze snel te laten laden… ook de afbeeldingen.
In het verleden gebruikte ik daarvoor een rastermethode en een beperkt aantal kleuren, een truc die ik had afgekeken van Low←Tech Magazine. Zij maken een GIF afbeelding met twee kleuren en alles daar tussenin wordt gevormd met een raster. Hierdoor krijg je een noise effect, dat er lekker ‘grungy’ uitziet. Om mensen toch een goed beeld te geven van wat de afbeelding voorstelt, kan je (vaak) op de afbeeldingen klikken voor een hogere resolutie en/of kleurenversie. Die zwaardere versie wordt dus alleen op verzoek geladen.
Ik kon dat proces echter niet lekker automatiseren, mede omdat GIF niet echt modern is. Gelukkig heeft Hugo allerlei automatische image processing opties, waaronder een filter. Met de onderstaande instellingen maak ik elke afbeelding automatisch duotone in de perfecte kleur.
images.Saturation -100
images.Contrast -18
images.Brightness 15
images.Sepia 100
images.Saturation 110
images.Hue 195
Vervolgens schaal ik de afbeelding (automatisch) terug naar 600 pixels in de breedte, waardoor hij op de pagina iets opgerekt en wazig wordt. Dit ondervang ik door een subtiel SVG raster over de afbeelding heen te leggen via CSS. Het beste voorbeeld hiervan zie je in de foto op deze pagina. Tenslotte comprimeer ik de hele afbeelding met een 50% WEBP compressie. Hierdoor is bovenstaande 600px brede afbeelding (die van de halftone) slechts 44kb en die op deze pagina nog iets kleiner.
Kortom: visueel is er weinig veranderd… maar je kijkt nu dus naar automatisch door Hugo gekleurde, geschaalde en gecomprimeerde afbeeldingen in WEBP formaat, met een subtiele rastertruc om de lage resolutie te verhullen.
Update 12-09-2024: Kennelijk was Google blij met deze verandering, want er is plotsling een enorme toename in het aantal Goede URL’s in Google Search Console.
() Joost van der Schee