De grootste snelheidswinst op de meeste websites, en je hebt er geen ontwikkelaar voor nodig.
Je optimaliseert afbeeldingen door ze te exporteren op de grootte waarop ze getoond worden, ze op te slaan als WebP, breedte en hoogte in de code mee te geven en afbeeldingen onder de vouw pas te laden bij het scrollen. Samen is dat bij de meeste sites de helft van de laadtijd.
STAP VOOR STAP
Op volgorde van opbrengst
- Verklein tot de weergavegrootteEen foto van 4000 pixels breed die op 800 wordt getoond, laat bezoekers vijf keer te veel downloaden. Exporteer op de grootte waarop hij verschijnt, hooguit het dubbele voor scherpe schermen.
- Sla op als WebPWebP is doorgaans dertig procent kleiner dan JPEG bij dezelfde zichtbare kwaliteit en wordt overal ondersteund. Alleen dit omzetten scheelt merkbaar.
- Kwaliteit rond 80 procentBoven de tachtig procent zie je geen verschil meer en betaal je alleen bestandsgrootte. Onder de zeventig wordt het zichtbaar.
- Geef breedte en hoogte meeZonder die waarden reserveert de browser geen ruimte en verspringt de pagina tijdens het laden. Dat is de meest voorkomende oorzaak van een slechte CLS-score.
- Laad onder de vouw laterAfbeeldingen die pas na scrollen zichtbaar worden hoeven niet direct geladen. De afbeelding bovenaan juist wel, en met voorrang.
- Schrijf een beschrijvende alt-tekstVoor schermlezers en voor het geval de afbeelding niet laadt. Beschrijven, niet volstoppen met zoekwoorden.
VALKUILEN
Waar het misgaat
De klassieke fout is de foto rechtstreeks uit de camera uploaden. Een bestand van vijf megabyte is voor een bezoeker op mobiel internet een muur.
De tweede is alles lui laden, inclusief de afbeelding bovenaan. Die moet juist als eerste komen, want hij bepaalt wanneer de pagina 'klaar' lijkt.
- Niet rechtstreeks uit de camera — verklein altijd eerst.
- Bovenste afbeelding niet lui laden — die heeft juist voorrang nodig.
- Altijd breedte en hoogte — voorkomt verspringen.
- Geen zoekwoorden in de alt-tekst — beschrijven is het doel.
- Test op mobiel met wifi uit — de eerlijkste controle.
VEELGESTELDE VRAGEN
Meer over afbeeldingen
Welke tool gebruik ik?
Elk fotobewerkingsprogramma kan exporteren op formaat en kwaliteit. Voor het omzetten naar WebP zijn er gratis online tools. Je hebt hier geen abonnement voor nodig.
Hoe groot mag een afbeelding zijn?
Als vuistregel onder de 200 kilobyte voor een gewone foto, en onder de 400 voor een grote afbeelding bovenaan. Kom je daarboven, dan is er nog winst te halen.
Doen jullie dit automatisch?
Bij sites die wij bouwen wel: afbeeldingen worden op maat geleverd, in WebP, met afmetingen in de code. Dat is onderdeel van de bouw en niet een losse post.
Snelheidswinst die je zelf kunt pakken?
Wij meten je site en zeggen welke afbeeldingen de meeste tijd kosten.