Afbeeldingen op je KMO-website: wat moet meteen laden en wat kan wachten?

Een grote foto van je zaak, enkele realisaties en een portret maken je website herkenbaar. Maar een mobiel bezoeker hoeft niet meteen elke foto onderaan de pagina te downloaden. Omgekeerd mag de belangrijkste foto bovenaan niet onnodig wachten. De juiste aanpak is geen algemene knop ‘alles lazy-loaden’, maar een bewuste volgorde.

Deze evergreen-gids helpt Belgische zelfstandigen en KMO's om betere vragen te stellen aan hun websitebouwer. Het is geen nieuwe browseraankondiging en geen meting van jouw website. De technische uitleg steunt op de primaire documentatie onderaan.

Eerst bepalen: welke afbeelding ziet de bezoeker meteen?

Neem een lokale schrijnwerker met een grote projectfoto bovenaan en een galerij verderop. De bovenste foto kan belangrijk zijn voor Largest Contentful Paint, of LCP: een meetwaarde voor wanneer het grootste zichtbare beeld- of tekstonderdeel verschijnt. Dat is iets anders dan INP, dat over reacties op interacties gaat.

De galerij hoeft meestal niet op hetzelfde moment aan de beurt te komen. Controleer wel zowel een smal als een breed scherm. Wat op desktop al zichtbaar is, kan op mobiel pas na scrollen verschijnen. De LCP-kandidaat kan eveneens verschillen. Ga niet alleen af op de naam ‘hero’ in je beheersysteem: kijk naar de werkelijke pagina en een prestatiemeting.

Lazy loading is voor beelden die nog niet nodig zijn

Met loading="lazy" mag de browser het ophalen uitstellen totdat de afbeelding een berekende afstand van het zichtbare venster bereikt. Dat betekent niet dat hij precies op de schermrand begint te downloaden. De browser bepaalt de drempel.

Volgens web.dev moet je afbeeldingen die waarschijnlijk meteen in beeld staan niet lazy-loaden, zeker niet de LCP-afbeelding. Voor een galerij lager op de pagina is het vaak wel een logisch uitgangspunt.

Een eenvoudig voorbeeld voor een projectfoto verderop:

<img
  src="/images/project-keuken.webp"
  loading="lazy"
  width="960"
  height="640"
  alt="Eiken keukenkasten met een licht werkblad"
>

Dit is gewone HTML, geen instructie om bestaande frameworkcomponenten blind te vervangen. In een CMS of framework kan de gegenereerde HTML anders worden aangestuurd. Laat daarom de uiteindelijke browseruitvoer controleren.

Eager en high zijn niet hetzelfde

loading="eager" betekent laden zonder de extra vertraging van lazy loading. Het is ook het normale gedrag wanneer het loading-attribuut ontbreekt. Het maakt een afbeelding niet automatisch belangrijker dan andere downloads.

fetchpriority="high" geeft de browser een relatieve prioriteitshint voor een belangrijke afbeelding. Dat kan passen bij een bevestigde LCP-afbeelding. Het is geen gegarandeerde laadsnelheid en vervangt geen goede bestandsgrootte of vroege ontdekbaarheid.

<img
  src="/images/atelier.webp"
  loading="eager"
  fetchpriority="high"
  width="1200"
  height="800"
  alt="Werkbank en gereedschap in het atelier"
>

Geef niet elke foto een hoge prioriteit. Het doel is onderscheid maken, niet alles tegelijk voorrang geven. Combineer lazy loading en hoge prioriteit ook niet als ‘oplossing’ voor de belangrijkste foto: de uitgestelde ontdekking of download kan daarmee niet zomaar verdwijnen. Voor CSS-achtergrondbeelden kan een andere aanpak nodig zijn; deze voorbeelden gaan over het img-element.

Reserveer ruimte en lever een passend bestand

