Bilder später laden: Warum das erste große Bild eine Sonderrolle hat

Verzögern, was zunächst nicht gebraucht wird

Lazy Loading bedeutet, weniger dringende Ressourcen erst später zu laden. MDN beschreibt dies als Möglichkeit, die anfängliche Arbeit beim Seitenaufbau zu verringern. Für Bilder kann der Browser das über das „loading“-Attribut übernehmen. Die web.dev-Anleitung unterscheidet dabei besonders zwischen zunächst sichtbaren Bildern und weiter unten liegenden Motiven.

Ein wichtiges Startbild sollte nicht pauschal verzögert werden. Außerdem helfen angegebene Bildabmessungen, den benötigten Platz schon vor dem Laden zu reservieren. Diese Hinweise sind Grundlagen der Webentwicklung und keine neue Geschwindigkeitsmessung für Skrabi oder dein Projekt. Ob eine Änderung hilft, muss an der eigenen Seite geprüft werden.

Eine Fotoseite in zwei Bereiche aufteilen

Unser Beispiel zeigt einen lokalen Gartenverein. Oben stehen eine Überschrift, eine kurze Einladung und ein Hauptfoto. Darunter folgen zwölf Bilder vergangener Arbeitstreffen. Für die Planung markieren wir das Hauptfoto als sofort wichtigen Inhalt. Die unteren Motive dürfen nach Bedarf geladen werden, solange das Scrollen verständlich und ruhig bleibt.

Verlange im Bauauftrag unterschiedliche Behandlung dieser Bereiche. Alle Bilder brauchen geeignete Größen und Texte, die ihren Zweck erklären. Ein dekoratives Motiv und ein Foto, das eine konkrete Arbeitssituation dokumentiert, erfüllen verschiedene Aufgaben. Lade nicht allein deshalb ein sehr großes Original, weil der Browser es später anfordert.

Einen Vergleich unter denselben Bedingungen machen

Öffne die Seite in einer frischen Sitzung und notiere, wann Überschrift und Hauptmotiv erkennbar sind. Scrolle anschließend langsam zu den unteren Bildern. Wiederhole denselben Ablauf nach der Änderung. Verwende nach Möglichkeit dieselbe Bildschirmbreite und ähnliche Netzwerkbedingungen. Einzelne subjektive Eindrücke reichen nicht für eine genaue Leistungsbehauptung.

Achte auf springende Inhalte: Wandert ein gerade anvisierter Link weg, sobald ein Bild erscheint? Gibt es leere Flächen, deren Bedeutung unklar bleibt? Erscheint ein Bild auch dann, wenn du schnell bis ans Seitenende gehst? Diese Beobachtungen sind für Leser unmittelbar wichtig und lassen sich ohne erfundene Prozentwerte beschreiben.

Ein Fehlerbild ausdrücklich einplanen

Teste in einer eigenen Entwicklungsumgebung auch eine ungültige Bildadresse. Der Text und die restliche Navigation sollen weiter benutzbar bleiben. Prüfe danach, ob ein fehlendes Hauptbild anders behandelt werden muss als ein fehlendes Galeriemotiv.

Halte die Entscheidung pro Bildbereich fest. „Alle Bilder lazy“ ist eine zu grobe Vorgabe. Besser ist eine nachvollziehbare Regel für das Startbild, die Galerie und gegebenenfalls weitere Inhalte. So bleibt die spätere Pflege verständlich, wenn neue Fotos oder andere Seitenabschnitte dazukommen.