Wil je website sneller maken, of besparen op bandbreedte? Stap dan over op het gebruik van WebP. Deze nieuwe beeldstandaard is ontwikkeld door Google en is een alternatief voor JPG en PNG afbeeldingen. WebP biedt vele voordelen en maakt gebruikt van standaarden zoals RIFF (Resource Interchange File Format). Streamingdienst Netflix en social media platform Facebook maken al op grote schaal gebruik van WebP
Wat is WebP?
WebP (uitgesproken als Weppy) is een nieuw bestandsformaat voor het opslaan van afbeeldingen. Het maakt gebruik van beeldcompressie. WebP maakt afbeeldingen gemiddeld 39% kleiner dan beelden opgeslagen met de veelgebruikte standaard JPG/JPEG en tot 45% kleiner dan PNG. Animated GIF afbeeldingen worden zelfs 64% kleiner. De weergavekwaliteit blijft hierbij hetzelfde. WebP afbeeldingen kunnen maximaal 16.383 pixels breed en 16.383 pixels hoog zijn.
Door de kleinere bestandsgrootte worden afbeeldingen snellergeladen door webbrowsers. Het bestandsformaat WebP ondersteunt animatie (zoals animated GIF-bestanden), ICC* kleurprofielen, XMP** metadata en tiling*** (tegelen).
*ICC kleurprofielen; met een ICC-profiel kan het kleurgevoel op meerdere in- of uitvoerapparaten gelijk getrokken worden waardoor de gespecificeerde kleuren er ongeveer hetzelfde uitzien
** XMP is een ISO-standaard ontwikkeld door Adobe. Met XMP kan metadata (gegevens over foto’s) aan of bij digitale bestanden worden toegevoegd zoals cameramerk, sluitertijd en diafragma
*** tiling; het samenstellen van zeer grote afbeeldingen met een maximaal aantal tegels
Geschiedenis
Google was in 2010 al opzoek naar een nieuw videoformaat dat spaarzaam gegevens kon converteren (WebM). De compressie die hiervoor nodig was, bleek ook geschikt te zijn voor afbeeldingen. Daarom transformeerde Google het formaat snel naar een afbeeldingsformaat. WebP was geboren. Het WebP team van Google richt zich op het verbeteren van het web door kleinere, sneller ladende afbeeldingen.
WebP is het ‘kleine broertje’ van WebM. WebP combineert de voordelen van bekende standaarden zoals JPG en PNG. Dit betekent dat WebM de grootte van complexe afbeeldingen vrijwel zonder verlies van kwaliteit kan verkleinen, terwijl PNG de afbeeldingen wel kan opslaan om ruimte te besparen, maar ze niet kan verkleinen.
Hoe werkt WebP compressie?
WebP is gebaseerd op de enkele afbeeldingscompressies voor frames die ook gebruikt wordt door het open videoformaat WebM. De afbeelding wordt vervolgens ingesloten in een RIFF-container.
WebP ondersteunt zowel ‘lossy’ als ‘lossless’ compressie. De precieze verkleining hangt af van welke van deze compressies je gebruikt. Bij ‘lossy’ compressie gebruikt WebP ‘predictive coding’ om de bestandsgrootte te verminderen. Predictive coding (voorspellende codering) gebruikt de waarden van de nabijgelegen pixels in een afbeelding om de waardes te bepalen en codeert vervolgens alleen het verschil.
Lossless WebP codering gebruikt een veel gecompliceerdere set methoden die is ontwikkeld door het WebP team.
Zie ook: https://developers.google.com/speed/webp/docs/compression
Webbrowser ondersteuning
WebP wordt nu al ondersteund door Google Chrome, Mozilla Firefox, Microsoft Edge, Google Chrome, Chromium, Opera en de webbrowser van Android 4.0, maar het gebruik van WebP is vooralsnog zeer beperkt. Apple’s webbrowser Safari ondersteunt WebP vanaf versie 14 en hoger.
WordPress
Vanaf versie 5.8 ondersteunt WordPress ook WebP. Zeker als je een snellere WordPress site wil wordt het gebruik van WebP aangeraden. Afbeeldingen zijn verantwoordelijk voor gemiddeld 50% van het ‘gewicht’ van een website. Daarom is het slim om te kijken wat je kunt verbeteren op dit gebied.
In plaats van je afbeeldingen direct in WebP format te uploaden naar WordPress, kun je ook gebruik maken van een WordPress plugin die je originele afbeeldingen naar het WebP format omzet en daarnaast de originele afbeeldingen aanbiedt aan gebruikers zonder WebP ondersteuning. Op die manier krijgt iedereen de snelste en best mogelijke gebruikerservaring. Een paar voorbeelden van WebP WordPress plugins zijn Imagify, Optimale en ShortPixel.
Note: ook voor Magento 2 zijn er ook diverse Image-optimizer extensies beschikbaar
Nadelen WebP
Naast vele voordelen kent WebP ook wat nadelen. Zo is het lastig om WebP afbeeldingen op pc of Mac te openen. Bekende beeldverwerkingsprogramma’s ondersteunen de standaard alleen via extensies (al dan niet betaald). Er zijn al diverse programma’s beschikbaar om JPG- en PNG bestanden te converteren naar WebP. Voor Photoshop is een plugin beschikbaar. WebP vertegenwoordigt het optimale compromis tussen beeldkwaliteit en gebruiksvriendelijkheid.
In totaal gebruikt rond de 79,2% van internetgebruikers een browser die WebP ondersteunt. Alhoewel het dus zeker de ruime meerderheid is, is die 20,8% te veel om nu al te negeren.
Converteren
Het converteren van JPG en PNG bestanden is vrij eenvoudig. In drie simpele stappen kun je bestanden online omzetten naar het WebP formaat.
- Bestand uploaden
- Bestandsindeling voor doelbestand kiezen
- Bestand downloaden
Een aantal online tools die je hiervoor kunt gebruiken:
Slotwoord
Hopelijk ben je na het lezen van dit artikel ervan overtuigt dat WebP veel potentieel heeft om het beste formaat voor afbeeldingen online te worden. Maar alleen als Google het blijft doorontwikkelen. Gezien het effect op laadtijden, kan vrijwel iedere website eigenaar of sociale media platform profiteren van de WebP-indeling.
Wil jij ook profiteren van de voordelen van WebP? Wij kunnen je daarbij helpen. Een kleine aanpassing met veel voordeel. Meer weten? Bel of mail ons
Geschreven door: Berry Smits