Lazyloading toevoegen aan afbeeldingen in de website

De snelheid van je website optimaliseren met Lazy Loading voor afbeeldingen. Deze blog laat zien hoe je dit het beste kunt doen. Het werkt heel simpel.

Omdat ik de vraag vaker heb gekregen, en altijd hetzelfde antwoord geef heb ik er een blog van gemaakt. Thanks to Joost van CCS Energie-Advies voor de vraag!

Waarom Lazy loading in je website?

Afbeeldingen werken beter dan tekst. Je bezoekers blijven alert en nemen de informatie die je ze wilt vertellen beter in zich op.

Het nadeel van afbeeldingen is hun bestandsgrootte en daarmee ook de laadtijd van je pagina. Die wordt langer naarmate je meer afbeeldingen toevoegt.

Door lazy loading toe te voegen aan je afbeeldingen vertel je aan een browser dat hij het plaatje pas mag gaan downloaden zodra de bezoeker bij het plaatje is aangekomen op je pagina. Je knipt in feite dus de laadtijd van de pagina op zodat de eerste weergave direct en zo snel mogelijk kan worden ingeladen. Top he?

Lazy loading verwerken in je website

Is de website recent door ons gebouwd? Dan zijn alle afbeeldingen die je niet zelf toevoegt al voorzien van Lazy loading. Natuurlijk ga je aan de slag met het vullen van content en de daarbij horende afbeeldingen. Die voeg je op twee manieren toe. Voor zowel Prestashop, Open Cart, Fork CMS en Wordpress geldt dit:

• Je upload een afbeelding via de media bibliotheek of een uploadveld. In dit geval hoe je geen lazy loading toe te passen. Dit doen wij al voor je in de code.
• Je voegt een afbeelding toe in de tekst. Dan moet je zelf nog even lazy loading toepassen.

Dat doe je als volgt:

• Plaats de gewenste afbeelding in de tekst
• Ga naar de icon “HTML” ,”HTML” bewerken of “platte tekst”
• Zoek de afbeelding op. De tag van de afbeelding ziet er zo uit: <img src=“afbeelding.jpg” alt=“Alternatieve beschrijving” />
• Daar gaan we deze tag aan toevoegen:
  loading=“lazy”
• Die plaatsen je achter de tag src=“” met een spatie.

Het resultaat is dan:
<img src=“afbeelding.jpg” loading=“lazy” alt=“alternatieve beschrijving” />

Sla de pagina op als je alle afbeeldingen hebt voorzien van lazy loading en je pagina is up-to-date!

Overzicht Contact opnemen