Lazyloading van afbeeldingen

Afbeeldingen inladen is een van de grootste factoren die invloed hebben op de snelheid van een website. Maar tegelijkertijd zijn ze een essentieel onderdeel van een website. Hoe ga je het beste met afbeeldingen om? Met Lazyloading en optimalisering. Lees verder voor de tips!

Afbeeldingen of plaatjes op een website voegen een hoop toe. Van het overtuigen tot een verkoop, tot het duidelijk maken van een punt die anders een halve pagina aan tekst kost. Een relevante afbeelding die wat toevoegt verhoogt ook de tijd dat een bezoeker op een bepaalde pagina zit en converteert dus beter. Er kan helaas wel het een en ander over het hoofd gezien worden met het gebruik van afbeeldingen op een website. 

Optimaliseren van afbeeldingen en verkleinen

Het optimaliseren van afbeeldingen en media is een item wat ook afhankelijk kan zijn van jouw website.  Wanneer je gebruik maakt van een thema dan kan het zijn dat die een speciale voorkeur heeft van de afmetingen van een afbeelding. We raden altijd aan om afbeeldingen lokaal op je computer bij te snijden en te bewerken. Niet op de website zelf. Dit maakt namelijk vaak overbodig grote bestanden aan met niet logische namen. Waardoor je op een gegeven moment het overzicht hierin kwijtraakt. 

Het bijsnijden of het wijzigen van de pixels van een afbeelding kan natuurlijk in Photoshop of een betaald programma. Echter kan dit ook gewoon met Paint 3D in Windows. Aan jou de keus waarmee je dit bijsnijdt. Voor de meeste afbeeldingen gebruiken wij of 900 pixels breedte of 1204 voor de grotere afbeeldingen die meer detail nodig hebben. Vervolgens kan via de website tinypng de afbeelding nog gecomprimeerd worden. Dit comprimeert de afbeelding zonder veel kwaliteitsverlies. En brengt een afbeelding van 1 MB al gauw terug naar een veel kleiner formaat. Een onderdeel waar je ook mee rekening kunt houden met het maken van afbeeldingen of foto’s voor producten door een neutrale achtergrond uit te zoeken. Grassprieten zorgen bijvoorbeeld er al vaak voor dat een afbeelding niet zo klein gemaakt kan worden als een neutrale achtergrond zoals een witte muur. 

Probeer hier dus ook wat creatief mee om te springen in het maken van foto’s die op jouw website hosting gaan verschijnen. 

Zolang je onder de 100 KB per afbeelding hebt, dan zit je vaak goed. Meer dan dat en je zult merken dat de laadtijd achteruit gaat. Vooral voor mobiele apparaten zal dit hinder opleveren via bijvoorbeeld een 3G verbinding. Niet alleen is dit belangrijk voor het gebruikersgemak van je bezoekers. Maar ook voor zoekmachines zoals Google, Bing of DuckDuckGo. Die houden hier tevens rekening mee. 

Lazyloading van afbeeldingen, wat is het? 

Het lazyloaden van afbeeldingen verwijst naar het inladen van afbeeldingen wanneer deze pas voor de gebruiker in zicht komt. Dit gebeurdt in de meeste gevallen met een stuk Javascript code. Deze codetaal zorgt ook voor velen andere zaken die een website dynamisch maken. Dus wanneer een afbeelding pas daadwerkelijk noodzakelijk is, wordt hij pas ingeladen. 

Dit heeft als groot voordeel dat de initiële laadtijd van een complete webpagina dus vele malen kleiner kan zijn. Kleinere webpagina’s betekend een snellere laadtijd op vrijwel alle apparaten. Hierdoor kan dit dus een grote impact hebben.

Als je een portfolio website hebt voor bijvoorbeeld je fotografie dan is dit bijna onmisbaar om toe te passen. Zeker grote afbeeldingen die zo goed mogelijk dienen te zijn, zijn zo veel beter in te laden dan alles in een keer.

Lazyloading in WordPress

Met de laatste grote kern update van WordPress zit dit standaard ingebakken in de core. Wat betekend dat hier geen extra plugin voor nodig is zoals dat eerder het geval was. Dit heeft als grote voordeel dat er dus geen externe partijen of code meer nodig is om dit te realiseren. Minder plugins betekend ook dat een WordPress website sneller ingeladen kan worden en ook minder vatbaar is voor beveiligingsissues. Plugins moeten namelijk bijhouden worden om een WordPress website veilig te houden. Verouderde plugins kunnen namelijk een toegang vormen voor kwaadwillenden die hierdoor kunnen binnendringen en de website kunnen beheren.

Wanneer je hier verder geen omkijken meer naar wilt hebben, kijk dan ook eens naar onze managed WordPress hosting pakketten. Wij nemen dan dit soort zaken compleet uit handen. Waardoor jij de focus kunt leggen op datgene waar jouw website een succes van wordt! 

Als je dus nog een extra plugin hiervoor geïnstalleerd hebt dan kan je dit met de laatste update van WordPress verwijderen. Dit kan namelijk dan ook voor conflicten tussen de kern en de plugin zorgen. Al deze plugins zijn dus niet meer relevant met de laatste update van WordPress hosting. 

Lazyloading van afbeeldingen in andere content management systemen

Lazyloading van afbeeldingen in andere Content Management Systemen of CMS is te realiseren met een plugin of dit zelf toe te voegen aan de code. Er zijn meerdere online tutorials te vinden hoe dit voor jouw website toe te passen is. Vaak is dit een zinvolle toevoeging op jouw website door al de bovenstaand genoemde redenen. 

Heb jij lazyloading al toegepast op je website? Doe dit dan nu om de gebruikerservaring nog beter te maken!