Responsive Images

Definition: Responsive Images sind HTML-Techniken, mit denen der Browser je nach Bildschirmgröße, Device Pixel Ratio (DPR) und unterstütztem Format automatisch das am besten geeignete Bild auswählt und lädt. Die zentralen HTML-Bausteine sind das srcset-Attribut (mehrere Bildversionen) und das sizes-Attribut (Darstellungsbreite im Layout) beim <img>-Element sowie das <picture>-Element für Art Direction und Format-Switching. Ohne Responsive Images laden Mobilgeräte mit 400px-Display ein Desktop-Bild mit 2000px Breite – 25× mehr Daten als nötig. Richtig implementiert reduzieren Responsive Images die übertragene Datenmenge auf Mobilgeräten um 60–80 %, verbessern LCP direkt und senken Absprungraten durch schnellere wahrgenommene Ladezeit.

Erläuterung

Das Browser-Verhalten bei Responsive Images ist intelligenter als oft angenommen: Der Browser berücksichtigt nicht nur Viewport-Breite sondern auch Device Pixel Ratio (Retina: 2×, 3×) und verfügbare Netzwerkbandbreite. Ein iPhone 14 mit 390px CSS-Breite aber 3× DPR benötigt 1170px physikalische Pixel für ein scharfes Bild. srcset + sizes kommuniziert dem Browser diese Information damit er optimal entscheiden kann.

srcset und sizes-Attribut

srcset für verschiedene Breiten: <img srcset="img-400.webp 400w, img-800.webp 800w, img-1600.webp 1600w" src="img-800.webp" alt="...">; «400w» gibt die intrinsische Breite in Pixeln an; Browser wählt basierend auf Viewport-Breite, DPR und sizes; src als Fallback für Browser ohne srcset-Unterstützung
sizes-Attribut: Teilt Browser mit wie groß das Bild im Layout dargestellt wird; <img srcset="..." sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 800px">; auf Mobile (≤768px): volle Viewport-Breite (100vw); auf Tablet: halbe Viewport-Breite (50vw); auf Desktop: immer 800px; ohne sizes: Browser nimmt 100vw an → lädt oft zu großes Bild
srcset für Pixeldichte (DPR): <img src="logo.png" srcset="logo.png 1x, logo@2x.png 2x, logo@3x.png 3x">; für kleine Icons und Logos mit fester CSS-Größe; Browser wählt basierend auf Device Pixel Ratio; iPhone 14: lädt 3x-Version; 2016er Android: lädt 1x-Version

picture-Element

Format-Switching (WebP/AVIF): <picture><source srcset="image.avif" type="image/avif"><source srcset="image.webp" type="image/webp"><img src="image.jpg" alt="..."></picture>; Browser wählt erstes unterstütztes Format; AVIF: beste Komprimierung, neueste Browser; WebP: breite Unterstützung; JPEG/PNG als Fallback; bis 50 % kleinere Dateien als JPEG
Art Direction: Verschiedene Bildausschnitte für verschiedene Bildschirmgrößen; <picture><source media="(max-width: 768px)" srcset="hero-mobile.webp"><img src="hero-desktop.webp" alt="..."></picture>; Desktop: breites Panoramabild; Mobile: engerer Ausschnitt mit Fokus auf Hauptmotiv; kein Browser-Resize eines ungeeigneten Bildausschnitts
Kombination: picture mit source für Format + srcset für Größen: <picture><source type="image/avif" srcset="img.avif 400w, img@2x.avif 800w" sizes="..."><source type="image/webp" srcset="img.webp 400w, img@2x.webp 800w" sizes="..."><img src="img.jpg"></picture>; vollständigste aber komplexeste Implementierung

CLS-Vermeidung und LCP-Optimierung

Width und Height Attribute: <img width="800" height="600" srcset="...">; Browser reserviert Platz vor dem Laden; verhindert CLS (Layout-Verschiebung beim Laden); aspect-ratio wird aus width/height automatisch berechnet; häufig vergessen aber kritisch für CLS-Score; auch bei Responsive Images immer width/height angeben
LCP-Bild preloaden: <link rel="preload" as="image" href="hero.webp" imagesrcset="hero.avif 1200w, hero.webp 1200w" imagesizes="100vw">; teilt Browser früh mit dass Hero-Bild kritisch ist; LCP-Verbesserung typisch 200–500ms; nur für Above-the-fold LCP-Bild (1–2 Bilder maximal)
Lighthouse-Audit: «Properly size images» zeigt wie viel Daten durch Responsive Images gespart werden könnten; «Serve images in next-gen formats» = fehlende WebP/AVIF-Versionen; «Avoid large layout shifts» kann durch fehlendes width/height verursacht sein

Implementierungs-Tools

Automatisierte Bild-Generierung: Sharp (Node.js): Bild in alle benötigten Größen und Formate konvertieren; im Build-Prozess integriert; Astro und Next.js Image-Komponenten: Responsive Images automatisch aus einem Quelltextbild; WordPress: seit 4.4 automatisch srcset für Bilder; Cloudinary/Imgix: CDN mit on-the-fly Resize und Format-Switching per URL-Parameter
CDN-basiertes Responsive-Imaging: Cloudinary: <img src="https://res.cloudinary.com/.../w_auto,f_auto/image.jpg"> – Größe und Format automatisch; kein Build-Step; besonders wertvoll für CMS-Sites ohne Build-Prozess; Kosten bei hohem Traffic; Netlify Image CDN und Vercel Image Optimization integriert

Praxistipp: Beginnen Sie mit drei Maßnahmen: (1) Fügen Sie bei allen <img>-Tags width und height Attribute hinzu um CLS zu eliminieren; (2) Fügen Sie loading="lazy" für alle Bilder below-the-fold hinzu; (3) Erstellen Sie für das LCP-Bild (Hero-Bild) eine WebP-Version und implementieren Sie es mit picture-Element plus srcset (400w, 800w, 1200w). Diese drei Änderungen verbessern typischerweise sowohl LCP als auch CLS messbar. Nutzen Sie Squoosh oder Sharp für einmalige Konvertierungen; für CMS-Sites ohne Build-Prozess ist Cloudinary oder ein WordPress-Image-Plugin (Imagify, ShortPixel) der einfachste Weg zu automatischen Responsive Images.