Beschrijf afbeeldingen en maak ze lichter, zodat ze de tekst ondersteunen
Beschrijving
Dit criterium controleert de afbeeldingen van de pagina. Van de inhoudsafbeeldingen (zichtbaar, minstens 50 × 50 px, niet gemarkeerd als decoratief) moet minstens 90% een alternatieve tekst hebben en 90% hun afmetingen declareren. Minstens 80% van de rasterafbeeldingen moet in WebP of AVIF zijn (SVG-bestanden tellen niet mee), en geen enkele afbeelding mag groter zijn dan 500 kB.
iPand controleert of er een alternatieve tekst is, niet of die klopt, en beoordeelt de visuele kwaliteit van afbeeldingen niet.
Waarom dit belangrijk is voor AI
Een crawler die de tekst van de pagina leest, ziet van een afbeelding alleen de alternatieve tekst. Google gebruikt die, samen met computervisie en de inhoud van de pagina, om te begrijpen waar een afbeelding over gaat, en raadt aan je tekst te ondersteunen met afbeeldingen van goede kwaliteit. Afbeeldingen zijn bovendien vaak het zwaarste deel van een pagina.
- Een precieze alternatieve tekst zegt wat de afbeelding toont: een product, een plek, een persoon.
- WebP en AVIF comprimeren veel beter dan JPEG en PNG: de pagina laadt sneller.
- Gedeclareerde afmetingen reserveren de ruimte van de afbeelding en voorkomen dat de pagina verschuift tijdens het laden.
Zo los je het op
- 1 Beschrijf elke afbeelding in de alternatieve tekst Vul het attribuut alt van elke nuttige afbeelding in met een korte zin: “Blauwe elektrische bakfiets voor de werkplaats” in plaats van “image1” of een rij zoekwoorden. Laat bij een puur decoratieve afbeelding de alt leeg (alt=""): die telt dan niet mee.
- 2 Zet afbeeldingen om naar WebP of AVIF Exporteer foto’s en illustraties als WebP of AVIF, vanuit je bewerkingsprogramma of met een plug-in van je CMS. Wil je een JPEG als terugval houden? Bied dan beide aan in een element <picture>: de browser downloadt alleen het eerste formaat dat hij kan lezen.
- 3 Maak zware afbeeldingen lichter Geen enkele afbeelding mag groter zijn dan 500 kB. Schaal elke afbeelding naar haar weergavegrootte, comprimeer haar en bied meerdere formaten aan met srcset en sizes, zodat mobiele apparaten een passende versie krijgen.
- 4 Declareer breedte en hoogte Voeg de attributen width en height toe aan elke tag <img>, in de verhoudingen van de afbeelding, of reserveer de ruimte met de CSS-eigenschap aspect-ratio. De browser houdt de plek dan vrij tijdens het laden, ook als de stylesheet de grootte daarna aanpast.
In het kort
Beschreven, lichte afbeeldingen met gedeclareerde afmetingen helpen zoekmachines de pagina te begrijpen en maken haar sneller. iPand controleert die vier punten bij elke analyse; of je alternatieve teksten kloppen, controleer je zelf.
