Lazy Loading & Responsive Images: Praktischer Einstieg (2025)

Das Problem: Bilder sind riesig

Bilder sind meist die größten Dateien auf einer Webseite. Standardmäßig lädt der Browser beim Aufruf einer Seite alle Bilder** herunter – auch die, die ganz unten liegen und erst nach langem Scrollen sichtbar werden. Das verschwendet Bandbreite, verlängert die Ladezeit enorm und verschlechtert LCP, CLS und die gesamten Core Web Vitals.

Die Lösung hat zwei Säulen:

1. Lazy Loading – Bilder außerhalb des Viewports werden erst geladen, wenn der Nutzer wirklich hinscrollt.
2. Responsive Images – Je nach Gerät und Bildschirmgröße wird automatisch die passende Bildgröße ausgeliefert.

Beides lässt sich heute mit modernem, nativem HTML extrem einfach umsetzen.

Teil 1: Lazy Loading mit einem einzigen Attribut

Früher brauchte man dafür schwere JavaScript-Bibliotheken. Heute reicht ein Attribut:

<img src="beispiel.jpg" alt="Beschreibender Alt-Text" loading="lazy" width="1200" height="800">

loading="lazy" weist den Browser an, das Bild erst kurz bevor es ins Sichtfeld kommt zu laden.

Wichtige Hinweise:

• Immer width und height angeben → verhindert Layout-Shifts (CLS)!
• Nicht auf Above-the-Fold-Bilder (erstes sichtbares Bildschirmsegment) anwenden → dort würde Lazy Loading die wahrgenommene Geschwindigkeit verschlechtern.
• Browser-Support: seit 2020 in allen modernen Browsern (Chrome, Edge, Firefox, Safari) verfügbar → absolut sicher einsetzbar.

Teil 2: Das richtige Bild mit srcset und sizes

Warum sollte ein Smartphone-Nutzer ein 2400 px breites Bild herunterladen, das für 27-Zoll-Monitore gedacht ist?

Mit srcset gibst du dem Browser eine Liste verschiedener Bildgrößen – er wählt automatisch die beste aus.

<img
  srcset="
    bild-klein.jpg  480w,
    bild-mittel.jpg 800w,
    bild-gross.jpg  1200w,
    bild-2x.jpg     2400w
  "
  sizes="(max-width: 600px) 480px,
         (max-width: 1200px) 800px,
         1200px"
  src="bild-mittel.jpg"
  alt="Beschreibender Text"
  loading="lazy"
  width="1200"
  height="800">

Erklärung:

• srcset + xw → „Dieses Bild ist x Pixel breit“
• sizes → sagt dem Browser, wie breit das Bild im Layout tatsächlich dargestellt wird
• src → Fallback für sehr alte Browser

Tipp: Die verschiedenen Größen erstellst du schnell mit unserem Bild-Skalierer.

Teil 3: Art Direction mit dem <picture>-Element

Manchmal reicht eine kleinere Version nicht aus – auf dem Handy willst du ein komplett anderes Bild (z. B. Portrait-Crop statt Landscape).

Genau dafür gibt es <picture>:

<picture>
  <!-- Mobil: Hochformat-Version -->
  <source media="(max-width: 600px)" srcset="bild-portrait.jpg">

  <!-- Tablet & Desktop: Querformat-Version -->
  <source media="(min-width: 601px)" srcset="bild-landscape.jpg">

  <!-- Fallback -->
  <img src="bild-landscape.jpg" alt="Beschreibender Text" loading="lazy" width="1200" height="675">
</picture>

<picture> wird auch genutzt, um moderne Formate wie AVIF/WebP mit JPEG-Fallback anzubieten:

<picture>
  <source type="image/avif" srcset="bild.avif">
  <source type="image/webp" srcset="bild.webp">
  <img src="bild.jpg" alt="Beschreibender Text" loading="lazy">
</picture>

AVIF/WebP-Dateien erstellst du mit unserem Bild-Konverter.

Fazit & Checkliste für maximale Performance

• Alle Bilder unterhalb des First Viewports → loading="lazy"
• Für jedes wichtige Bild mehrere Größen bereitstellen → srcset + sizes
• Bei unterschiedlichen Motiven je Gerät → <picture> mit media-Queries
• Immer width und height angeben → kein CLS
• Moderne Formate (WebP/AVIF) bevorzugen

Die Kombination aus diesen drei nativen Techniken ist eine der wirkungsvollsten Maßnahmen, um Ladezeit, Datenvolumen und Core Web Vitals massiv zu verbessern – und das mit minimalem Aufwand.

Jetzt bist du dran: Einfach umsetzen und sofort schnellere Seiten haben!