Foto’s maakte je vroeger vaak alleen in vakanties, tijdens verjaardagen en ander bijzondere momenten. En dan was er alleen een keuze 9×13 0f 10×15 cm. mat of glanzend. Ik zie me na de vakantie nog zo bij de fotowinkel staan met mijn wegwerpcamera of fotorolletje. Daar ging de fotograaf mee aan de slag in de doka (donkere kamer) om de negatieven te ontwikkelen en om te zetten naar een positief beeld. Meestal 12, 24 of 36 foto’s, waarvan er standaard een paar ‘verpest’ waren door een vinger (deels) voor de lens, maar dat zag ik pas een week na het inleveren van het rolletje. Ja echt, een week wachten op het resultaat.
Iedereen maakt foto’s
En nu maakt iedereen foto’s. Soms krijgen we gigantische grote bestanden voor gebruik op websites of hele kleine schermafbeeldingen voor gebruik in drukwerk. En dat kan in allerlei vormen. Van .heic en .jpg tot .png en tegenwoordig ook .webp. Foto’s voor drukwerk moeten zo groot mogelijk zijn voor een mooie afdruk. En voor websites moeten ze juist weer zo klein mogelijk zijn qua bestandsgrootte om snel genoeg te laden. Een webpagina met 10 foto’s van 7 Mb zal een stuk langzamer laden dan dezelfde pagina met 10 geoptimaliseerde foto’s van nog geen 1 Mb in totaal.
Wat zijn .webp bestanden?
We vertellen je graag de voor- en nadelen van dit nieuwe bestandsformaat voor afbeeldingen.
Als je een website hebt die snel laad kan rekenen op een hogere weergave in de zoekresultaten. En meer verkeer naar je site, zorgt ook voor meer conversie en omzet. Webp afbeeldingen helpen je enorm om de snelheid van je website te optimaliseren.
Google heeft het Webp bestandsformaat ontwikkeld. Webp staat bekend om zijn enorme compressie met toch nog een goede beeldkwaliteit. En daardoor zijn dezelfde afbeeldingen in JPEG of PNG formaat groter dan WebP. Ondanks de stijgende populariteit van het WebP formaat, zijn er nog steeds maar weinig designer, webbouwers of beheerders van sites die werken met WebP bestanden. We vertellen je in dit artikel graag waarom je wel WebP zou moeten gebruiken.
WebP levert je kleine bestanden van hoge kwaliteit
Google is gestart met WebP (spreek uit: weppie) in 2010. Webbouwers en website beheerders kunnen hiermee afbeeldingen van hoge kwaliteit gebruiken met een hoge compressie (bestandsverkleining). Compressie zorgt ervoor dat het bestand kleiner wordt in bits en bytes dan het origineel. Er zijn 2 soorten compressie:
- Lossless: de afbeeldingskwaliteit blijft hetzelfde en de bestandsgrootte wordt kleiner.
- Lossy: de afbeeldingskwaliteit neemt af en de bestandsgrootte wordt kleiner.
Lossy is bekend van JPEG compressie. Als je een bestand teveel comprimeert, zie je uiteindelijk vierkantjes of korrels in je beeld. Je verliest kwaliteit in je foto. Vroeger viel dat op schermen minder op, maar met de nieuwe generatie 4K (en hoger) schermen, valt dat wel op. En hier komt WebP om de hoek kijken!
WebP helpt bij het verkleinen van de bestandsgrootte, zonder in te leveren op beeldkwaliteit. Google claimt dat de lossless compressieratio van WebP 26% kleiner is dan het PNG formaat en lossy compressie is 25-40% kleiner dan JPEG. Websites met veel afbeeldingen die overstappen op WebP kunnen milliseconden of zelfs meer snelheidswinst behalen bij het laden van de site, vooral op mobiel.
Welke browsers ondersteunen WebP?
WebP groeit gestaag in populariteit, maar niet alle browsers kunnen er goed mee overweg. Deze browsers ondersteunen WebP (ten tijde van het schrijven van dit artikel):
- Google Chrome desktop
- Google Chrome for Android
- Microsoft Edge
- Firefox
- Opera
- Android 4.0+ native browser
- Klik hier voor een actueel overzicht van Google >
De voordelen van WebP
Door gebruik te maken van WebP kun je lichtgewicht afbeeldingen gebruiken van hoge kwaliteit, waarbij de totale grootte van je webpagina kleiner wordt en dus sneller kan laden. Dit is de belangrijkste reden om WebP te gebruiken. WebP brengt alle mogelijkheden van JPEG, PNG en GIF samen in 1 bestandsformaat met een hogere compressie. Het kan soms zelfs wel tot 2/3 van de bestandsgrootte schelen.
En WebP ondersteunt, net als PNG, transparantie.
- Kleinere bestandsgrootte
- Verbeterde compressie
- Betere overloop van kleuren
De nadelen van WebP
Omdat nog niet alles browsers WebP ondersteunen is het gebruik van WebP nog niet wereldwijd optimaal.
- Niet alle browsers ondersteunen WebP
- Glans in de beelden kan een beetje als plastic overkomen
- Niet veel export mogelijkheden in veel progamma’s voor beeldbewerking
Hoe zet je een JPG/PNG bestand om naar WebP?
Er zijn verschillende mogelijkheden om bestaande afbeeldingen om te zetten naar WebP.
- Steeds meer programma’s ondersteunen opslaan als WebP. De nieuwste versies van PhotoShop kunnen al opslaan als WebP. Voor de experts is ook een programma voor het (de)coderen van WebP, een bestandsviewer en een tool voor GIF naar WebP conversie. Klik hier om te downloaden en de bijbehorende instructies.
- Er zijn verschillende online tools, zoals Online-Convert en Squoosh.
- Voor WordPress sites hebben wij oplossingen om tijdens het uploaden JPG en PNG bestanden automatisch te verkleinen. Daarbij kunnen we ook bestanden converteren naar WebP en per browser de juiste beelden leveren. Mail naar [email protected] voor meer informatie over automatische WebP conversie voor je WordPress website.
Bonustip om de snelheid van je site te controleren
Er zijn 3 tools die je helpen om de snelheid van je site te meten. En je krijgt direct inzicht in hoe je de site nog verder kunt verbeteren (waaronder afbeeldingen serveren in moderen formaten zoals WebP):
We helpen je graag bij het verbeteren en optimaliseren van je site om hoger te scoren in de zoekresultaten. Dit noemen we zoekmachine optimalisatie (SEO). Maar we kijken verder dan onze (en jouw) neus lang is: we helpen je graag met de complete (online) marketing. Van social media beheer tot drukwerk en van folders / brochures tot online en offline adverteren.
