Responsive Bilder: srcset, sizes und picture

Liefere das richtige Bild an den richtigen Bildschirm mit srcset und sizes, reserviere picture für Art Direction und meistere Lazy Loading.

9 Min. · 3 Fragen

Bilder machen typischerweise die Hälfte des Gewichts einer Seite aus: Sie sind dein erster Performance-Hebel. Der zentrale Mechanismus ist srcset mit w-Deskriptoren, die die tatsächlichen Breiten der verfügbaren Dateien angeben, gepaart mit sizes, das die vorgesehene Anzeigebreite ankündigt. Wichtiger Punkt: Der Browser wählt das Bild über seinen Preload-Scanner aus, noch bevor er das CSS-Layout berechnet hat. Ohne sizes nimmt er 100vw an und lädt oft weit mehr herunter als nötig. Die endgültige Wahl berücksichtigt auch die Bildschirmdichte: Ein 2x-Bildschirm über eine Fläche von 400 px lädt eine Datei von rund 800 px.

<img src="harbor-800.jpg"
     srcset="harbor-400.jpg 400w,
             harbor-800.jpg 800w,
             harbor-1600.jpg 1600w"
     sizes="(max-width: 600px) 100vw, 50vw"
     alt="Old harbor at sunset"
     width="800" height="533">

Mit srcset/sizes behält der Browser die Kontrolle: Er kann je nach Dichte oder Datensparmodus eine leichtere Variante ausliefern. <picture> dreht die Logik um: Du erzwingst die Quelle über <source media> oder <source type>. Reserviere es für zwei Fälle: Art Direction (ein anderer Bildausschnitt auf dem Handy, nicht nur eine andere Größe) und Formataushandlung (AVIF oder WebP mit JPEG-Fallback). Für ein einfaches Skalieren ist picture unnötige Komplexität.

<picture>
  <source media="(max-width: 600px)"
          srcset="hero-square.jpg">
  <source type="image/avif"
          srcset="hero-wide.avif">
  <img src="hero-wide.jpg" alt="Museum facade"
       width="1200" height="600">
</picture>

Für alles andere auf der Seite verschiebt loading="lazy" den Download, bis sich das Bild dem Viewport nähert, nativ und ohne JavaScript. Kombiniere es mit decoding="async", damit das Dekodieren das Rendering nicht blockiert, und vor allem mit width und height: Der Browser leitet daraus das Seitenverhältnis ab und reserviert den Platz, was Layout-Verschiebungen (CLS) beseitigt. Für das kritische Bild tu das Gegenteil von lazy: fetchpriority="high".

<img src="gallery-01.jpg"
     alt="Exhibition hall"
     loading="lazy" decoding="async"
     width="800" height="600">

Wissenscheck

Stelle sicher, dass du die wichtigsten Punkte dieser Lektion behalten hast.

1. Wofür genau ist das Attribut sizes da?
   • Das Bild auf der CSS-Seite skalieren
   • Die vorgesehene Anzeigebreite ankündigen, damit der Browser aus srcset wählen kann
   • Das maximale Gewicht der heruntergeladenen Datei begrenzen
2. In welchem Fall ist <picture> erforderlich statt eines einfachen srcset?
   • Um dasselbe Bild in mehreren Breiten auszuliefern
   • Für einen anderen Ausschnitt je Bildschirm oder ein modernes Format mit Fallback
   • Um natives Lazy Loading zu aktivieren
3. Welche Wirkung hat loading="lazy" auf dein beim Laden sichtbares Hero-Bild?
   • Keine, das Attribut wird above the fold ignoriert
   • Es verzögert sein Laden und schadet dem LCP
   • Es verbessert das LCP, indem es das Bild priorisiert