Responsive Bildgestaltung 2025 — Praxisleitfaden zu srcset/sizes

Veröffentlicht: 18. Sept. 2025 · Lesezeit: 4 Min. · Von Unified Image Tools Redaktion

translated: true Einführung

„Mehrere Größen bereitstellen“ reicht für Responsive Images nicht aus. Entscheidend ist, sizes am Layout auszurichten, damit der Browser im Auswahlalgorithmus die richtigen Hinweise bekommt. Dieser Text ist ein praxisnaher Leitfaden für den Betrieb.

Zuerst sizes festlegen (Kern)

Das Attribut sizes deklariert: „Unter dieser Bedingung ist die Darstellungsbreite X.“ Ist dies korrekt, wählt der Browser den optimalen Kandidaten aus dem srcset.

// Einspaltiges Artikellayout (max. 768px)
// ≤768px: 100vw, darüber: fix 768px
sizes="(max-width: 768px) 100vw, 768px"

// Karten 2→3 Spalten (effektiv ca. 46vw/31vw inkl. Gaps)
sizes="(max-width: 640px) 100vw, (max-width: 1024px) 46vw, 31vw"

Repräsentative Breiten in 1,5–2×-Schritten sind gut handhabbar. Beispiel: 480/720/960/1280/1536.

Build zur Unterstützung von srcset

Automatisiere die Erzeugung von srcset und eliminiere menschliche Fehler. Beispiel mit Sharp:

import sharp from 'sharp'
const WIDTHS = [480, 720, 960, 1280, 1536]
async function buildSet(input: string, base: string) {
  for (const w of WIDTHS) {
    await sharp(input).resize({ width: w, withoutEnlargement: true })
      .webp({ quality: 78 })
      .toFile(`${base}-${w}.webp`)
  }
}

Mit Next.js Image genügt es, sizes korrekt zu schreiben; die Ausspielung erfolgt automatisch. Details: Resize‑Workflows 2025 — Vom Layout rückwärts 30–70 % Verschwendung streichen.

LCP und Preload

Für LCP-Kandidaten wie Hero-Bilder berücksichtige zusätzlich zu einem passenden sizes:

• priority / fetchPriority="high"
• Preload: <link rel="preload" as="image" imagesrcset="..." imagesizes="...">
• Überhöhte Auflösung vermeiden (Regel „Maximalbreite × DPR“ strikt einhalten)

Die Grundlagen der Kompression findest du hier: Ultimative Bildkompressions-Strategie 2025 – Praxisleitfaden zur Qualitätswahrung bei maximaler Performance.

Art Direction mit picture

Wenn sich Seitenverhältnis oder Bildausschnitt je Größe unterscheiden soll, nutze picture:

<picture>
  <source media="(min-width: 1024px)" srcset="/hero-wide-1280.webp 1280w, /hero-wide-960.webp 960w" sizes="(min-width:1024px) 960px">
  <source media="(max-width: 1023px)" srcset="/hero-tall-720.webp 720w, /hero-tall-480.webp 480w" sizes="(max-width:1023px) 92vw">
  <img src="/hero-tall-720.webp" alt="...">
</picture>

Hinweis: Auch mit picture bleibt die sizes-Denke gleich. Erkläre je Media-Bedingung die Darstellungsbreite in px oder vw.

Icons und SVG

• Für einfache Logos/Icons bevorzugt SVG. CSS-Farben und Media-Query-Anpassungen sind flexibel möglich.
• Falls PNG nötig ist, gib für kleine Größen 1x/2x an und teile das srcset – das verbessert die Auslieferungseffizienz.

<img src="/icons/icon-32.png" srcset="/icons/icon-32.png 1x, /icons/icon-64.png 2x" width="32" height="32" alt="">

Für PWA-Icons und Manifest siehe Favicon + Manifest Paket und Favicon-Generator.

Häufige Fehler

• sizes pauschal auf 100vw setzen → in Kartenrastern ist es real 33vw, was zu Überlast führt
• Änderungen an Breakpoints/Spaltenzahl nicht nachziehen → nach Designupdates plötzlich zu schwer
• Zu viele feine Breitenstufen → Cache-Effizienz sinkt, Nutzen verpufft

Checkliste (Betrieb)

• [ ] Maximale Darstellungsbreite und DPR je Template definiert?
• [ ] Passt sizes zum Layout (Storybook/Browser gemessen)?
• [ ] Für LCP-Bilder priority etc. gesetzt?
• [ ] Reichen 3–5 repräsentative Breiten?
• [ ] Ist picture wirklich nötig (erst mit sizes lösen)?

Zum Abschluss: Die Gesamtoptimierung der Resize-Gestaltung steht hier: Resize‑Workflows 2025 — Vom Layout rückwärts 30–70 % Verschwendung streichen. Die Formatwahl hier: Strategien zur Formatkonvertierung 2025 — Leitfaden für WebP/AVIF/JPEG/PNG.

Diagnose und Debugging

• In DevTools/Network reale Bildabmessungen/Transfer prüfen (entspricht es dem Plan?).
• In Elements computed size und currentSrc des img checken (wirkt sizes?).
• DPR auf Mobile/Desktop variieren und erneut prüfen (Überbezug bei 2x/3x erkennen).
• LCP-Kandidaten im Performance-Panel identifizieren und Preload-Profiling durchführen.

Anwendungsmuster (Komponenten)

• Spaltenzahl von Grid-Karten per Props entgegennehmen und sizes automatisch generieren.
• picture + media für Art Direction, synchron mit den CSS-Breakpoints an einer Stelle.
• loading="lazy" mit optimalem Viewport-Intersection-Timing kombinieren, um CLS = 0 zu halten.

Hands-on: Bestandsseite inventarisieren

1. Maximale Breiten (Body, Sidebar, Kartenraster) ermitteln
2. Pro Bild Obergrenze in Pixeln und 3–5 repräsentative Breiten definieren
3. LCP-Kandidaten priorisiert umsetzen (inkl. preload/priority)
4. Transfer und LCP messen und die sizes-Bedingungen feinjustieren

FAQ

• F: Wie fein sollte ich sizes schreiben?
  • A: Auf die Grenzen beschränken, an denen sich die reale Breite ändert (Breakpoints). 2–4 Bedingungen sind meist gut wartbar.
• F: picture oder sizes priorisieren?
  • A: Zuerst prüfen, ob sizes ausreicht. picture nur für echte Art Direction nutzen.
• F: Was ist bei Next.js <Image> wichtig?
  • A: sizes korrekt deklarieren und ggf. priority/fetchPriority setzen. srcset wird automatisch erzeugt.