MDN beschrijft hoe width en height de browser helpen om vóór het laden de beeldverhouding te bepalen en ruimte te reserveren. Daarmee verminder je het risico dat tekst of knoppen verschuiven wanneer een foto verschijnt. De waarden moeten overeenkomen met de beeldverhouding van het echte bestand; CSS kan het beeld vervolgens responsief weergeven.

Gebruik daarnaast afbeeldingen met een passende resolutie en compressie. Een WebP-bestand is niet vanzelf klein. Laat controleren welk bestand een mobiele browser werkelijk downloadt. Met srcset en sizes kun je verschillende beeldbreedtes aanbieden en aangeven hoeveel ruimte het beeld inneemt. De browser kiest vervolgens een bron. Verkeerde sizes-waarden kunnen alsnog een te groot bestand laten ophalen.

Schrijf ook een zinvolle alternatieve tekst als de afbeelding informatie draagt. Een puur decoratief beeld kan alt="" krijgen. Een bestandsnaam of een lijst zoekwoorden helpt een bezoeker niet om de inhoud te begrijpen.

Een praktische controle zonder echte aanvragen

1. Kies één belangrijke landingspagina, bijvoorbeeld je diensten- of realisatiepagina.
2. Open die op mobiel formaat en desktop. Noteer welke beelden onmiddellijk zichtbaar zijn.
3. Bekijk in de browserontwikkelaarstools het netwerkverkeer met lege cache en een afgesproken mobiele verbinding. Bewaar de instellingen, zodat een vergelijking herhaalbaar blijft.
4. Controleer de LCP-kandidaat, het werkelijk gekozen afbeeldingsbestand en eventuele layoutverschuivingen. Eén snelle lokale test is geen bewijs voor alle bezoekers.
5. Pas één ding tegelijk aan: bijvoorbeeld lazy loading verwijderen van de bovenste foto, of de galerij wel uitstellen.
6. Herhaal dezelfde meting en controleer visueel of afbeeldingen, uitsnedes, alternatieve teksten en contactknoppen goed blijven werken. Verstuur geen testaanvragen naar echte klantenprocessen.

Vraag je websitebouwer om een vergelijking met dezelfde pagina, schermgrootte en meetinstellingen. Een kleinere download is een concreet resultaat; meer aanvragen of betere zoekposities volgen daar niet automatisch uit.

Veelgestelde vragen

Moet ik alle foto's naar WebP omzetten?

Niet zonder controle. Formaat, resolutie, compressie en zichtbare kwaliteit horen bij elkaar. Begin bij grote bestanden die bezoekers daadwerkelijk downloaden en vergelijk het resultaat.

Is lazy loading slecht voor mijn website?

Nee. Het is bruikbaar voor beelden die nog niet nodig zijn, maar kan de belangrijkste zichtbare afbeelding juist vertragen. De plaats en functie van het beeld bepalen de keuze.

Lost dit alle snelheidsproblemen op?

Nee. Serverreacties, scripts, lettertypes en andere onderdelen kunnen ook een rol spelen. Dit artikel behandelt alleen de laadvolgorde en levering van afbeeldingen.

Wil je duidelijk krijgen welke beelden op jouw website eerst aandacht verdienen? Bespreek je belangrijkste pagina met IntrICT via de contactpagina. Begin met een concrete controle, niet met een belofte over scores of omzet.

Bronnen en datering

• web.dev: browser-level image lazy loading, zichtbare laatste update 13 augustus 2024. Een oorspronkelijke publicatiedatum wordt op de gecontroleerde pagina niet vermeld.
• web.dev: Fetch Priority, zichtbare laatste update 14 november 2023. Een oorspronkelijke publicatiedatum wordt op de gecontroleerde pagina niet vermeld.
• MDN: het img-element, laatst gewijzigd 11 september 2026 volgens het time-element. Geen oorspronkelijke publicatiedatum vastgesteld.

Bronnen gecontroleerd op 26 oktober 2026. Dit is praktische evergreen-uitleg, geen nieuwsbericht over een lancering in oktober.