Foto's optimaliseren voor het web, zo doe je dat
Je hebt een mooie foto gemaakt. Bewerkt, uitgesneden, klaar. Je uploadt hem naar je website en een dag later kijkt iemand anders ernaar. Wat die persoon ziet, hangt niet alleen af van hoe goed de foto is. Het hangt ook af van hoe snel de pagina laadt. Dat klinkt als een technisch probleem, en dat is het ook.
Maar het is een technisch probleem dat fotografen direct raakt, omdat een trage website bezoekers kost. En als je je werk online presenteert, je workshops verkoopt of klanten wil bereiken, dan is dat geen detail.
Waarom bestandsgrootte er toe doet
Een foto die rechtstreeks uit Capture One of Lightroom komt, is groot. Niet groot in de zin van veel pixels, maar groot in de zin van megabytes. Een RAW-bestand is al snel 30 tot 50 MB. Een geëxporteerde JPEG op hoge kwaliteit zit al gauw op 8 tot 15 MB.
Op een website heb je dat niet nodig. Een scherm toont maximaal 72 tot 96 pixels per inch. Een afdruk heeft 300 nodig. Al die extra informatie in een webfoto doet niks, behalve de laadtijd verlengen.
Google kijkt naar laadtijd als één van de factoren voor zoekmachineoptimalisatie. Een pagina die traag laadt, scoort minder goed. En een bezoeker die drie seconden wacht, klikt weg. Dat geldt voor iedereen, maar zeker voor fotografen die portfolio's of workshoppagina's hebben met meerdere afbeeldingen op één pagina.
Waar het misgaat
Het meest voorkomende probleem is simpel: fotografen exporteren voor web met dezelfde instellingen als voor print. Hoge resolutie, hoge kwaliteit, groot bestand. Het ziet er goed uit, maar het laadt traag.
Een tweede probleem is formaat. JPEG is al jaren de standaard voor webfoto's, maar WebP is inmiddels door alle grote browsers ondersteund en levert bij gelijke kwaliteit kleinere bestanden. Veel fotografen weten dat niet, of exporteren standaard naar JPEG omdat dat altijd zo ging.
Een derde probleem is afmetingen. Als je een foto uploadt die 4.000 pixels breed is, maar je website toont hem op 1200 pixels, dan downloadt de browser alsnog het volledige bestand en schaalt het daarna pas. Dat is verspilde data.
Wat de juiste instellingen zijn
Voor de meeste websites geldt: exporteer je foto's op maximaal 1500 tot 2000 pixels breed, JPEG of WebP, kwaliteit tussen 75 en 85 procent. Dat is voor de meeste schermen meer dan genoeg, en de bestandsgrootte blijft beheersbaar.
Als je foto's bedoeld zijn voor een fullscreen achtergrond of een grote hero-afbeelding, kun je naar 2400 pixels, maar ga niet hoger dan nodig. Het kwaliteitspercentage is het deel waar fotografen het vaakst verkeerd zitten. Ze zetten het op 95 of 100, omdat ze bang zijn voor kwaliteitsverlies. Maar het verschil tussen 85 en 95 procent is op een scherm nauwelijks zichtbaar, terwijl het bestand bij 85 procent een stuk kleiner is.
Niet alleen kleiner, ook slim
Comprimeren is één ding. Maar er zijn nog twee dingen die helpen bij het optimaliseren van webfoto's. Ten eerste: geef je bestanden een beschrijvende naam. Niet IMG_4823.jpg, maar portret-vrouw-amsterdam.jpg.
Zoekmachines lezen bestandsnamen mee. Het kost niks en het helpt je vindbaarheid. Ten tweede: vul de alt-tekst in als je foto's uploadt naar je website. Dat is de tekst die een schermlezer voorleest en die Google gebruikt om te begrijpen wat er op een foto staat. Veel fotografen laten dit leeg, terwijl het een makkelijke manier is om meer uit je bestaande content te halen.
Hoe ik het zelf doe
Ik exporteer vanuit Capture One naar een aparte map voor web. Maximaal 2.048 pixels breed, JPEG op 82 procent kwaliteit. Die instelling heb ik een keer goed gezet en daarna niet meer aangeraakt.
Het werkt voor alles wat ik online zet: portfoliobeelden, workshopfoto's, blogafbeeldingen. Voor het comprimeren na de export gebruik ik de beeldoptimizer op apps.michielheijmans.com. Je laadt je foto's in, de tool comprimeert en schaalt ze zonder zichtbaar kwaliteitsverlies, en je downloadt ze klaar voor upload. Geen installatie, geen abonnement voor de basisversie, gewoon in je browser.
De tool is gekoppeld aan de websitechecker, zodat je ook direct kunt zien of je pagina's al snel genoeg laden. En als je toch bezig bent met je uitsnede, kun je vanuit dezelfde omgeving door naar de crop-tool. Dat klinkt als reclame, en dat is het een beetje ook. Maar ik heb de tool gebouwd omdat ik zelf iets nodig had wat snel werkte zonder gedoe. Als het voor mij werkt, werkt het waarschijnlijk ook voor jou.
Wat je vandaag kunt doen
Open je website. Laad een pagina met meerdere foto's en kijk hoe lang het duurt. Als je op een normaal wifi-netwerk langer dan twee seconden wacht, is er werk aan de winkel.
Controleer de bestandsgroottes van je geüploade foto's. De meeste CMS-systemen, zoals Squarespace of WordPress, tonen die informatie in de mediabibliotheek. Alles boven de 500 kilobyte voor een reguliere webfoto is te groot. En als je nieuwe foto's wil uploaden: neem even de tijd om ze eerst te optimaliseren.
Het is een kleine stap die je website een stuk sneller maakt, en die de mensen die je werk bekijken een betere ervaring geeft. De beeldoptimizer staat klaar als je wil beginnen.