WebP is een nieuw afbeelding formaat speciaal voor het web

Webdevelopers en webmasters kunnen vanaf nu gebruik maken van een nieuw bestandstype voor afbeeldingen om kleinere afbeeldingen te produceren waarmee het web sneller gaat worden! WebP (spreek je uit als “weppy”) is een afbeelding formaat dat afbeeldingen lossy of zelfs lossless kan comprimeren voor het web. WebP afbeeldingen zijn gemiddeld 26% kleiner in bestandsgrootte wanneer je deze vergelijkt met PNG’s. WebP lossy gecomprimeerde afbeeldingen zijn zelfs 25 tot 34% kleiner in bestandsgrootte vergeleken met JPEG afbeeldingen.

Google WebP logo

Google WebP logo

Er zijn een aantal plugins beschikbaar voor de meest gangbare image editors, zoals Adobe Photoshop en GIMP. Zoek in de GIMP Plugin Repository naar “WebP Import / Export” of klik op deze link. Voor ondersteuning in Adobe Photoshop kun je gebruik maken van de AdobeWebM repository, te downloaden via github: https://github.com/fnordware/AdobeWebM Je hoeft niets perse zelf te compilen aangezien er binaire bestanden beschikbaar zijn voor zowel Microsoft Windows als Apple OS X. Deze plugin werkt voor Adobe Photoshop CS2 tot CS6 wanneer je deze in de map plugin-ins/File Format plaatst.

Meer informatie over WebP kun je vinden op de Google Developers website: https://developers.google.com/speed/webp/ Een interessante afbeelding over WebP vs. JPEG compressie kun je hieronder zien (afbeelding via http://www.igvita.com/2013/03/07/faster-smaller-and-more-beautiful-web-with-webp/):

WebP compressie voorbeeld

WebP compressie voorbeeld

Met behulp van het Google WebP formaat lever je ietswat kwaliteit in voor kleinere bestandsgrootte, wat gelijk staat aan een kortere laadtijd voor je website of ecommerce webshop! Hieronder staat een opsomming van punten die je moet weten over WebP:

De resolutie wordt minder

Zoals hierboven aangegeven zullen de afbeeldingen sneller laden wanneer je gebruik maakt van WebP, dit heeft een keerzijde. De resolutie wordt namelijk minder. Web developers vinden dit nieuwe formaat erg fijn maar alleen wanneer de kwaliteit van de afbeelding zichtbaar gelijk blijft. Pas wanneer je een afbeelding die je met WebP behandeld hebt vergroot zul je een kwaliteitsverschil zien. Zeker wanneer je deze vergelijkt met JPEG afbeeldingen die dezelfde bestandsgrootte hebben.

Je hebt de juiste tools nodig

Wanneer je als doel hebt om je eigen afbeeldingen in WebP te publiceren is er geen enkel probleem. Waar je wel tegenaan kunt lopen is dat wanneer je een afbeelding moet bewerken die al de extensie .webp heeft. Er zijn een aantal grafische pakketten die dit formaat ondersteunen, waaronder: ImageMagick, Google Picasa en Photoline. In dit artikel staan een tweetal verwijzigingen naar plugins voor GIMP en Adobe Photoshop. Je kunt niet aan de slag met WebP voordat je deze plugins hebt geinstalleerd.

PNG naar WebP scheelt veel

Wanneer je een willekeurige PNG converteert naar WebP zul je merken dat flink kan schelen in bestandsgrootte. Google heeft de keuze gemaakt om ook WebP te gebruiken voor de Google Play store. Hiermee hebben ze een winst kunnen behalen van tenminste 35%. Hoeveel sneller zou je eigen website wel niet zijn met een 35% reductie in afbeelding bestandsgrootte?

Mozilla Firefox ondersteunt WebP (nog) niet

Wanneer je Firefox als browser gebruikt zul je niets merken in laadtijd. Dit komt omdat Firefox WebP nog niet ondersteunt aangezien zij zelf bezig zijn met een eigen image format. Gebruik je OS X en Firefox? Gebruik dan de browser extensie “Weppy” van Nick Zitzmann: Op deze website toont hij een voorbeeld, een afbeelding in WebP is maar 65KB waar de orginele JPEG erboven 350Kb is! Een verschil van 5.3 in bestandsgrootte!

Google gebruikt het zelf

Een van de meest overtuigende argumenten die ik kan geven om WebP te gebruiken is het feit dat Google zelf ook WebP gebruikt. Zoals ik al aangaf hierboven is dat in bijvoorbeeld de Google Play store. Maar ook de thumbnails in YouTube maken gebruik van WebP. Door de JPG afbeeldingen op YouTube te converteren naar het WebP formaat laadt de website nu 10% sneller in, behalve in Mozilla Firefox ;-).

Afsluiter

Op dit moment maakt marcobax.nl ook gebruik van het WebP formaat! Aangezien dit blog op WordPress draait is er een handige plugin die je zo kunt installeren en gebruiken, namelijk: https://wordpress.org/plugins/wp-webp. Deze plugin voegt een stukje Javascript toe aan je website. Je kunt kiezen of je deze javascript voor WebP wilt toevoegen aan de header of footer van je website. Afbeeldingen zijn gemiddeld 35% kleiner na gebruik van deze plugin! Een aanrader voor elke WordPress gebruiker in mijn ogen. Instellingen voor deze plugin zijn terug te vinden in de algemene instellingen in WordPress. Heb je een Magento ecommerce webwinkel? Dan kun je de gratis extensie WebP van Yireo installeren via: http://www.magentocommerce.com/magento-connect/yireo-webp.html

Hieronder vind je een uur (!) durende video via waarin de werking en toepassing van WebP wordt uitgelegd:

Gebruik jij al WebP of denk je erover om deze te gaan gebruiken? Laat het mij weten door een reactie te plaatsen aan de hand van het reactieformulier op deze pagina!

2 antwoorden

  1. Cees 16 april 2014 / 4:31 pm

    Interessant artikel!

    • Marco Bax 16 april 2014 / 4:55 pm

      Dankjewel Cees, persoonlijk vind ik het altijd tof om te zien welke onderdelen van je website (of webshop) je kunt blijven optimaliseren. De bestands grootte van afbeeldingen hebben altijd een grote rol gespeelt in het optimalisatieproces aangezien er in veel gevallen veel winst te behalen valt. Zeker met een tool als webp kun je dit makkelijk toepassen op je bestaande website/webshop. Wellicht heb jij ook een handige tip voor overige lezers ?

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *