Afbeeldingen zijn vaak verantwoordelijk voor meer dan de helft van de bestandsgrootte van een webpagina. Niet-geoptimaliseerde afbeeldingen vertragen je website, verhogen je bouncepercentage en schaden je SEO. In dit artikel leer je hoe je afbeeldingen correct optimaliseert voor maximale snelheid zonder kwaliteitsverlies.

Het juiste afbeeldingsformaat kiezen

WebP: de moderne standaard

WebP is het aanbevolen formaat voor webafbeeldingen in 2024. Het biedt 25-35% kleinere bestanden dan JPEG bij dezelfde kwaliteit. WebP ondersteunt zowel lossy als lossless compressie en transparantie. Alle moderne browsers ondersteunen WebP, dus er is geen reden meer om het niet te gebruiken.

JPEG: voor foto's zonder transparantie

JPEG blijft geschikt voor foto's waar geen transparantie nodig is en waar je oudere browsers moet ondersteunen. Gebruik een kwaliteitsinstelling tussen 70-85% voor de beste balans tussen grootte en kwaliteit. Hogere percentages leveren nauwelijks zichtbare verbetering maar wel grotere bestanden.

PNG: alleen voor transparantie

PNG bestanden zijn vaak veel groter dan JPEG of WebP. Gebruik PNG alleen wanneer je transparantie nodig hebt en WebP geen optie is. Voor logo's met weinig kleuren kan PNG8 een compacte optie zijn.

SVG: voor iconen en illustraties

Vectorafbeeldingen schalen perfect naar elk formaat zonder kwaliteitsverlies. Gebruik SVG voor logo's, iconen en eenvoudige illustraties. SVG bestanden zijn vaak kleiner dan bitmap-alternatieven en kunnen met CSS gestyled worden.

Afbeeldingen comprimeren

Online tools

TinyPNG en Squoosh zijn uitstekende gratis tools voor het comprimeren van afbeeldingen. TinyPNG werkt goed voor JPEG en PNG, terwijl Squoosh ook WebP-conversie biedt met realtime preview van de kwaliteit. Upload je afbeeldingen, kies je instellingen en download het geoptimaliseerde resultaat.

WordPress plugins

Smush is een populaire plugin die automatisch afbeeldingen comprimeert bij upload. De plugin kan ook bestaande afbeeldingen in bulk optimaliseren en ondersteunt WebP-conversie. Na installatie werkt Smush automatisch op de achtergrond.

ShortPixel biedt agressievere compressie en uitstekende WebP-ondersteuning. De plugin werkt met een credit-systeem waarbij je maandelijks een aantal afbeeldingen gratis kunt optimaliseren. Voor grotere websites is een betaald plan beschikbaar.

Imagify van de makers van WP Rocket integreert naadloos met die caching plugin. Het biedt drie compressieniveaus en automatische WebP-conversie met fallback voor oudere browsers.

Afmetingen correct instellen

Laad nooit een afbeelding van 4000 pixels breed als deze maar op 800 pixels wordt getoond. Dit verspilt bandbreedte en vertraagt je pagina onnodig. Schaal afbeeldingen naar de maximale weergavegrootte voordat je ze uploadt.

Voor responsieve websites gebruik je de srcset-attribuut om verschillende formaten aan te bieden. De browser kiest dan automatisch de juiste grootte voor het scherm van de bezoeker. WordPress genereert automatisch meerdere formaten bij upload.

Lazy loading implementeren

Lazy loading zorgt ervoor dat afbeeldingen pas laden wanneer ze in beeld komen. Dit versnelt de initiële paginalaading aanzienlijk, vooral op pagina's met veel afbeeldingen.

Native lazy loading

Moderne browsers ondersteunen lazy loading via het loading attribuut. Voeg loading equals lazy toe aan je img-elementen. WordPress doet dit automatisch sinds versie 5.5. Native lazy loading werkt zonder JavaScript en is de eenvoudigste oplossing.

Via caching plugins

LiteSpeed Cache biedt uitgebreide lazy loading opties. Je kunt instellen welke afbeeldingen wel en niet lazy moeten laden, exclusies configureren voor belangrijke afbeeldingen boven de vouw en placeholder-afbeeldingen tonen tijdens het laden.

Afbeeldingen boven de vouw

Afbeeldingen die direct zichtbaar zijn zonder scrollen moeten juist niet lazy loaden. Deze afbeeldingen, zoals je hero-image of logo, moeten zo snel mogelijk laden. Gebruik preload voor kritieke afbeeldingen en zorg dat ze geoptimaliseerd zijn voor snelle LCP-scores.

Responsive images serveren

Met het picture-element kun je verschillende afbeeldingsformaten en -groottes serveren op basis van schermgrootte en browser-ondersteuning. Serveer WebP aan browsers die het ondersteunen met een JPEG fallback voor de rest. WordPress-thema's en plugins zoals Elementor kunnen dit automatisch regelen.

CDN voor afbeeldingen

Een Content Delivery Network serveert afbeeldingen vanaf servers dichtbij je bezoekers, wat laadtijden verkort. Cloudflare biedt gratis CDN-functionaliteit en kan automatisch afbeeldingen optimaliseren en naar WebP converteren. Stel een CDN in voor de beste prestaties.

Praktische checklist

Gebruik WebP als primair formaat met JPEG fallback. Comprimeer alle afbeeldingen voor upload of gebruik een automatische plugin. Schaal afbeeldingen naar de maximale weergavegrootte. Implementeer lazy loading voor afbeeldingen onder de vouw. Preload kritieke afbeeldingen boven de vouw. Overweeg een CDN voor internationaal publiek.

Met geoptimaliseerde afbeeldingen en snelle LiteSpeed hosting van Theory7 laadt je website razendsnel. Neem contact op met onze support als je hulp nodig hebt bij het optimaliseren van je website.