Afbeeldingen vormen gemiddeld 48% van het totale paginagewicht van een website op mobiele apparaten. Daarom is beeldoptimalisatie iets wat je niet kunt negeren.
Ten eerste moet je je afbeeldingen comprimeren om hun bestandsgrootte te verkleinen. We raden aan om de ShortPixel-plugin te gebruiken. De automatische lossy compressie zorgt voor de perfecte balans tussen kwaliteit en grootte.
Ten tweede moet je je afbeeldingen converteren naar WebP, een bestandsindeling gemaakt door Google die nu wordt ondersteund door alle moderne browsers. In onze tests zijn .webp-bestanden gemiddeld 59% kleiner dan PNG- of JPG-bestanden. Hiermee wordt de waarschuwing van Google "serveer afbeeldingen in next-gen formaten" opgelost. Opnieuw kan ShortPixel dit automatisch voor je doen. Je kunt dit zelfs nog verder verbeteren met het nieuwere AVIF-formaat.
Ten derde moet je lazy load toepassen op je afbeeldingen, zodat alleen de afbeeldingen binnen het zichtbare deel van de pagina direct worden gedownload. In onze eigen tests gaf het inschakelen van lazy loading ons een snelheidsverhoging van 33%. Hoe meer media je hebt, hoe groter het voordeel zal zijn. Het lost ook de waarschuwing van Google op om "offscreen afbeeldingen uit te stellen".
Perfmatters heeft vier verschillende lazy load-opties die je kunt inschakelen:
- Lazy load afbeeldingen (WebP-ondersteuning).
- Lazy load iframes (YouTube, Vimeo, etc.).
- Iframes vervangen door een voorbeeldweergave en een SVG-play-icoon dat de video laadt bij klikken.
- DOM-bewaking.
- YouTube-videovoorbeeld
Ten vierde kun je Cumulative Layout Shift (CLS) verminderen door automatisch ontbrekende breedte- en hoogteattributen aan je afbeeldingen toe te voegen. Ten slotte kun je kritieke afbeeldingen automatisch vooraf laden om de Largest Contentful Paint (LCP) te verminderen.