Afbeeldingen zorgen bijna 50% van de grote van een gemiddelde webpagina, dus als doe ja als bouwer van je WordPress site er alles aan om om de afbeeldingen te optimaliseren, niet alleen ruimte op uw server besparen, maar om te zorgen dat uw pagina sneller worden geladen.

Met het ‘nieuwe’ imageformaat  WebP kunt u deze images nog kleiner maken. gemiddeld kunnen we stellen dat images in het WebP formaat tot 30% kleiner zijn, maar er is een catch.

Wat is WebP?

WebP is een imageformaat dat gemaakt is een team van Google, en ontwikkeld als een vervanging voor JPEG, PNG en GIF, terwijl het tegelijkertijd compressie, transparantie en animaties ondersteunt.

WebP is voor het eerst aangekondigd in 2010, nu bijna 9 jaar later staat het steeds meer in de belangstelling om images drastisch te verkleinen.

De compressie van WebP gebruikt dezelfde voorspellende codering methode die door de VP8-videocodec wordt gebruikt om keyframes in video’s te comprimeren. Voorspellende codering werkt door de waarden in aangrenzende pixelblokken te gebruiken om de waarde in een blok te voorspellen en codeert vervolgens alleen het verschil.

Zoals u in de onderstaande voorbeelden in de WebP-galerij van Google kunt zien, is er geen merkbaar verschil in kwaliteit tussen de JPEG-afbeeldingen aan de linkerkant en de WebP-versies aan de rechterkant. Wat u niet ziet, tenzij u de bestandsgrootte controleert, is dat de WebP-afbeeldingen meer dan 30% kleiner zijn dan die van JPEG.

Browserondersteuning voor WebP

U vraagt ​​zich misschien af, hoe komt het dat WebP nu na negen jaar nog altijd niet populairder is? Waarom gebruiken we nog steeds JPEG en PNG wanneer WebP kleinere bestandsgroottes van vergelijkbare kwaliteit kan produceren?

Welke browsers ondersteunen WebP-afbeeldingen

Helaas ondersteunen niet alle moderne browserondersteuning WebP. VolgensCan i use‘  ondersteunen bijna alle moderne browsers WebP, behalve… Safari en alle andere apple derivaten.

Hoewel er geen recente aanwijzing is geweest dat Apple in de toekomst WebP zal ondersteunen, heeft het bedrijf weinig keus nu alle andere belangrijke browsers en beeldbewerkingssoftware dit ondersteunen.

WebP gebruiken – met JPEG / PNG als backup

Alleen omdat Apple WebP niet ondersteunt, betekent het niet dat je het formaat niet zou moeten gebruiken. Het is mogelijk om WebP-bestanden te leveren aan bezoekers die ondersteunde browsers gebruiken terwijl ze JPEG’s en PNG’s weergeven als een beckup voor Safari-gebruikers.

Maar voordat u beslist of u WebP al dan niet op uw site wilt gebruiken, moet u een paar dingen in gedachten houden.

Ten eerste, weet dat Chrome de populairste browser is met 64% marktaandeel. Het is dus zeer waarschijnlijk dat de meeste bezoekers van uw site eventuele WebP-afbeeldingen op uw site kunnen bekijken.

browseraandelen

Controleer uw analytics

Het is een goed idee. om in uw Google Analytics te controleren welke browsers uw bezoekers gebruiken. Zo kan je makkelijk zien hoeveel procent er voordeel bij zou kunnen hebben om WebP images te kunnen zien.

En laten we eerlijk zijn, je wilt je Bezoekers toch de snelste mogelijke site geven.

Op onze google analytics zie ik dat 83% met Chrome surft en dus baat heeft bij WebP, aan de andere kant is Safari de derde meest populaire browser, dus deze gebruikers zouden baat hebben bij een fallback optie.

Hoe WebP te gebruiken met WordPress

Hier is nog een hindernis als het gaat om het gebruik van WebP: WordPress ondersteunt het niet out of the box.

