Een afbeelding is klaar voor een website als ze een duidelijk doel heeft, gebruikt mag worden, passend is uitgesneden, efficiënt is opgeslagen en een tekstalternatief heeft dat bij haar functie past. Het kleinste bestand is niet altijd de beste keuze: bezoekers moeten nog steeds een product kunnen herkennen, een diagram kunnen lezen of de bedoeling van een illustratie kunnen begrijpen. Beoordeel de afbeelding op de pagina waar ze daadwerkelijk komt te staan voordat u haar goedkeurt.
Gebruik deze checklist bij het voorbereiden van een nieuwe site, het vervangen van een te zware banner of het overdragen van een map met beeldmateriaal aan een ontwikkelaar. Begin met één representatieve afbeelding, spreek de keuzes af en herhaal het proces voor de rest. Bewaar het origineel apart, zodat een latere herinrichting niet afhankelijk is van een al gecomprimeerde export.
1. Bepaal wat de afbeelding moet vertellen
Beschrijf de functie van elke afbeelding in één zin. Een productfoto kan een afwerking laten zien, een procesdiagram kan een volgorde uitleggen en een decoratieve textuur kan eenvoudig de sfeer van de pagina ondersteunen. Als niemand de functie kan benoemen, heroverweeg dan of de download zijn plaats verdient. Een lichtere pagina kan ook ontstaan door een overbodige afbeelding te verwijderen, niet alleen door alle bestaande afbeeldingen te comprimeren.
Leg bij het bronbestand vast waar het vandaan komt, wie de maker of leverancier is, welk gebruik is toegestaan en welke naamsvermelding nodig is. Controleer of de toestemming het beoogde websitegebruik en eventuele bewerkingen of uitsneden dekt. Een bestand ontvangen per e-mail geeft op zichzelf geen antwoord op die vragen. Leg onduidelijkheden over toestemming voor aan de verantwoordelijke rechthebbende of een gekwalificeerde adviseur; dit is een controle voor beeldbeheer, geen juridisch advies.
Bewaar bij gegenereerde conceptbeelden de prompt en het generatierecord en benoem hun functie eerlijk. Presenteer een verzonnen werkplek, team of product niet als een foto van het bedrijf. Verwijder onnodige persoonsgegevens uit schermafbeeldingen en inspecteer de uiteindelijke export, ook wat zichtbaar is in browsertabbladen of accountpanelen.
2. Kies een formaat dat bij de inhoud past
Kies een eerste formaat, exporteer een proefversie en vergelijk die met het origineel op het formaat waarin mensen de afbeelding zullen zien. Verschillende beelden reageren anders op dezelfde coderingsinstellingen. Er is geen kwaliteitswaarde of bestandsextensie die elk beeld automatisch geschikt maakt voor publicatie.
- Foto's en gedetailleerde illustraties: vergelijk WebP of AVIF met een goed gecodeerde JPEG. Kies de optie die de belangrijke details behoudt bij een aanvaardbare downloadgrootte.
- Eenvoudige logo's en diagrammen: overweeg SVG als er een betrouwbaar vectororigineel beschikbaar is. Controleer de aangeleverde SVG voordat u die aan de site toevoegt en houd essentiële tekst beschikbaar op de pagina.
- Rasterbeelden waarvoor exacte randen of transparantie nodig zijn: vergelijk PNG met een geschikte verliesvrije of transparante WebP-export. Inspecteer dunne lijnen, letters en doorschijnende randen tegen de werkelijke achtergrond.
- Geanimeerde beelden: vraag eerst of beweging informatie toevoegt. Een stilstaand beeld kan hetzelfde overbrengen met minder afleiding en een eenvoudigere technische uitvoering.
Dit zijn uitgangspunten om te testen, geen verplichting om elk formaat te maken. Elke extra variant heeft een reden en een werkende manier van aanbieden nodig. Een ongebruikte AVIF naast de gepubliceerde JPEG verbetert niets. Bewaar de exportinstellingen bij het beeldrecord, zodat iemand anders een correctie kan reproduceren zonder te hoeven gokken.
3. Stem de afmetingen af op de indeling
Maak onderscheid tussen de afmetingen van het bronbestand, de weergegeven afmetingen en de uitsnede. Een foto kan duizenden pixels bevatten en toch in een bescheiden kaartje verschijnen. Voor elk kaartje het volledige cameraorigineel exporteren verspilt dataverkeer zonder het kaartje noodzakelijkerwijs bruikbaarder te maken. Omgekeerd wordt onscherpte zichtbaar wanneer een kleine export over een groot scherm wordt uitgerekt.
Met responsieve afbeeldingscode kunt u via srcset meerdere beeldbreedtes aanbieden, terwijl sizes de verwachte breedte in de indeling beschrijft. De browser kiest een bestand op basis van die informatie en zijn omgeving. Gebruik picture wanneer de compositie moet veranderen, bijvoorbeeld voor een krappere mobiele uitsnede. MDN legt het onderscheid tussen resolutiewisseling en compositieaanpassing uit in de handleiding voor responsieve afbeeldingen.
Maak voor de beoordeling een lijst van de echte beeldplekken: een banner over de volle breedte, een inhoudsafbeelding in twee kolommen, een kaartje en een voorvertoning voor sociale media. Controleer op een smalle telefoon en een breed scherm. Houd het onderwerp weg van randen die bij het uitsnijden verdwijnen. Als een gezicht, etiket of belangrijk kenmerk wordt afgesneden, lost andere compressie dat niet op; pas de uitsnede of indeling aan.
Stel passende attributen voor width en height in, zodat de browser ruimte kan reserveren op basis van de beeldverhouding. Zorg dat de responsieve CSS en eventuele alternatieve uitsneden overeenkomen met die gereserveerde ruimte. Test zowel het eerste laden als de volledig geladen pagina: een stabiele schermafbeelding kan een eerdere verschuiving verbergen.
4. Comprimeer zonder het doel van de afbeelding te verliezen
Vergelijk exports naast elkaar op het beoogde weergaveformaat. Controleer kleurverlopen op zichtbare banden, fijne randen op halo's, kleine details op vervaging en transparante delen op onverwachte randjes. Ga bij productbeelden na of een textuur of kleurverschil niet is verdwenen. Welk compromis aanvaardbaar is, hangt af van wat de bezoeker moet kunnen zien of begrijpen.
Spreek voor elke beeldplek een richtwaarde voor de bestandsgrootte af en onderzoek uitzonderingen. Een gedetailleerd instructiebeeld kan meer bytes verdienen dan een decoratief kaartje. Een richtwaarde moet een nuttig gesprek over formaat, uitsnede en afmetingen op gang brengen; ze mag geen onleesbaar resultaat afdwingen of een verzonnen universele regel worden, zoals “elke afbeelding moet kleiner zijn dan 100 KB”.
Meet het bestand dat de browser werkelijk ontvangt. Een contentsysteem kan een upload opnieuw comprimeren, een onverwachte variant aanbieden of een eerdere afbeelding in de cache bewaren. Inspecteer na publicatie de weergegeven pagina en de netwerkrespons. Bewaar één goedgekeurd origineel en duidelijk benoemde exports, in plaats van een al gecomprimeerde afbeelding steeds opnieuw met kwaliteitsverlies op te slaan.
5. Schrijf alt-tekst voor de functie van de afbeelding
Begin bij de omliggende inhoud. Informatieve afbeeldingen hebben een tekstalternatief nodig dat hun relevante betekenis overbrengt; decoratieve afbeeldingen gebruiken doorgaans een leeg alt="". Als een afbeelding de toegankelijke naam van een link of knop levert, beschrijf dan de actie of bestemming. Complexe diagrammen hebben een uitgebreidere uitleg in de buurt nodig. De W3C-beslisboom voor alt-tekst helpt deze situaties te onderscheiden.
Een detailfoto op een materialenpagina kan bijvoorbeeld “Handgreep van geborsteld messing met een afgeronde rand” gebruiken. Een klikbaar downloadpictogram heeft een beschrijving van het doel van de download nodig, niet van de pijl. Een decoratieve gloed achter een kop hoeft niet bij elke schermlezergebruiker “blauwe gloeiende achtergrond” aan te kondigen. Dezelfde afbeelding kan op een andere pagina een ander alternatief nodig hebben, omdat haar functie is veranderd.
Schrijf bondig en natuurlijk en neem alleen details op die de relevante visuele informatie helpen vervangen. Stop het attribuut niet vol met zoekwoorden voor diensten. Controleer of een bijschrift of aangrenzende alinea al hetzelfde zegt en voorkom onnodige herhaling tijdens het lezen. Vertaal alternatieven samen met de pagina, ook wanneer gelokaliseerde labels of schermafbeeldingen hun betekenis beïnvloeden.
Beoordeel de pagina terwijl afbeeldingen niet beschikbaar zijn en inspecteer de toegankelijke namen van afbeeldingslinks. Zo vindt u ontbrekende betekenis en dubbele aankondigingen die bij een visuele beoordeling onopgemerkt kunnen blijven. Geautomatiseerde controles kunnen een ontbrekend attribuut signaleren, maar niet betrouwbaar beoordelen of een zin het juiste beschrijft.
6. Laad het belangrijke beeld op het juiste moment
De hoofdafbeelding die bij aankomst zichtbaar is, mag niet door lazy loading worden vertraagd. Afbeeldingen verderop op de pagina komen in aanmerking voor loading="lazy". Reserveer ook daarvoor ruimte. De uitleg over lazy loading van web.dev beschrijft waarom aanvankelijk zichtbare afbeeldingen een andere behandeling nodig hebben dan beelden buiten het eerste zichtbare schermgebied.
Controleer welke afbeelding daadwerkelijk het grootste zichtbare element op de pagina wordt. Een grote decoratieve banner kan concurreren met de kop en nuttige inhoud. Als de hoofdafbeelding waarschijnlijk het Largest Contentful Paint-element is, zorg dan dat de browser haar vroeg kan vinden en beoordeel of een hoge ophaalprioriteit passend is. Door elke afbeelding hoge prioriteit te geven, verdwijnt dat nuttige onderscheid.
Test met een nieuwe paginalading en een beperkte verbinding en scroll vervolgens door de hele pagina. Let op lege plekken die leeg blijven, zichtbare inhoudsverschuivingen en downloads die veel groter zijn dan hun weergaveplek nodig heeft. Beschouw een lokale prestatieaudit als bewijs over de geteste pagina en testopstelling, niet als een belofte voor de verbinding of het apparaat van elke bezoeker.
7. Gebruik een besliswerkblad voordat u exporteert
Bewaar dit korte overzicht bij de map met beeldmateriaal. Het verbindt een visuele keuze aan een technische controle en geeft de volgende redacteur iets bruikbaarders dan een bestandsnaam die eindigt op “definitief”. Vul één rij per functie in wanneer hetzelfde origineel op meerdere plaatsen voorkomt.
| Keuze | Vastleggen en controleren |
|---|---|
| Doel en bron | Wat de afbeelding uitlegt; bronbestand; toestemmings- of goedkeuringsrecord. |
| Plaatsing en uitsnede | Pagina en beeldplek; weergegeven breedtes; aandachtspunt; mobiele uitsnede. |
| Export | Gekozen formaat; pixelafmetingen; bestandsgrootte; instellingen; visuele beoordeling. |
| Alternatief | Informatieve, decoratieve of functionele rol; gelokaliseerde tekst; uitleg in de buurt. |
| Aanbieden | Responsieve varianten; gereserveerde afmetingen; laadgedrag; gepubliceerde URL. |
Denk aan een fictieve keramiekwinkel die een foto van een kom voorbereidt voor een productpagina. Het origineel is een goedgekeurde foto van 4000 pixels breed. Het team controleert de werkelijke beeldplek op de productpagina, exporteert twee bruikbare breedtes, vergelijkt JPEG en WebP en kiest de versie die de details van het glazuur behoudt. De uitsnede voor telefoons houdt de rand zichtbaar. Het alternatief beschrijft de relevante afwerking; de aangrenzende producttekst vermeldt afmetingen en onderhoudsinstructies.
Dit voorbeeld beschrijft een beslisproces, geen verplicht exportrecept of klantresultaat. Een textuurdetail, een maattekening en een decoratief campagnebeeld zouden tot andere keuzes leiden. Leg de reden voor een uitzondering vast, zodat die bij de volgende update niet ongedaan wordt gemaakt.
8. Controleer vindbaarheid en de uiteindelijke pagina
Gebruik standaard afbeeldingselementen voor betekenisvolle inhoud, bied een werkende terugvaloptie via src en houd afbeeldings-URL's toegankelijk voor crawlers wanneer vindbaarheid gewenst is. Gebruik beschrijvende bestandsnamen en plaats afbeeldingen bij relevante tekst. Googles SEO-richtlijnen voor afbeeldingen leggen deze werkwijzen uit en vermelden ook dat Google CSS-achtergrondafbeeldingen niet indexeert. Deze controles ondersteunen vindbaarheid, maar garanderen geen indexering of posities in zoekresultaten.
- Controleer de goedgekeurde afbeelding, uitsnede en het alternatief in elke gepubliceerde taal.
- Controleer het geselecteerde responsieve bestand, de intrinsieke afmetingen en het laadgedrag.
- Volg afbeeldingslinks met het toetsenbord en ga na of hun namen duidelijk zijn.
- Inspecteer de voorvertoning voor sociale media apart; die kan een andere uitsnede en een ander bestand gebruiken.
- Houd het origineel, de exportinstellingen en het toestemmingsrecord beschikbaar voor de volgende update.
Als beeldvoorbereiding deel uitmaakt van een groter websiteproject, bekijk dan de websitedienst van Digital Studio en neem bestaand materiaal en ontbrekende beelden op in uw websitebriefing. Een duidelijke materiaallijst helpt het project te beginnen met concrete keuzes over wat behouden, vervangen of gemaakt moet worden.
