Responsive Images sind Bilder, die sich in Groesse, Aufloesung und Format automatisch an das Endgeraet und den verfuegbaren Platz anpassen. Statt ein einziges Bild fuer alle Bildschirmgroessen auszuliefern, stellen Responsive Images mehrere optimierte Varianten bereit, aus denen der Browser die bestmoegliche waehlt.
Responsive Images sind ein zentraler Baustein fuer Responsive Design und haben direkten Einfluss auf die Page Speed und Core Web Vitals. Ein 2-MB-Desktop-Bild auf einem Smartphone zu laden ist eine der haeufigsten Ursachen fuer schlechte Largest Contentful Paint-Werte.
Technische Umsetzung
Das srcset-Attribut
Das srcset-Attribut stellt dem Browser mehrere Bildgroessen zur Verfuegung:
<img
src="bild-800.jpg"
srcset="bild-400.jpg 400w, bild-800.jpg 800w, bild-1200.jpg 1200w, bild-1600.jpg 1600w"
sizes="(max-width: 735px) 100vw, (max-width: 1068px) 50vw, 33vw"
alt="Beschreibung des Bildes"
width="1600"
height="900"
>
Das sizes-Attribut
Das sizes-Attribut teilt dem Browser mit, wie breit das Bild im Layout dargestellt wird. Ohne diese Information kann der Browser die optimale Bildgroesse nicht berechnen:
| Media Query | Wert | Bedeutung |
|---|---|---|
(max-width: 735px) | 100vw | Mobile: Bild nutzt volle Breite |
(max-width: 1068px) | 50vw | Tablet: Bild nutzt halbe Breite |
| Default | 33vw | Desktop: Bild nutzt ein Drittel |
Das picture-Element
Das <picture>-Element bietet zwei Vorteile gegenueber srcset: Art Direction (verschiedene Bildausschnitte fuer verschiedene Geraete) und Format-Fallbacks:
<picture>
<source type="image/avif" srcset="bild.avif">
<source type="image/webp" srcset="bild.webp">
<img src="bild.jpg" alt="Beschreibung">
</picture>
Pixeldichte und Retina-Displays
Moderne Geraete haben Bildschirme mit 2x oder 3x Pixeldichte. Ein 375px breites iPhone zeigt Bilder mit 750 physischen Pixeln an. Fuer scharfe Darstellung muss das Bild mindestens in doppelter Darstellungsgroesse vorliegen.
Die Faustregel: Liefern Sie Bilder in der doppelten Darstellungsgroesse als Maximum. 3x-Bilder sind selten noetig, da der visuelle Unterschied zu 2x minimal ist, die Dateisgroesse aber erheblich steigt.
Responsive Images in Next.js
Die next/image-Komponente von Next.js implementiert Responsive Images automatisch:
- Generiert verschiedene Bildgroessen beim Build
- Waehlt das optimale Format (WebP, AVIF)
- Setzt
srcsetundsizesautomatisch - Implementiert Lazy Loading als Standard
- Erzwingt
widthundheightgegen Layout Shift
Fuer die meisten Projekte ist next/image die einfachste und zuverlaessigste Loesung fuer Responsive Images.
Best Practices
Breakpoints definieren
Orientieren Sie sich an Ihren Layout-Breakpoints, nicht an Geraete-Auflloesungen:
| Breakpoint | Bildgroesse | Verwendung |
|---|---|---|
| Mobile (< 735px) | 400-750px | Full-Width-Bilder |
| Tablet (735-1068px) | 750-1100px | Halbe oder volle Breite |
| Desktop (> 1068px) | 1100-1920px | Content-Breite oder Full-Bleed |
Art Direction fuer Hero-Bilder
Hero-Bilder benoetigen oft verschiedene Ausschnitte fuer verschiedene Geraete. Ein breites Landschaftsbild auf Desktop kann auf Mobile ein engerer Portraitausschnitt werden -- das <picture>-Element macht das moeglich.
LCP-Bild priorisieren
Das LCP-Bild (meist das Hero-Bild) darf nicht lazy geladen werden. Setzen Sie priority in Next.js oder fetchpriority="high" und loading="eager" in nativem HTML. Kombinieren Sie das mit einem Preload-Hint im <head> fuer maximale Ladegeschwindigkeit.
Feste Dimensionen setzen
Definieren Sie immer width und height im HTML. Der Browser reserviert den Platz vor dem Laden und vermeidet Cumulative Layout Shift. In CSS sorgt aspect-ratio oder height: auto dafuer, dass das Bild trotzdem responsiv skaliert.