Optimaliseer je website: Gebruik WebP-bestanden voor een betere gebruikerservaring

Heb jij te horen gekregen dat jullie website niet snel genoeg is en dat de afbeeldingen te groot of te zwaar zijn? Een afbeelding is idealiter niet zwaarder dan 100kB. Maar gebruikt jullie website grote afbeeldingen (bijv. in een header of HERO-sectie), dan gaat de reguliere JPG-compressie je wel helpen, maar gaat het ten koste van de kwaliteit. Daardoor zal jouw product of dienst niet mooi overkomen wat ook weer een negatief effect heeft op de conversie. Eén van de meest voorkomende uitdagingen is dan ook het verkleinen van afbeeldingen tot onder de 100 kB zonder veel verlies van kwaliteit. In deze gevallen wordt WebP vaak als oplossing aangedragen, maar wat is een WebP-bestand precies en hoe maak je deze?

Wat is een WebP-bestand?

Een WebP-afbeelding is een bestandsformaat ontwikkeld door Google met als doel de bestandsgrootte van afbeeldingen te verminderen, terwijl de beeldkwaliteit zoveel als mogelijk behouden blijft. WebP-afbeeldingen dragen dan dus ook bij aan een snellere en betere internetervaring.

Waarom zou je WebP gebruiken op je website?

Door WebP-afbeeldingen te implementeren op je website, laad jullie website dus (veel) sneller. Snellere laadtijden leiden tot meer conversies doordat de gebruikerservaring verbetert, en omdat zowel de gebruikerservaring als de Google Page Speed Score verbeteren, stijgen ook de posities in zoekmachines. Wil je weten hoe je een afbeelding optimaliseert voor een bepaald zoekwoord of thema? Lees dan ook ons artikel over geoptimaliseerde teksten schrijven en afbeeldingen toevoegen

Hoe kies je het juiste afbeeldingsformaat

Een belangrijke overweging is het formaat van de gebruikte afbeeldingen. Het is niet nodig om bijvoorbeeld een afbeelding van 1600 pixels in te laden op een mobiel scherm van 600 pixels. Het toepassen van compressie met WebP-bestanden kan hierbij helpen, maar zelfs het gebruik van een kleinere JPG zal de prestaties al aanzienlijk verbeteren. Het is dus essentieel om het formaat van afbeeldingen te optimaliseren om de laadtijden en de algehele gebruikerservaring te verbeteren.

Hoe kan je zien hoe groot en hoe zwaar een afbeelding is?

Voordat je begint met het converteren naar een WebP-bestand is het handig om te weten wat nu het formaat en bestandsgrootte van de afbeelding is, volg de volgende stappen om dit in te zien:

Mac:

• In de map zie je de bestandsgrootte van de afbeeldingen.
  
• Het afbeeldingsformaat zie je als op het bestand rechter muisknop klikt en kiest voor ‘Toon info’.
  

Hoe kan ik afbeeldingen omzetten naar WebP?

Er zijn diverse methoden beschikbaar om afbeeldingen te converteren naar WebP, hieronder een paar mogelijkheden:

• Adobe Photoshop: Met Photoshop sla je afbeeldingen op in alle soort type formaten. Als je de gewenste afbeelding in het juiste formaat hebt volg dan de volgende stappen:

• • Ga naar Bestand > Opslaan als
  • Indeling WebP, deze optie word weergeven als je klikt op ‘Kopie opslaan..’
  • Hierna opent een venster met WebP-opties, Hier stel je in of de afbeelding gecomprimeerd mag worden zonder of met verlies
    
  • Als je voor de optie met verlies gaat schuif dan de bestandsgroottebalk naar 60 en klik op Ok, bekijk of je tevreden bent met de kwaliteit en of de bestandsgrootte onder de 100kb is
  • Ben je niet tevreden met de kwaliteit of is de afbeelding te groot, herhaal de stappen en schuif de balk naar beneden of naar boven totdat je de juiste WebP afbeelding gemaakt hebt
• Online afbeeldingsconverter: Maak gebruik van handige websites op het internet waar je afbeeldingen kunt uploaden en converteren. Na de conversie dien je het resulterende bestand te downloaden en kunt het meteen inzetten. Een voorbeeld hiervan is deze gratis online tool.

Voor- en nadelen van WebP-afbeeldingen

Overweeg de voor- en nadelen van WebP-bestanden voordat je besluit dit bestandstype te gebruiken.

Voordelen van WebP-bestanden

• Snellere laadtijden:Webpagina’s laden sneller, wat de gebruikerservaring verbetert en de positie van de website in zoekmachines versterkt. Traag ladende afbeeldingen kunnen gebruikers ontmoedigen en hen aanzetten om elders te zoeken naar producten en diensten.
• Compatibiliteit webbrowser:Het bestandstype is compatibel met 96% van de webbrowsers, waaronder Google Chrome, Microsoft Edge en Safari. Dit zorgt voor een brede acceptatie en soepele weergave van afbeeldingen op diverse platforms.

Nadelen van WebP-bestanden

• Compatibilieit met CMS: Niet alle CMS ondersteunen WebP out-of-the-box. Soms is een extra plugin of extensie nodig. Onderzoek dus vooraf of jullie WebP bestanden kunnen gebruiken
• Beperkt offline gebruik:WebP is ontwikkeld voor internetgebruik en kan minder handig zijn voor offline toepassingen van afbeeldingen. In situaties waarin offline toegang tot afbeeldingen cruciaal is, moeten alternatieve formaten worden overwogen.
• Potentiële kwaliteitsverlies:Zelfs met minimale compressie kan de kwaliteit van een afbeelding afnemen bij het gebruik van WebP. Dit aspect moet in overweging worden genomen, vooral bij het werken met professionele fotografen en afbeeldingen van hoge kwaliteit, waar behoud van visuele integriteit cruciaal is.

In het kort, WebP-bestanden bieden aanzienlijke voordelen, ze verbeteren de laadtijden en de gebruikerservaring. Ondanks beperkingen zoals minder geschiktheid voor offline gebruik en mogelijk kwaliteitsverlies, maakt de brede compatibiliteit met moderne browsers WebP een krachtige keuze voor het optimaliseren van webafbeeldingen.