Als je kijkt naar de snelheid waarop de technologie zich ontwikkelt, is het interessant om te zien dat dit voor afbeeldingen op het web achter blijft. Althans, dat lijkt zo. Er zijn wel degelijk ontwikkelingen en moderniseringen op gebied van afbeeldingen op het web en voornamelijk de formaten, bestandsgrootte, compressiemethode en het behoud van de kwaliteit.
Wie zich bezig houdt met het beheren van content op een website of webshop, heeft er vast wel eens mee te maken gehad: De balans tussen de kwaliteit van de afbeelding en de grootte van het bestand. We willen enerzijds de afbeelding zo scherp mogelijk laten zien, zonder dat de laadsnelheid van de website daaronder lijdt.
Het is interessant om te zien dat we al jaren dezelfde formaten gebruiken, namelijk JPEG en PNG. Deze formaten gebruiken we al sinds de jaren 90. We gebruiken JPEG veelal voor afbeeldingen zonder transparantie, en PNG voor afbeeldingen met een (gedeeltelijke) transparantie. Wat veel mensen niet weten is dat er nieuwe – zogeheten ‘next-gen’ – afbeelding formaten zijn die een stuk kleiner en efficiënter zijn, zonder op de kwaliteit van de afbeelding in te leveren.
Een voorbeeld van een next-gen formaat die wij bij Alterio graag gebruiken is WebP. Naast WebP heb je bijvoorbeeld ook JPEG 2000, JPEG XR en AVIF. De reden waarom wij WebP gebruiken, is omdat deze op dit moment door de meeste browsers ondersteund wordt.
Door de modernere manier van het comprimeren van de afbeelding, kan een WebP afbeelding tot wel 50% (of soms zelfs meer!) kleiner zijn dan een JPEG of PNG afbeelding, zónder dat je verschil ziet in de kwaliteit. Dit zorgt ervoor dat de afbeelding sneller gedownload wordt en daardoor dus de laadtijd van jouw website aanzienlijk kan verlagen.
Pagespeed scores verhogen
Een van de onderdelen waar een pagespeed tool naar kijkt is het gebruik van next-gen afbeelding formaten. Als je zelf wel eens een scan hebt uitgevoerd op jouw website, kan het zijn dat je de Serve images in next-gen format tip hebt gekregen. Deze melding zou je zelf eenvoudig kunnen wegkrijgen door al jouw afbeeldingen te converteren naar bijvoorbeeld WebP.
Wil je liever een ander formaat uitproberen? Let er dan wel goed op of het ondersteund wordt door alle browsers. Dit kun je eenvoudig checken op de Can I use? website.
Ga zelf aan de slag
Het web staat vol met tools om jouw afbeeldingen te converteren van JPEG of PNG naar WebP, bijvoorbeeld deze. Dit is een tijdrovend klusje, maar gelukkig zijn er ook tools om dit in bulk te doen, zoals bijvoorbeeld deze Google Chrome extensie. Let op: hiervoor heb je Google Chrome voor nodig als browser.
Extra tip!
Soms kun je zelf nog meer winst behalen op de grootte van jouw afbeelding door het een keer ‘extra’ te laten comprimeren door TinyPNG. Het scheelt soms maar een klein beetje, maar alle kleine beetjes helpen! Vooral als je veel afbeeldingen hebt op jouw website.
Wil je meer weten?
Hopelijk heeft bovenstaande artikel jou wat meer duidelijkheid gegeven over afbeeldingsformaten en hoe je daarmee de laadtijden van jouw website kunt verlagen. Heb je nog meer vragen of wil je persoonlijk advies voor jouw website? Vul dan hieronder het contactformulier in of bel me op. Ik vertel je graag meer!