JPEG vs WebP
Superieure compressie
WebP afbeeldingen

Optimaliseer je website: WebP-afbeeldingen

Websitebezoekers anno 2016 zijn kritische mensen. Bezocht je in de jaren 90 een website, dan werd je vaak getrakteerd op afbeeldingen die langzaamaan ingeladen werden. Vol spanning wachten op een plaatje dat uiteindelijk toch stiekem wel tegenviel.
Als tegenwoordig een afbeelding al niet gelijk ingeladen is, dan klagen bezoekers steen en been en wordt je website tot de grond toe afgebrand. Oké, misschien niet zo erg, maar gebruiksvriendelijk is anders.

Laat bezoekers en zoekmachines niet onnodig wachten

En Google weet dit ook. Naast dat je je bezoekers niet onnodig wil laten wachten op de inhoud van je webpagina, is het ook zo dat een tragere website minder goed beoordeeld wordt door Google en dus minder hoge posities zullen krijgen dan diezelfde website als die wel snel laadt.

Een van de belangrijkste punten die de laadsnelheid van de website beïnvloedt, zijn afbeeldingen. Afbeeldingen kunnen wanneer verkeerd geupload de website onnodig vertragen. Zo is het belangrijk om de afbeelding al in de juiste afmetingen op de server te zetten. Daarnaast is het kiezen van de juiste bestandstype belangrijk: JPEG voor foto’s en PNG voor logo’s en simpele afbeeldingen.

Introductie van WebP

Google heeft een bestandstype ontwikkeld die behoorlijk winst kan betekenen voor de laadsnelheid: WebP. Dit bestandstype maakt gebruik van superieure compressie en verkleint afbeeldingen behoorlijk. Zo worden JPEG bestanden gemiddeld met 39% verkleind en PNG bestanden zelfs tot 45%.

Wij hebben uiteraard dit bestandstype uitgeprobeerd op onze eigen website. Was de afbeelding bovenaan dit blog in JPEG vorm nog 253 kB, tegenwoordig is deze in WebP slechts 48 kB. Dit is nog geen 19% van het origineel.

Natuurlijk is een kleinere bestandsgrootte niet altijd wenselijk; de afbeelding moet immers wel scherp blijven. Ook dit is het geval: de kwaliteit blijft (nagenoeg) hetzelfde.

Het nadeel is dat nog lang niet alle browsers WebP ondersteunen. Op dit moment zijn Chrome, Opera en de Android Browser de enige browsers die WebP ondersteunen.

Zelfs de Googlebot ondersteunt WebP nog niet. Dus verwacht geen voordelen op de posities van je website na invoering. Voer het in omdat je een deel van je bezoekers een snellere website wilt voorschotelen.

Hoe gebruik ik WebP?

Wil je je website gaan voorzien van WebP afbeeldingen, houd er dan rekening mee dat niet alle browsers dit bestandstype ondersteunt. Je zult dus de JPEG- en PNG-afbeeldingen moeten behouden, zodat al je bezoekers in ieder geval een afbeelding te zien krijgen. Maak je gebruik van WordPress, dan zijn er plugins die je hier kunnen helpen.

Allereerst is er de plugin “Optimus”, die alle afbeeldingen in de media-bibliotheek comprimeert. Daarnaast heeft de plugin de mogelijkheid om een WebP-variant toe te voegen. Hiervoor is geen aanvullende software benodigd, deze plugin maakt gebruik van een externe server.

Een tweede plugin is “Cache Enabler”. Het voornaamste doel van deze plugin om pagina’s van je website te cachen. In combinatie met “Optimus” biedt deze plugin de mogelijkheid om aan geschikte browsers de WebP-bestanden te serveren. Hierdoor wordt gekeken naar welke browser een bezoeker gebruikt en wordt afhankelijk daarvan de broncode met WebP-bestanden of de broncode met PNG/JPEG-bestanden geserveerd. Zo krijgt de bezoeker de broncode die voor hem geschikt is.

Voor nu gebruik je WebP alleen nog om de bezoekers die via Chrome, Opera of de Android Browser je website bezoeken. De vraag is wanneer andere browsers dit bestandstype gaan implementeren. Hier zijn vooralsnog geen duidelijke aanwijzingen voor te vinden. Ook blijft de vraag of Google hun bots in gaat stellen om deze bestandstypes te kunnen crawlen. Als dit gebeurt, brengen we je natuurlijk weer op de hoogte.

Heb je nog vragen over WebP, neem dan gerust contact met ons op.

Invest Online
Peter Schoep
Auteur: Peter Schoep, IT Manager

Plaats een reactie