Hoewel WordPress de meest populaire afbeeldingsbestandsindelingen ondersteunt, waaronder JPEG, PNG, GIF en ICO, moet WebP nog aan die lijst worden toegevoegd. Dit betekent dat u niet zomaar een WebP-bestand naar uw WordPress mediabibliotheek kunt uploaden omdat u deze beveiligingsfout krijgt:

Beveiligingsfout mediabibliotheek met WebP-bestanden

Geen super groot probleem door de grootte en toegewijde community van WordPress zijn er verschillende oplossingen. We bespreken er hier een paar:

WebP Express-plug-in

Met de gratis WebP Express-plug-in kunt je automatisch WebP-afbeeldingen generen en weergeven aan browsers die WebP ondersteunen, terwijl u nog steeds JPEG’s / PNG’s aan Safari-gebruikers aanbiedt. Deze optie werkt op alle afbeeldingen op uw site, inclusief die in de mediabibliotheek, galerijen en thema’s.

De WebP express plugin, gebruikt GB of Imagemagick op de server je hoster moet dit ondersteunen, Bij Kyzoe Hosting en Design is dit zeker het geval.

Ook via Jetpack:

Ook al vinden we Jetpack te zwaar en te log  voor wat het doet biedt het wel de mogelijkheid om images te converteren via Jetpack’s Site Accelerator-functie (voorheen bekend als Photon) naar het WebP-beeldformaat.

Ook Shortpixel Converteert naar WebP

Naast de boven genoemde mogelijkheden is er ook een mogelijkheid om via shortpixel uw images om te zetten naar WebP formaat. Op hun blog staat een hele uitleg te lezen.

JPG/PNG vs WebP vergelijking

Ik heb zelf een test gedaan met zes willekeurige JPEG-afbeeldingen van Unsplash, ik heb ze gecomprimeerd om te zien hoeveel besparing ik kon bereiken en converteerde de originele afbeeldingen vervolgens naar WebP om te vergelijken.

JPEG afbeeldingen vergelijken met WebP

Het converteren naar WebP resulteerde in een gemiddelde afname van 50% in afbeeldingsgrootte.

Ik was verrast om het verschil in grootte tussen de JPEG- en WebP-versies van image4.jpg te zien, maar de effen roze achtergrond verklaart nog veel meer over het grote verschil in formaat. Hieronder ziet u de twee versies naast elkaar. De JPEG-afbeelding aan de linkerkant is iets scherper dan de WebP-afbeelding aan de rechterkant.

webp vergeleken met JPEG

PNG afbeeldingen vergelijken met WebP

Nogmaals, heb ik willekeurig zes afbeeldingen gekozen, dit keer PNG-bestanden van freepngs.com. Ik heb ze gecomprimeerd en vervolgens de afbeeldingen geconverteerd naar WebP om te vergelijken.

Webp vergelijkingstabel

De grootste verschillen in bestandsgrootte waren voor gedetailleerde afbeeldingen van bladeren en een koffiezetapparaat (respectievelijk image4.png en image5.png), terwijl het kleinste verschil was voor een zwart-witbeeld van een kat (image3.png).

Over het algemeen leidde de conversie van PNG naar WebP tot een gemiddelde afname van de bestandsgrootte met 67%.

Conclusie:

Het WebP-bestandsformaat groeit nog steeds in populariteit en ondersteuning, en er is veel te winnen bij dit bestandsformaat. Niet alleen kan het JPEG- en PNG- (en GIF!) -Bestandsformaten vervangen met is lossy en lossless compressie, maar het levert ook dramatisch kleinere bestandsgrootten op.

Er is echt geen ander beeldformaat of beeldoptimalisatietool voor het web dat kleinere bestandsgroottes kan bereiken zonder merkbaar kwaliteitsverlies zoals WebP dat kan.

Hopelijk zien we WordPress – en Apple – in de toekomst ondersteuning introduceren voor WebP. Tot dat moment zou ik u willen aanmoedigen om te experimenteren met dit bestandsformaat en de tools te bekijken die u kunnen helpen bij het aanbieden van WebP-afbeeldingen op uw WordPress-site.

Reageer

Voer alstublieft uw commentaar in!
Please enter your name here