Responsive Images mit DPR und image-set 2025

Retina‑Displays verzeihen kein under‑sampling. Mit DPI‑/DPR‑Strategie liefern wir Qualität ohne Overfetch.

TL;DR

• Für HTML: srcset mit 1x/2x Stufen und präzise sizes
• Für CSS‑Hintergründe: image-set() mit type()/resolution und Fallback
• Auflösung ≠ Abmessung: Breite in sizes korrekt modellieren und 2x‑Assets nur da, wo sichtbar vorteilhaft
• Messen statt raten: echte Geräte/KI‑Upscaling prüfen

Interne Links: Formatvergleich, INP‑freundliche Lieferung, Sprite- & Animationsoptimierung — Sprite Sheet / WebP / APNG 2025

HTML Bild: DPR‑Staffelung

<img
  src="/gallery/card-1x.avif"
  srcset="/gallery/card-1x.avif 1x, /gallery/card-2x.avif 2x"
  sizes="(max-width: 768px) 92vw, 360px"
  width="360" height="240"
  decoding="async" loading="lazy"
  alt="Karte"
  style="aspect-ratio: 3/2; object-fit: cover"
/>

Tipps:

• sizes auf reale Renderbreite abstimmen, sonst wird 2x unnötig groß gewählt
• 3x nur für sehr hochauflösende Assets und wenn Bildinhalt es rechtfertigt

CSS Hintergrund: image-set()

.hero {
  background-image: image-set(
    url('/hero/cover-1x.avif') 1x type('image/avif'),
    url('/hero/cover-2x.avif') 2x type('image/avif'),
    url('/hero/cover-1x.webp') 1x type('image/webp')
  );
  background-size: cover;
  aspect-ratio: 3 / 1;
}

Hinweise:

• Formate angeben (type()), damit der Browser die beste Kette wählt
• Fallback bedenken (WebP/PNG), nicht alle Clients haben AVIF

2x richtig kalkulieren

• Fotomaterial profitiert sichtbar von 2x; UI‑Icons oft vektorisiert (SVG bevorzugen)
• Texturen/feine Muster brauchen höhere Stapelung als flächige Grafiken
• Achtung bei KI‑Upscaling: Artefakte vs. echte Details; vergleiche mit Original

Messen und Validieren

• Netzwerkprofiling: echte Bytes messen, nicht nur nominelle Größen
• Visuelle Diff‑Tools: Unter‑/Über‑Schärfung aufdecken
• UX‑Metriken: LCP/INP/CLS nicht verschlechtern

FAQ

• Q: sizes ist schwer – wie starte ich?

• A: Beginne mit Layoutbreite der Komponente (Container‑Query/Breakpoint) und prüfe im DevTools‑Bild‑Picker, ob die gewünschte Variante gewählt wird.

• Q: Brauche ich Bild‑CDN?

• A: Für dynamische DPR‑Varianten/Formatverhandlung ist ein CDN hilfreich, aber nicht zwingend. Wichtig ist eine klare Asset‑Matrix.

Zusammenfassung

Qualität ohne Overfetch kommt aus sauberem Zusammenspiel von srcset/sizes/image-set() und realer Renderbreite. Schärfe dort, wo Nutzer sie sehen, und spare, wo sie niemand bemerkt.