Foto's voor je website: verkleinen en verborgen gegevens weghalen

Een foto van je telefoon is al snel vierduizend pixels breed en een paar megabyte groot. Op een website heb je daar weinig aan: de meeste schermen laten veel minder pixels zien, en elke megabyte moet bij je bezoeker binnenkomen voordat de foto verschijnt. Op mobiele data duurt dat lang, en bezoekers haken af voordat de pagina klaar is. Daarnaast zit er in zo’n foto meer dan je ziet, zoals het toestel waarmee hij is gemaakt en vaak de plek waar dat gebeurde.

Hoe groot een foto mag zijn

Een vuistregel die voor de meeste sites werkt: de lange kant hooguit 2000 pixels, en voor kleine foto’s minder. Dan is een foto meestal een paar honderd kilobyte, en op een gewoon scherm zie je geen verschil met het origineel. Claude kan daarnaast van elke foto een kleinere versie maken. De browser kiest dan zelf de versie die bij het scherm past, zodat een telefoon niet de grote hoeft op te halen.

Lijkt een foto op een groot scherm toch wat zacht, dan kan dat aan de kwaliteit liggen die bij het omzetten is gekozen, of aan de afmeting. Laat Claude die ene foto dan opnieuw maken uit het origineel, met een iets hogere kwaliteit of iets groter. Van een foto die al verkleind is, maak je nooit meer een scherpe.

Bewaar de originelen dus, op je laptop of in een map op je server buiten de map van je site. Staan ze in de map van je site, dan zet publish, het commando waarmee je op een server met het installatiescript van retrAIt je site online zet, ze gewoon mee online, ook als er geen pagina naar verwijst. Wat er zo nog meer per ongeluk openbaar kan staan, lees je in Wat staat er per ongeluk openbaar op je website?.

Twee dingen in de code maken je pagina rustiger. Geef elke foto een breedte en hoogte mee, dan houdt de browser er alvast ruimte voor vrij en springt de tekst niet weg tijdens het laden. Ook web.dev, de site van Google voor wie websites bouwt, raadt dat aan. En laat foto’s onderaan de pagina pas laden als iemand ernaartoe scrolt. Claude Code doet allebei als je erom vraagt.

WebP, en wat je met HEIC doet

WebP is een formaat voor afbeeldingen dat bij dezelfde kwaliteit kleiner is dan jpg. Volgens het overzicht van MDN, de documentatie van Mozilla over webtechniek, zijn WebP-foto’s gemiddeld 25 tot 35 procent kleiner dan jpg-foto’s die er hetzelfde uitzien, en tonen de grote browsers ze allemaal. Voor een gewone site is het een veilige keuze.

Foto’s van een iPhone zijn vaak HEIC-bestanden. Die toont niet elke browser, dus die zet je om. Ook dat laat je Claude doen. Soms installeert hij daar eerst een hulpprogramma voor op je server, en dat mag.

Wat er verborgen in een foto zit

In een foto van een camera of telefoon zit een blok met extra gegevens, EXIF genoemd. Daarin staan bijvoorbeeld het merk van je toestel en het tijdstip van de foto. Staat de locatievoorziening van je camera aan, dan staan er ook coördinaten in. Apple legt uit dat die in elke foto en video worden opgeslagen, zodat je later op plek kunt zoeken.

Neem als voorbeeld Pieter, keramist in Haarlem. Hij werkt vanuit huis en fotografeert zijn kommen op de keukentafel, bij het raam. Zet hij die foto’s ongewijzigd op zijn site, dan kan iedereen die zo’n bestand downloadt en de gegevens uitleest, zien waar hij woont. Op zijn site staat bewust alleen “Haarlem”. De gegevens moeten er dus uit. Hetzelfde geldt voor foto’s die hij van anderen krijgt: stuurt een klant een foto van zijn vaas bij haar thuis in de vensterbank, dan kan haar adres erin zitten.

Op een iPhone kun je bij het delen de locatie weglaten: tik in het deelscherm op Opties en zet Locatie uit. Kopieer je je foto’s op een andere manier naar je computer, dan blijven de gegevens er meestal in zitten. Voor je site haal je ze er daarom altijd uit, bij het verkleinen.

Eerst rechtop, dan pas de gegevens weg

Hier gaat het vaak mis. Een camera slaat een staande foto vaak liggend op, met in de verborgen gegevens een notitie hoe hij gedraaid moet worden. Browsers lezen die notitie en zetten de foto rechtop; volgens MDN doen alle grote browsers dat sinds 2020 vanzelf. Haal je alle gegevens weg zonder de foto eerst echt te draaien, dan verdwijnt die notitie ook. Je portret staat dan ineens op zijn kant, en het origineel op je laptop staat gewoon rechtop, zodat je niet snapt waar het misging.

De volgorde is dus: eerst draaien volgens die notitie, dan verkleinen en omzetten, en pas daarna de gegevens weghalen. Geef Claude Code dat in die volgorde mee:

In ~/materiaal staan mijn originele foto’s. Maak er webversies van in de map beeld van deze site. Zet elke foto eerst rechtop volgens de gegevens van de camera, maak de lange kant hooguit 2000 pixels, sla hem op als WebP en haal daarna alle verborgen gegevens weg, ook de locatie. Laat de originelen staan. Laat me per foto zien hoe groot hij was en hoe groot hij nu is.

Zet dezelfde volgorde ook in CLAUDE.md, het bestand dat Claude aan het begin van elke sessie in de map van je site leest. Dan gaat het bij de volgende serie foto’s vanzelf goed, ook als je over drie maanden vergeten bent waarom. Kijk na het publiceren op je telefoon of alles rechtop staat. Dat zie je zelf sneller dan welk programma ook.

Alt-tekst en bestandsnamen

Geef elke foto die iets vertelt een korte beschrijving in de code: de alt-tekst. Voorleessoftware leest die voor aan wie de foto niet kan zien, en Google gebruikt hem om te begrijpen wat erop staat. Schrijf een gewone zin, zoals “Blauwe kom met craquelé glazuur op een houten plank”, en geen rij zoekwoorden. Google waarschuwt dat een alt-tekst vol zoekwoorden als spam kan worden gezien. Een foto die alleen versiering is, krijgt een lege beschrijving.

Geef je bestanden ook korte namen die zeggen wat erop staat, in kleine letters en zonder spaties. kom-blauw-craquele.webp zegt meer dan IMG_4032.jpg, en ook dat raadt Google aan. Pieter laat Claude zijn bestanden meteen bij het omzetten zo noemen, dan hoeft hij er later niet meer aan te denken.

Kies je foto’s streng. Tien sterke foto’s zeggen meer dan veertig gemiddelde, en een foto die je weglaat, hoeft ook niet te laden. Pak vandaag de tien foto’s die je het liefst op je site wilt, en kijk bij één ervan in de bestandsgegevens of er een locatie in staat. Laat Claude er daarna webversies van maken, in de volgorde hierboven, en kijk op je telefoon of alles snel laadt en rechtop staat. Hoe die foto’s een plek krijgen op een site over jezelf, lees je in Een persoonlijke website maken die bij je past.