Optimaliseren van foto’s met Squoosh

UX & UI • WordPress Development

Squoosh is een gratis online tool ontwikkeld door Google waarmee je afbeeldingen kunt comprimeren en optimaliseren zonder merkbaar kwaliteitsverlies. Het werkt direct in je browser en ondersteunt verschillende bestandsformaten, zoals WebP, JPEG, PNG en AVIF.

Hoe gebruik je Squoosh om foto’s te optimaliseren naar WebP?

Ga naar Squoosh
Open Squoosh in je browser.
Upload een afbeelding
Klik op de pagina of sleep een afbeelding naar het venster.
Kies het formaat WebP
1. In de rechterkolom zie je “Compress” opties.
2. Klik op het uitklapmenu en selecteer WebP.
Pas de kwaliteit en instellingen aan
1. Gebruik de Quality-slider om een balans te vinden tussen bestandsgrootte en beeldkwaliteit.
2. Zorg ervoor dat het uiteindelijke bestand niet groter dan 300 KB is. Dit helpt om snelle laadtijden te garanderen zonder veel kwaliteitsverlies.
3. Je kunt extra instellingen zoals progressive encoding en lossy of lossless compressie aanpassen.
Vergelijk voor en na
Je kunt de schuif in het midden van het scherm gebruiken om het verschil in kwaliteit en bestandsgrootte te zien.
Download de geoptimaliseerde afbeelding
Klik op Download en sla het WebP-bestand op.

Waarom is optimaliseren naar WebP en een passende bestandsgrootte belangrijk?

Snellere laadtijden 🚀
Kleinere afbeeldingsbestanden zorgen ervoor dat je website sneller laadt, wat direct bijdraagt aan een betere gebruikerservaring.
Betere compressie zonder kwaliteitsverlies
WebP behoudt een hoge beeldkwaliteit bij een aanzienlijk kleinere bestandsgrootte dan traditionele formaten zoals PNG of JPEG.
SEO-voordelen 📈
Snellere websites scoren beter in zoekmachines zoals Google, wat je online zichtbaarheid ten goede komt.
Minder dataverbruik
Geoptimaliseerde afbeeldingen verbruiken minder data, wat vooral gunstig is voor mobiele gebruikers met beperkte databundels.

Aanbeveling:

Streef naar WebP-bestanden met een maximale grootte die past bij de resolutie van de afbeelding:

Tot 500×500 px → max. 80 KB
500×500 – 1000×1000 px → max. 120 KB
1000×1000 – 1500×1500 px → max. 180 KB
1500×1500 px en groter → max. 300 KB

Zo zorg je voor optimale prestaties zonder concessies aan beeldkwaliteit.

Extra tip! Bestandsnamen:

Het is belangrijk om afbeeldingen duidelijke en relevante bestandsnamen mee te geven, voordat je deze in de mediatheek van je WordPress website plaatst. Dit draagt niet alleen bij aan je SEO, maar sluit ook aan bij de WCAG-richtlijnen voor toegankelijkheid.

Sfeerbeelden
Duidelijke bestandsnamen dragen niet alleen bij aan SEO, maar zijn ook van groot belang voor de toegankelijkheid (WCAG) van je website. Bestanden met beschrijvende namen kunnen door screenreaders beter worden geïnterpreteerd, wat essentieel is voor mensen met een visuele beperking. Zo help je iedereen om de inhoud van je website te begrijpen — ook als ze de beelden zelf niet kunnen zien.Gebruik daarom simpele, duidelijke namen die vertellen wat er op de afbeelding te zien is. Houd het kort, helder en zonder vakjargon. Voorbeeld: team-wp-master-zit-aan-tafel.webp
Productbeelden (bijvoorbeeld in een webshop):
Gebruik een gestructureerde naam die de belangrijkste kenmerken van het product bevat. Voorbeeld: [merknaam-collectie-product-variant].webp

Zo zorg je voor duidelijke, toegankelijke en goed vindbare beelden die bijdragen aan zowel gebruiksvriendelijkheid als online zichtbaarheid.

Sebastiaan Hulst medewerker bij WP Masters

Meer weten over Branding & Design? Neem contact op met:

sebastiaan@wpmasters.nl 020 30 38 740