Responsive Images: Das sizes-Attribut richtig nutzen

Bilder sind der größte Performance-Killer vieler Websites. Mit responsive Images laden Sie nur, was der User braucht. Aber srcset allein reicht nicht – Sie brauchen auch sizes.

Das Problem

Ohne responsive Images laden Mobile-User das gleiche 2000px Bild wie Desktop-User. Das Ergebnis:

• Langsamer LCP (Largest Contentful Paint)
• Verschwendete Bandbreite
• Schlechte Core Web Vitals

srcset: Mehrere Größen anbieten

<img
  src="image-800.jpg"
  srcset="
    image-400.jpg 400w,
    image-800.jpg 800w,
    image-1200.jpg 1200w,
    image-1600.jpg 1600w
  "
  alt="Beschreibung"
/>

Problem: Der Browser weiß nicht, wie groß das Bild dargestellt wird. Er rät.

sizes: Dem Browser helfen

<img
  src="image-800.jpg"
  srcset="..."
  sizes="
    (max-width: 640px) 100vw,
    (max-width: 1024px) 50vw,
    33vw
  "
  alt="Beschreibung"
/>

Bedeutung:

• Unter 640px: Bild ist 100% der Viewport-Breite
• Unter 1024px: Bild ist 50% der Viewport-Breite
• Sonst: Bild ist 33% der Viewport-Breite

Art Direction mit picture

Für unterschiedliche Bildausschnitte je nach Gerät:

<picture>
  <!-- Mobile: Quadratischer Ausschnitt -->
  <source
    media="(max-width: 640px)"
    srcset="hero-mobile.jpg"
  />
  <!-- Desktop: Panorama -->
  <source
    srcset="hero-desktop.jpg"
  />
  <img src="hero-fallback.jpg" alt="Hero Image" />
</picture>

LCP-Optimierung

Das Hero-Bild ist oft der LCP-Kandidat. Optimierung:

1. Preload für Hero-Images

<link
  rel="preload"
  as="image"
  href="hero.jpg"
  imagesrcset="hero-400.jpg 400w, hero-800.jpg 800w"
  imagesizes="100vw"
/>

2. Kein Lazy Loading für Above-the-Fold

<!-- Above the fold: Sofort laden -->
<img src="hero.jpg" loading="eager" fetchpriority="high" />

<!-- Below the fold: Lazy loading -->
<img src="content-image.jpg" loading="lazy" />

3. Width und Height setzen

<!-- Verhindert Layout Shift -->
<img
  src="image.jpg"
  width="800"
  height="600"
  style="width: 100%; height: auto;"
/>

Moderne Formate: WebP und AVIF

<picture>
  <source type="image/avif" srcset="image.avif" />
  <source type="image/webp" srcset="image.webp" />
  <img src="image.jpg" alt="Fallback" />
</picture>

Astro Image Optimierung

Astro optimiert Bilder automatisch:

---
import { Image } from 'astro:assets';
import heroImage from '../assets/hero.jpg';
---

<Image
  src={heroImage}
  alt="Hero"
  widths={[400, 800, 1200]}
  sizes="(max-width: 640px) 100vw, 50vw"
/>

Checkliste

1. srcset: Mehrere Größen anbieten
2. sizes: Dem Browser die Darstellungsgröße mitteilen
3. WebP/AVIF: Moderne Formate nutzen
4. Lazy Loading: Für Below-the-fold Bilder
5. Preload: Für Hero/LCP-Bilder
6. Width/Height: CLS vermeiden

Fazit

Responsive Images sind komplexer als src="image.jpg". Aber die Investition lohnt sich:

• Besserer LCP
• Weniger Datenverbrauch
• Bessere Core Web Vitals
• Bessere Rankings

Implementieren Sie es heute – Ihre Mobile-User werden es danken.