Begin met het doel van de afbeelding
Gebruik alleen afbeeldingen die iets toevoegen. Een sfeerfoto vraagt om een andere aanpak dan een logo of een screenshot met kleine tekst. Zorg dat belangrijke tekst niet uitsluitend in een afbeelding staat.
1. Kies het juiste bestandsformaat
JPEG is geschikt voor veel foto’s, PNG voor beelden waarbij verliesvrije kwaliteit of transparantie belangrijk is. WebP biedt vaak kleinere bestanden en ondersteunt transparantie. AVIF kan nog efficiënter zijn, maar vergelijk kwaliteit en compatibiliteit. SVG is geschikt voor eenvoudige schaalbare illustraties uit een vertrouwde bron.
2. Gebruik passende pixelafmetingen
Bepaal eerst hoe groot de afbeelding op de website verschijnt. Een foto van 4000 pixels breed is meestal overbodig wanneer de weergave maximaal 800 pixels is. Houd rekening met schermen met hoge pixeldichtheid, maar lever niet standaard het grootste origineel aan.
3. Comprimeer en controleer
Exporteer met een redelijke kwaliteitsinstelling en bekijk het resultaat op een telefoon en desktop. Let op blokvorming en onscherpe details. De kleinste bestandsgrootte is niet altijd de beste keuze.
4. Gebruik responsive afbeeldingen
Met srcset en sizes kan de browser een passende afbeeldingsvariant kiezen. Dat voorkomt dat een telefoon onnodig een grote desktopafbeelding moet downloaden.
5. Schrijf goede alt-teksten
Beschrijf bij informatieve afbeeldingen kort wat de bezoeker moet weten. Herhaal niet automatisch de bestandsnaam of alle omliggende tekst. Decoratieve afbeeldingen kunnen een lege alt-tekst krijgen: alt="". Een afbeelding die als link dient, moet het doel van de link begrijpelijk maken.
6. Voorkom verspringende pagina’s
Geef waar mogelijk width en height op of gebruik CSS aspect-ratio. Laad afbeeldingen onderaan de pagina eventueel lui, maar doe dat niet met de belangrijkste afbeelding bovenaan.
Voorbeeld: een afbeelding met vaste afmetingen
<img src="foto.webp" alt="Zelfgemaakte website op een laptopscherm" width="800" height="500" loading="lazy">Checklist voor afbeeldingen
- Gebruik alleen relevante beelden.
- Kies afmetingen passend bij de weergave.
- Vergelijk WebP, AVIF, JPEG en PNG waar zinvol.
- Schrijf een zinvolle alt-tekst of gebruik alt="" bij decoratie.
- Controleer laadtijd en beeldkwaliteit op mobiel.