Was ist Bild-Ladeattribut-Builder?
Moderne img-Tags profitieren von mehreren Leistungsattributen, die zusammen verwendet werden: loading steuert Lazy Loading, decoding steuert die Bilddekodierung und fetchpriority signalisiert die Wichtigkeit. Sie richtig kombiniert zu verwenden ist besser als sie isoliert zu setzen.
Kurze Antwort
Verwenden Sie loading='lazy' für Bilder unterhalb des Falzes, um das Laden zu verzögern, bis der Benutzer in die Nähe scrollt. Verwenden Sie loading='eager' oder lassen Sie das Attribut für Bilder oberhalb des Falzes weg.
Last updated: 2026-05-25
Einschränkungen
- Lazy Loading verzögert Bildanfragen, reduziert aber nicht das Gesamtgewicht der Seite - Bilder werden beim Hineinscrollen dennoch heruntergeladen.
- Der Browser reserviert Platzhalter für Lazy-Bilder bereits vor dem Laden, was das Layout beeinflussen kann, wenn width- und height-Attribute fehlen.
- Die Verwendung von loading='lazy' auf Bildern oberhalb des Falzes kann LCP verzögern.
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
So nutzt du dieses Tool
- Wählen Sie den Bild-Anwendungsfall, der zu der Position des Bildes auf der Seite passt.
- Das Tool setzt die empfohlene Attributkombination für diesen Anwendungsfall.
- Geben Sie den Bildpfad, die Abmessungen und den Alt-Text ein.
- Kopieren Sie das vollständige img-Tag in Ihre Seite.
Wofür du es nutzen kannst
- Erstellen Sie ein Hero-Bild mit loading='eager', decoding='sync' und fetchpriority='high'.
- Erzeugen Sie Lazy-Loaded-Artikelbilder mit loading='lazy' und decoding='async'.
- Optimieren Sie Thumbnail-Galerien mit passenden loading- und decoding-Attributen.