Je hebt een professionele fotograaf ingehuurd. De foto’s zijn prachtig en haarscherp. Je uploadt ze direct naar je website, want je wilt ze aan de wereld laten zien.
Stop! Je staat op het punt om je website om zeep te helpen.
Foto’s direct van de camera zijn vaak 5 tot 10 MB groot. Als je drie van zulke foto’s op je homepage zet, moet een bezoeker 30 MB downloaden via zijn 4G-verbinding. Gevolg: je site is traag, de bezoeker haakt af en Google straft je af. In dit artikel leer je hoe je afbeeldingen kunt optimaliseren voor het web zonder dat ze lelijk worden.
De Drie Gouden Regels van Afbeeldingsoptimalisatie
Een foto optimaliseren bestaat uit drie stappen: Formaat, Bestandsindeling en Compressie.
1. Formaat (Afmetingen)
Een foto van een moderne camera is vaak 6000 pixels breed. De meeste beeldschermen zijn maar 1920 pixels breed (Full HD).
Als jij die foto van 6000px uploadt, moet de browser van je bezoeker die enorme foto laden en hem vervolgens ‘live’ verkleinen om hem op het scherm te laten passen. Dat kost rekenkracht en data.
Mijn advies: Verklein (resize) foto’s op je computer voordat je ze uploadt.
• Full-screen achtergrond: max 1920px breed.
• Blog afbeelding: max 800-1000px breed.
2. Bestandsindeling (Kies WebP)
Gebruik jij nog JPG of PNG? Dat is zo 2018.
De nieuwe standaard is WebP. Dit is een bestandsformaat ontwikkeld door Google. Het kwaliteit is hetzelfde als JPG, maar het bestand is vaak 30% tot 50% kleiner.
Gebruik je WordPress? De meeste moderne optimalisatie-plugins zetten je foto’s automatisch om naar WebP.
3. Compressie (De lucht eruit)
In elke digitale foto zit data die het menselijk oog niet ziet. Door slimme compressie kun je die data weggooien. Je ziet geen verschil in kwaliteit, maar het bestand wordt wel 70% kleiner.
Tools die ik gebruik:
• TinyPNG (Gratis): Sleep je bestanden hierheen voordat je ze uploadt.
• Imagify of ShortPixel (Plugin): Deze plugins optimaliseren automatisch alles wat je naar WordPress uploadt.
De geheime truc: Lazy Loading
Stel je hebt een lange pagina met 10 foto’s. Moet de browser al die 10 foto’s direct laden zodra de bezoeker op de site komt? Nee.
Met Lazy Loading (lui laden) worden afbeeldingen pas ingeladen op het moment dat de bezoeker ernaartoe scrolt. Afbeeldingen die onderaan staan, worden dus nog niet gedownload. Dit maakt de eerste laadtijd van je pagina razendsnel.
Goed nieuws: Sinds WordPress 5.5 zit dit standaard ingebouwd, maar goede caching-plugins (zoals WP Rocket) doen dit vaak nog net iets slimmer.
Hoe check je of jij een probleem hebt?
Ga naar Google PageSpeed Insights en voer je URL in.
Zie je de melding “Geef afbeeldingen het juiste formaat” of “Gebruik moderne indelingen”? Dan heb je werk aan de winkel.
Conclusie
Snelheid is geld. Een trage site kost conversie. Door je afbeeldingen te verkleinen en om te zetten naar WebP, maak je je site direct sneller en scoor je beter op de Core Web Vitals van Google.
Heb je geen zin om 500 foto’s handmatig aan te passen? Ik kan een ‘bulk-optimalisatie’ uitvoeren op je hele mediabibliotheek. contact/">Stuur me een berichtje en we maken je site weer bliksemsnel.
