Afbeeldingen voorbereiden voor je website: formaat, uitsnede en alt-tekst

Een mooie foto is nog geen goede websiteafbeelding. Een groot origineel kan onnodig zwaar laden, een brede uitsnede kan het onderwerp op een telefoon afsnijden en een betekenisvol beeld kan zonder tekstalternatief informatie verbergen. Bereid je beelden daarom voor op de plek waar ze werkelijk gebruikt worden.

Deze gids helpt je van een map met losse bestanden naar een bruikbare beeldinventaris voor Claude Code. Je bepaalt per afbeelding wat ze moet uitleggen, welke uitsnede nodig is en hoe je de uitvoering controleert. Je hebt daarvoor geen vast aantal afbeeldingen per pagina nodig: kies beelden die iets toevoegen aan de inhoud.

1. Bepaal de taak van elk beeld

Noteer eerst waarom een afbeelding op de pagina komt. Is het een productfoto, een portret, een schema of een sfeerbeeld? Die taak bepaalt welke details zichtbaar moeten blijven en welke begeleidende tekst nodig is.

Bij een productfoto wil een bezoeker het product kunnen herkennen. Bij een procesdiagram moet de volgorde duidelijk zijn. Een portret geeft een gezicht bij een naam. Een puur decoratieve achtergrond kan sfeer toevoegen, maar draagt geen informatie die de lezer nodig heeft om de tekst te begrijpen.

Maak per beeld een korte fiche:

• Pagina en positie: waar wordt het beeld gebruikt?
• Doel: welke informatie verduidelijkt het?
• Bronbestand: welk bestand is het goedgekeurde origineel?
• Gebruik: is duidelijk dat je het beeld mag publiceren?
• Belangrijk detail: wat mag niet wegvallen bij het bijsnijden?
• Tekst: welke alt-tekst of welk bijschrift is nodig?

Laat belangrijke bedrijfsinformatie ook in de gewone paginatekst staan. Een adres, prijs of stap die alleen in een afbeelding staat, is lastiger bij te werken en kan voor sommige bezoekers onbereikbaar zijn. Onze gids over websiteteksten voorbereiden helpt je om tekst en beeld samen te plannen.

2. Kies formaat en afmetingen op basis van de weergave

Er zijn twee verschillende maten om op te letten: het aantal pixels en de bestandsgrootte. Een foto kan veel pixels hebben en goed gecomprimeerd zijn, of relatief klein zijn en toch onnodig zwaar. Controleer beide.

Bewaar het origineel apart en maak een versie voor de website. Kies een pixelmaat die bij de beoogde weergave past. Een kleine kaart heeft meestal geen volledig cameraorigineel nodig. Een groot beeld op een scherp scherm kan wel meer pixels nodig hebben dan zijn zichtbare breedte in CSS. Laat de implementatie verschillende beeldmaten aanbieden waar dat past.

Voor het bestandsformaat kun je deze praktische uitgangspunten gebruiken:

• Foto’s en complexe illustraties: vergelijk bijvoorbeeld WebP, AVIF of JPEG op kwaliteit en bestandsgrootte.
• Beelden met transparantie: kies een formaat dat transparantie ondersteunt, zoals WebP of PNG.
• Eenvoudige vectorillustraties en logo’s: een geschikt SVG-bestand kan scherp blijven bij verschillende afmetingen.

Er bestaat geen universeel maximumaantal kilobytes dat elk beeld goed maakt. Vergelijk het resultaat op de werkelijke weergavegrootte: blijven gezichten, lijnen en belangrijke details herkenbaar? Controleer ook de hele pagina wanneer er veel beelden samen worden geladen.

Een afbeelding alleen kleiner tonen met CSS maakt het bronbestand niet kleiner. Responsieve beeldbronnen kunnen verschillende bestanden aanbieden; de browser kiest dan een passende versie. (MDN: het img-element en responsieve beeldattributen)

3. Controleer de uitsnede op mobiel

Een beeldvlak op desktop is vaak breed, terwijl hetzelfde onderdeel op een telefoon smaller of hoger wordt. Bij een vullende weergave kan een deel van de foto buiten het beeldvlak vallen. Bekijk daarom het onderwerp, niet alleen of het kader netjes gevuld is.

Een fictief voorbeeld: je gebruikt een foto van een werktafel waarop het relevante gereedschap rechts ligt. Een gecentreerde mobiele uitsnede kan juist dat gereedschap verwijderen. Je kunt dan het focuspunt aanpassen, een andere verhouding kiezen of een afzonderlijke mobiele uitsnede maken.

Voor informatieve beelden, zoals een schema of productdetail, kan volledig tonen beter werken dan bijsnijden. Voor een sfeerbeeld is een beperkte uitsnede soms prima. Kies dit per beeld; één vaste instelling voor alle afbeeldingen is zelden een goede inhoudelijke beslissing.

Controleer op een breed én een smal scherm:

