Hoe maak je WebP afbeeldingen?
WebP is een moderne afbeeldingsindeling die door Google is ontwikkeld. Het biedt superieure compressie voor afbeeldingen op het web, waardoor ze sneller laden zonder significant kwaliteitsverlies. Deze kenmerken maken van WebP een uitstekende keuze voor het optimaliseren van de prestaties van je WordPress website. Maar hoe maak je een WebP-afbeelding? In dit artikel nemen we je mee door het proces, stap voor stap.
- Kies je afbeelding
Het eerste wat je nodig hebt, is natuurlijk een afbeelding die je wilt omzetten naar het WebP-formaat. Dit kan een JPEG, PNG, GIF of een ander gangbaar beeldformaat zijn. - Download een conversietool
Er zijn verschillende tools beschikbaar om afbeeldingen naar WebP te converteren. Een van de meest populaire is de officiële WebP Converter van Google, die beschikbaar is voor zowel Windows als macOS. Er zijn ook online tools, zoals Squoosh, die je in je browser kunt gebruiken zonder iets te hoeven downloaden. - Converteer de afbeelding
Open de converter, selecteer je afbeelding en kies de gewenste instellingen. Je kunt de kwaliteit en de bestandsgrootte van de output aanpassen om de beste balans tussen kwaliteit en snelheid te vinden. Klik vervolgens op “Convert” of “Save” om de afbeelding te converteren en op te slaan in het WebP-formaat. - Implementeer de WebP afbeelding
Nu je afbeelding is geconverteerd, kun je deze uploaden naar je website. Het is belangrijk om te weten dat niet alle browsers WebP ondersteunen, dus het is een goed idee om een fallback in te stellen voor browsers die het formaat niet ondersteunen. Dit kan meestal worden gedaan door in je HTML-code eerst de WebP-afbeelding op te geven en vervolgens de oorspronkelijke afbeelding als fallback.
WordPress en WebP afbeeldingen
In WordPress kun je afbeeldingen omzetten naar het WebP-formaat met behulp van veel verschillende plugins die naadloos integreren met de media-bibliotheek van WordPress. Een veelgebruikte plugin voor dit doel is WebP Express, die een aantal methodes biedt, zoals GD, Imagick, en cwebp.
Deze WordPress plugin kan automatisch nieuwe afbeeldingen die naar de site worden geüpload converteren, en biedt ook een bulkconversie tool waarmee bestaande afbeeldingen in de mediabibliotheek kunnen worden omgezet naar WebP.
WebP afbeeldingen laden
WebP Express configureert ook de levering van WebP-afbeeldingen op een manier die compatibel is met browsers die het formaat ondersteunen. Het past rewrite-regels toe in .htaccess om WebP-afbeeldingen te serveren aan browsers die deze kunnen weergeven, terwijl het naar PNG of JPEG terugvalt voor browsers die dit niet doen.
Dit zorgt voor een optimalisatie van de site zonder de compatibiliteit te verliezen, wat bijdraagt aan een snellere laadtijd van de pagina en een verbeterde gebruikerservaring, terwijl de visuele kwaliteit behouden blijft. Deze aanpak is bijzonder nuttig voor websites met veel afbeeldingen, zoals online portfolios, e-commerce sites, en blogs.
Bij een hostingprovider als bijvoorbeeld Kinsta moet je via de server deze regels toevoegen omdat er geen .htaccess op deze servers aanwezig is.
Het gebruik van WebP-afbeeldingen kan een aanzienlijke impact hebben op de laadsnelheid van je website en de algemene gebruikerservaring verbeteren. Hoewel het proces van het maken van WebP-afbeeldingen een extra stap vereist in je workflow, kunnen de voordelen van deze moderne afbeeldingsindeling de moeite waard zijn.