Clearsite Kennisbank

WebP ondersteuning in WordPress 5.8

WordPress

Goed nieuws voor de speed freaks onder ons. Zelf hechten we veel waarde aan snelle WordPress websites. We doen er dan ook alles aan om voor onze klanten een zo snel als mogelijke website op te leveren. Een goede compressie van afbeeldingen is hierin een belangrijk aspect.

WordPress en WebP ondersteuning

WebP (ontwikkeld door Google) wordt gezien als een van de beste ‘modern image formats’. Dit afbeeldingsformaat levert een betere compressie dan PNG of JPG, wat natuurlijk een belangrijke stap is naar snellere laadtijden en minder dataverkeer.

Google over WebP

WebP is a modern image format that provides superior lossless and lossy compression for images on the web. Using WebP, webmasters and web developers can create smaller, richer images that make the web faster. WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller than comparable JPEG images at equivalent SSIM quality index.
Next generation images WebP
Melding uit Pagespeed Insights van Google

Tot nu toe was het onmogelijk om WebP afbeeldingen direct in de media library van WordPress te uploaden. Er zijn wel WordPress plugins die achteraf afbeeldingen converteren naar WebP afbeeldingen. Deze plugins zorgen er ook voor dat browsers die nog geen WebP ondersteuning bieden een ander afbeeldingsformaat geserveerd krijgen.

Maar in WordPress 5.8 (nu nog in beta, maar wordt verwacht op 20 juli van dit jaar) is het dus mogelijk om WebP afbeeldingen direct in de media library te uploaden.

Hoe maak je WebP images

Leuk natuurlijk dat je WebP afbeeldingen in WordPress kan gebruiken, maar hoe maak je nu WebP afbeeldingen? Stel je hebt een JPG afbeelding en hoe zet je die nu om naar WebP?

Daar zijn verschillende oplossingen voor;

Online converters
Er zijn veel online WebP converters te vinden, die werken meestal heel eenvoudig. Vaak een kwestie van je origineel uploaden en ‘hit convert’. Een site die wij hier wel eens voor gebruiken is bijvoorbeeld https://convertio.co/nl/jpg-webp/

Photoshop
Photoshop kan ‘out of the box’ vreemd genoeg nog niet met WebP afbeeldingen overweg. Maar er is uiteraard een plugin die dit voor je kan doen. Download hier de WebPShop plugin. Loop je tegen problemen aan bij de installatie van deze plugin, kijk dan even op deze pagina voor uitleg van de installatie en wat ‘troubleshooting’ tips.

GIMP
Heb je geen Photoshop dan kan je ook de Open Source image editor GIMP downloaden. Deze editor biedt wel ‘out of the box’ WebP ondersteuning.

Sketch
Vanuit Sketch kan je ook gewoon elke afbeelding als een WebP afbeelding exporteren.

Hieronder zie je een voorbeeld van een JPG en WebP export vanuit Photoshop. Beide afbeeldingen zijn 1200 pixels breed, de JPG is 189 KB groot en de WebP is 46 KB. Dat is een winst van 75,66 %. Beide zijn geëxporteerd met een kwaliteit van 75.
Nu weten wij dat Photoshop sowieso niet uitblinkt in ‘image compression’. Maar ook als we de JPG nog een keer door de online compression tool van TinyPng heen halen is de JPG nog 142 KB groot. Nog steeds een verschil van 62,9 %

JPG Quality 75 189 KB
WebP Quality 75 46 KB

Browserondersteuning WebP

Niet geheel onbelangrijk. Wanneer je via WordPress een WebP afbeelding gebruikt in je website is er standaard geen fallback image. Dus als je de pagina opent in een browser die geen WebP ondersteunt zal de afbeelding niet getoond worden. De WordPress plugins die ik eerder noemen regelen dit wel allemaal voor je.

Maar hoe belangrijk is deze vraag nog; hoeveel mensen gebruiken al een browser die WebP ondersteuning biedt?
Volgens de website Caniuse.com komen we op deze gegevens uit;

Smartphone gebruikers - 97,06%
Desktop gebruikers - 93,25%

Eigenlijk zit het probleem voornamelijk nog bij gebruikers met een desktop versie van Safari. In principe bieden de recentere versies van Safari wel WebP ondersteuning, maar alleen wanneer je al OS 11 (Big Sur) gebruikt. Nog maar een heel klein probleempje dus, een probleempje wat waarschijnlijk over een half jaar helemaal niet meer bestaat.

Maar…

Er is wel een maar. En nu wordt-ie wat technisch. De server waar je website op draait moet wel gebruik maken van de Imagick PHP library. Indien dit niet het geval is zal het niet werken, dat merk je snel genoeg want je kunt dan gewoon geen WebP afbeeldingen uploaden in WordPress.

Om er zeker van te zijn of je website dit aan kan moet je via je WordPress dashboard naar het tabje ‘Status Diagnose’ daar klik je op de tab ‘Informatie’ en vervolgens klik je in de lijst op ‘Server’. Daar moet dan ‘Ja’ staan bij de vraag ‘Is de Imagick bibliotheek beschikbaar?’

WebP afbeelding in WordPress media library