• ☐ Het belangrijkste onderwerp blijft zichtbaar.
• ☐ Tekst of details in het beeld worden niet afgesneden.
• ☐ Een gezicht of product krijgt een bruikbare uitsnede.
• ☐ Het beeld wordt niet uitgerekt.
• ☐ Een bijschrift staat bij het juiste beeld.

Gebruik daarna de uitgebreidere checklist om je website op mobiel te testen voor de rest van de pagina.

4. Schrijf alt-tekst voor de informatie die het beeld toevoegt

Alt-tekst is een tekstalternatief voor een afbeelding. Beschrijf wat een bezoeker moet weten wanneer die het beeld niet ziet. De juiste tekst hangt af van de context: dezelfde foto kan op een productpagina een andere taak hebben dan in een achtergrondsectie.

Bij een informatief beeld schrijf je een beknopte, concrete beschrijving. Bijvoorbeeld “Rode fietstas met twee zijvakken” wanneer die kenmerken op de productpagina relevant zijn. Bij een procesdiagram moet de uitleg van het proces ook beschikbaar zijn als tekst; een lange opsomming in één alt-attribuut is niet altijd prettig om te lezen.

Een zuiver decoratief beeld kan een lege alt-tekst hebben, zodat het geen onnodige beschrijving toevoegt. Bij een afbeelding die zelf een link of knop vormt, moet de toegankelijke naam duidelijk maken wat de bediening doet. Beschrijf dan de bestemming of actie waar dat nodig is. (MDN: tekstalternatieven voor afbeeldingen)

Maak alt-tekst niet tot een lijst zoekwoorden. Google gebruikt onder meer alt-tekst en de omliggende pagina-inhoud om beelden te begrijpen en raadt nuttige beschrijvingen aan. Een korte, beschrijvende bestandsnaam kan ook helpen om de inhoud herkenbaar te houden. (Google Search Central: image SEO)

Gebruik dus bijvoorbeeld fietsreparatie-werktafel.webp in plaats van afbeelding-final-3.webp. Een naam is vooral nuttig als je later het juiste bestand moet terugvinden; ze vervangt geen goede afbeelding of paginainhoud.

5. Geef Claude Code de beeldinventaris mee

Lever je bestanden aan met de gemaakte fiches. Benoem welke beelden informatief zijn, welke details zichtbaar moeten blijven en waar bestaande afbeeldingen vervangen mogen worden. Vraag om de huidige beeldcomponenten en projectafspraken te gebruiken.

Onderstaande briefing is een eigen voorbeeld. Pas de bestandspaden en pagina’s aan voordat je ze gebruikt.

Bereid de aangeleverde afbeeldingen voor op [pagina of route].
Lees de projectafspraken en de beeldinventaris in [bestand].

Gebruik de goedgekeurde originelen uit [map].
Bewaar die originelen en maak aparte versies voor de website.
Controleer per beeld de verhouding, pixelmaat en bestandsgrootte.
Gebruik beschrijvende bestandsnamen en de vastgelegde alt-teksten.

Gebruik de bestaande beeldcomponenten van het project.
Laat beelden responsief tonen en voorkom uitrekken.
Het belangrijke detail per beeld staat in de inventaris.
Controleer of dat detail op desktop en mobiel zichtbaar blijft.

Rapporteer welke bestanden je hebt toegevoegd of vervangen.
Toon de relevante pagina met de echte beelden.
Publiceer pas wanneer de afgesproken controle is afgerond.

Vraag bij twijfel om een voorstel voor de uitsnede. Zo kun je beoordelen of het beeld nog de bedoelde informatie overbrengt voordat het overal in de site wordt gebruikt.

6. Controleer de pagina vóór publicatie

Open de pagina met de echte beelden en herlaad ze. Let op ontbrekende bestanden, een verkeerde afbeelding, zichtbare vervorming en onderdelen die verspringen tijdens het laden. Beeldafmetingen of een gereserveerde verhouding kunnen de browser helpen om ruimte beschikbaar te houden. (MDN: width en height voor afbeeldingen)

• ☐ Alle bedoelde beelden laden op de juiste pagina.
• ☐ De uitsneden kloppen op desktop en mobiel.
• ☐ Informatieve beelden hebben passende tekstalternatieven.
• ☐ Decoratieve beelden voegen geen onnodige beschrijving toe.
• ☐ De bronbestanden zijn bewaard en de webversies herkenbaar benoemd.
• ☐ De pagina blijft bruikbaar terwijl beelden laden.
• ☐ Een gekozen deelafbeelding past bij de inhoud van de pagina.

Meer afbeeldingen zijn op zichzelf geen garantie op betere posities in zoekmachines. Gebruik beeld om een vraag duidelijker te beantwoorden en controleer de technische uitvoering. Voor de bredere vindbaarheid van een nieuwe pagina kun je onze SEO-checklist vóór lancering gebruiken.

Wil je je beeldkeuzes opnemen in een complete bouwopdracht? De gratis briefing voor Claude Code helpt je om de gewenste pagina en de controleafspraken vast te leggen.