Begin bij de zwaarste zichtbare afbeeldingen
Open de netwerkweergave van uw browser en bekijk welke afbeeldingen veel bytes kosten. Vergelijk hun pixelafmetingen met de grootte op de pagina. Een foto van duizenden pixels breed is vaak onnodig voor een kleine kaart.
Bewaar het origineel buiten de geoptimaliseerde publicatiebestanden. Dan kunt u opnieuw exporteren zonder steeds kwaliteit te verliezen.
Een passend formaat kiezen
Voor foto's kunnen WebP of AVIF een kleinere download opleveren dan een ongunstig opgeslagen JPEG, maar vergelijk de werkelijke uitvoer en zichtbare kwaliteit. Transparantie, animatie en browserondersteuning kunnen de keuze beïnvloeden.
Gebruik SVG voor geschikte eigen vectorillustraties of logo's, mits het bestand uit een betrouwbare bron komt. Een rasterfoto naar SVG omzetten maakt die niet vanzelf kleiner.
Afmetingen en varianten
Maak varianten voor de werkelijke weergaven en laat de pagina via srcset en sizes de passende bron kiezen. Houd rekening met schermdichtheid zonder aan iedere mobiele bezoeker de grootste desktopafbeelding te sturen.
Vul breedte en hoogte in de markup in zodat de browser ruimte kan reserveren. Dat voorkomt onnodig verspringen wanneer het beeld binnenkomt.
Wat laadt u meteen?
Geef de belangrijke afbeelding bovenaan de pagina tijdig door aan de browser. Gebruik geen lazy loading voor een beeld dat direct zichtbaar en bepalend voor de eerste weergave is.
Afbeeldingen verder onder de vouw kunnen vaak later laden. Controleer dat ze bij scrollen verschijnen en dat carrousels of achtergrondbeelden niet onbedoeld buiten de gekozen aanpak vallen.
Controleer kwaliteit en betekenis
Vergelijk het resultaat op mobiel en desktop. Kijk naar tekst in beelden, productdetails, transparante randen en kleurverschillen. Controleer ook of de alternatieve tekst het doel van de afbeelding beschrijft; zet er geen rij zoekwoorden in.
Meet daarna downloadgrootte en laadtijd opnieuw. Bewaar de vorige publicatievariant totdat de nieuwe bestanden en links goed werken. Gebruik een aangepaste bestandsnaam of correcte cacheverversing wanneer bezoekers anders de oude versie blijven zien.