HTML-tools

Gratis Afbeelding Laadattribuut Bouwer

Maak geoptimaliseerde img tags door loading, decoding en fetchpriority te combineren.

Tool laden...

Wat is Afbeelding Laadattribuut Bouwer?

Moderne img-tags profiteren van loading (lui laden), decoding (decodering) en fetchpriority (prioriteit). Ze correct samen gebruiken is beter dan afzonderlijk.

Snel antwoord

Gebruik loading="lazy" voor onder-de-vouw afbeeldingen. Gebruik loading="eager" voor afbeeldingen boven de vouw die direct moeten laden.

Last updated: 2026-05-25

Beperkingen

  • Lui laden stelt verzoeken uit maar vermindert totaal gewicht niet.
  • Plaatshouderruimte kan layout beïnvloeden zonder width/height.
  • Lazy loading op boven-de-vouw afbeeldingen schaadt LCP.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Zo gebruik je deze tool

  1. Kies de afbeeldingsuse case.
  2. De tool stelt de aanbevolen attribuutcombinatie in.
  3. Voer pad, afmetingen en alt-tekst in.
  4. Kopieer de img-tag.

Waarvoor je het kunt gebruiken

  • Bouw een hero img met loading="eager", decoding="sync", fetchpriority="high".
  • Maak lui-geladen afbeeldingen met loading="lazy".
  • Optimaliseer galerijen met de juiste attributen.

Gebruik

Praktische voorbeelden

Voorbeeld

LCP-hero tag

Een LCP-hero krijgt loading="eager", decoding="sync" en fetchpriority="high".

Voorbeeld

Onder-de-vouw afbeelding

Een artikelafbeelding onder de vouw krijgt loading="lazy" en decoding="async".

Veelgemaakte fouten

  • loading="lazy" op de LCP-afbeelding, wat laadtijd vertraagt.
  • decoding="sync" op elke afbeelding in plaats van alleen kritieke.
  • fetchpriority="high" op meerdere afbeeldingen.

Verificatie

  1. Scroll de pagina en controleer of luie afbeeldingen alleen laden bij de viewport.
  2. Controleer of boven-de-vouw afbeeldingen in de initiële waterfall staan.

FAQ

Vragen over Afbeelding Laadattribuut Bouwer

Wanneer loading="lazy"?

Voor afbeeldingen onder de vouw. Nooit op de LCP-afbeelding.

Wat doet decoding="async"?

De browser decodeert asynchroon, zodat andere inhoud eerst kan renderen.

Wat is de LCP-afbeelding?

Het grootste zichtbare inhoudselement bij laden. Meestal de hero-afbeelding. Niet lui laden.

Lazy loading in een carrousel?

De drempel is relatief aan de viewport, niet de container. Overweeg eager loading.

Gerelateerde tools

Meer html-tools

Html

CSP Hash Generator

Genereer CSP-hashwaarden voor inline scripts en styles. Hash exacte code met SHA-256, SHA-384 of SHA-512.

Open tool

Probeer ook

Probeer ook