Het LightBolt CMS gaat reeds optimaal om met door gebruikers geuploade afbeeldingen. Als kers op de taart, hebben we daar een aanvullende techniek aan toegevoegd. Webp!
Het is een bestandsformaat van afbeeldingen met een compressie techniek waarmee een gelijke afbeelding gemiddeld 39% en 45% kleiner wordt, voor respectievelijk JPG en PNG afbeeldingen, zo geeft Wikipedia aan.
Data besparing middels Webp
Het zal weinigen verrassen dat Google met Webp op de proppen is gekomen, in september 2010 om exact te zijn, om in 2011 als open source vrij te geven. Indien afbeeldingen niet geoptimaliseerd zijn voor het web, kunnen besparingen uitkomen op 46% tot 66%, blijkt uit eigen bevindingen. Ook andere partijen kwamen met vergelijkbare bevindingen:
- In februari 2013 gaf Google aan Webp afbeeldingen te gebruiken binnen de Chrome Web Store, waarmee 30% aan afbeelding-download gereduceerd werd. In hun geval stond dit gelijk aan een besparing van enkele terabytes per dag;
- In 2013 ging ook Netflix met Webp aan de haal. In de nieuwe interface-release zouden alleen gebruikers met nieuwere devices, webp afbeeldingen voorgeschoteld krijgen ter besparing van dataverkeer;
- Facebook begon in 2013 met het voorschotelen van Webp bestanden aan browsers die het ondersteunen (maar draaide het toen terug nadat gebruikers klaagden de afbeeldingen niet meer te kunnen bekijken na opslaan);
- Zonder kwaliteitsverlies bespaart Facebook sinds 2014 maar liefst 80% op PNG verkeer en 25-25% op JPG verkeer door de inzet van Webp afbeeldingen binnen de Android Facebook app;
- Ook Tindr ging in 2014 over op Webp,
.
Webp kanttekeningen
Webp kent één groot kanttekening: het is geen webstandaard en daardoor is de acceptatie door browsers (op moment van schrijven) nog niet optimaal, zoals te zien op caniuse.com.
Browser ondersteuning
Chrome (februari 2011) en Opera (juni 2011) als ook Android browser en Opera mobile waren de absolute voorlopers in ondersteuning van Webp. Inmiddels is ook meerendeel van mobiele browsers over, terwijl Microsoft zich er met Internet Explorer nooit aan gewaagd heeft. Zijn opvolger, Edge, ondersteunt Webp sinds versie 18 c.q. november 2018 en ook FireFox versie 65 zal Webp ondersteunen. Vooral Safari mist dus in het rijtje (zowel voor desktop als ook mobile).
Webp uitdaging
Reden genoeg om Webp te ondersteunen, nu versie 1.0.0 in april 2018 is uitgekomen en zelfs de onderling grote concurrenten (FireFox, Edge) het (gaan) ondersteunen. Alhoewel dit het gros van de gemiddelde website bezoekers zal dekken, moeten IE en Safari gebruikers nog JPG en PNG afbeeldingen voorgeschoteld krijgen, terwijl van een website beheerder niet verwacht kan worden dat afbeeldingen in Webp formaat geupload gaan worden.
Om die reden hebben we websites uitgerust met een webp toepassing, zodat van aanwezige PNG en JPG afbeeldingen, automatisch Webp varianten worden gegenereerd.
Automatisch webp afbeeldingen serveren
Vervolgens wordt de bijbehorende HTML code om een afbeelding te presenteren, omgezet in een HTML5 picture-element waarmee een Webp afbeelding voorgeschoteld kan worden. Aanvullend wordt als fallback c.q. backup alsnog het oorspronkelijke PNG of JPG afbeelding ingevoegd, voor browsers die geen Webp (of picture element) ondersteunen.
Tip: Vergeet in het source-element niet om de type="image/webp" op te geven, anders weten browsers als FireFox zich geen raad met de content.
Ook voor achtergrondafbeeldingen kan het wenselijk zijn om ze als Webp te serveren. Of eigenlijk juist wenselijk, aangezien deze veelal groter zijn en de besparing hierop ook groter is. Dit kan door middels JavaScript na te gaan of Webp ondersteunt wordt, om vervolgens via CSS de juiste bestandstype (Webp of PNG/JPG) af te dwingen.
Webp en performance
De laatste werkwijze, een achtergrond statisch in een stylesheet declareren, is geen praktische oplossing wanneer een afbeelding door een CMS gebruiker geupload wordt. Om die reden hebben we twee oplossingen gecombineerd. Aanvullend werkt deze methode bovendien door gebruik te maken van een op zichzelf staande (echter zelf samen te stellen) library, Modernizr. Voor een gemiddelde website kan dit naast andere libraries als jQuery en Bootstrap vrij zwaar worden. Modernizr zou bovendien bij pageload direct uitgevoerd moeten worden om er voordeel van te hebben, waardoor het in een performance test substantiële impact zal hebben op de Lighthouse Performance en dus PageSpeed score.
Elke afbeelding krijgt binnen het LightBolt CMS een Webp equivalent. Hierbij wordt de bestandsextensie achter de werkelijke bestandsnaam geplakt. Achtergrondafbeeldingen worden veelal via lazy-loading ingeladen. Lazy-loading geschiedt weliswaar ook op basis van JavaScript, maar is een stuk beknopter. Door lazy-loading ook in te zetten voor Webp is de JavaScript en daarmee performance impact minimaal. Er vindt een test plaats of de browser Webp afbeeldingen ondersteunt. Dit resultaat zou via HTML5's sessionStorage in de browser gelogd kunnen worden om aanvullende tests te voorkomen.
De laatste stap is uiteindelijk eenvoudig. Binnen het LightBolt CMS hebben we de lazy-loading toepassing dusdanig gewijzigd, dat het eventuele afbeeldings-verwijzingen hernoemd zonder de Webp extensie, indien er vanuit de browser geen Webp ondersteuning is. Dit gebeurt voordat de afbeelding op zijn plek wordt gezet, waardoor de juiste versie van de achtergrondafbeelding geladen wordt.
Htaccess oplossing
Afhankelijk van het gebruikt CMS kan bovenstaand aanpassingen vereisen op verschillende plekken in de codebase van een CMS. Is bovenstaand te veel gevraagd om in een CMS uit te rollen? Dan kan deze htaccess regels worden toegepast om browsers die webp ondersteunen, een webp afbeelding voor te schotelen indien aanwezig op de server.
Conclusie
Voor een kleine site kan de inzet van Webp reeds effect sorteren, voor grotere sites zoals webshops of vergelijkbare toepassingen waarin een aanbod wordt weergegeven, zal het van significante invloed zijn op zowel dataverkeer als ook performance. Tezamen met lazy-loading (zie hieronder) is het een enorm databesparende als ook performance optimale combinatie.
Vragen of opmerkingen, exacte code voorbeeld ontvangen of deze toepassing in actie zien voor een eigen of bestaande website of webshop? We horen het graag!
