Responsive Bilder: srcset, sizes und Art Direction

Warum responsive Bilder wichtig sind

Verschiedene Geräte (Mobil, Tablet, Desktop) haben unterschiedliche Bildschirmgrößen und Auflösungen. Eine einzige Bildgröße ist nicht optimal für alle Geräte.

Große Bilder verschwenden Bandbreite auf Mobilgeräten. Kleine Bilder sehen auf Desktop pixelig aus. Responsive Bilder liefern die richtige Größe für jedes Gerät.

Core Web Vitals: Responsive Bilder verbessern LCP (Largest Contentful Paint) und CLS (Cumulative Layout Shift) Metriken.

srcset Attribut

srcset bietet dem Browser Bildoptionen in verschiedenen Auflösungen. Der Browser wählt das passendste Bild basierend auf DPR (Device Pixel Ratio) und Viewport-Größe des Geräts.

Width Descriptor: <img srcset="small.jpg 400w, medium.jpg 800w, large.jpg 1200w" src="medium.jpg" alt="...">. Die w-Einheit gibt die natürliche Breite des Bildes an.

Density Descriptor: <img srcset="image.jpg 1x, image@2x.jpg 2x" src="image.jpg" alt="...">. Die x-Einheit gibt die Pixeldichte des Geräts an.

Browser-Auswahl: Der Browser wählt das passendste Bild basierend auf Viewport-Größe, DPR und Netzwerkbedingungen. Diese Auswahl ist automatisch und optimiert.

sizes Attribut

sizes gibt an, wie viel Platz das Bild im Viewport einnimmt. Der Browser verwendet sizes zusammen mit srcset, um das passendste Bild auszuwählen.

Beispiel: <img srcset="small.jpg 400w, medium.jpg 800w, large.jpg 1200w" sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw" src="medium.jpg" alt="...">.

Media Conditions: (max-width: 600px) 100vw → Auf Bildschirmen kleiner als 600px nimmt das Bild 100% der Viewport-Breite ein.

Fallback: Der letzte Wert (33vw) ist die Standardgröße. Dieser Wert wird verwendet, wenn keine Media Condition übereinstimmt.

vw (viewport width): 100vw = Viewport-Breite. 50vw = Hälfte der Viewport-Breite.

Art Direction

Art Direction bietet verschiedene Bildkompositionen (Crop, Zoom) bei verschiedenen Bildschirmgrößen. Wird mit <picture> Element gemacht.

Beispiel: <picture><source media="(min-width: 800px)" srcset="desktop.jpg"><source media="(min-width: 400px)" srcset="tablet.jpg"><img src="mobile.jpg" alt="..."></picture>.

Anwendungsfälle: Verschiedene Crops für Hero-Bilder. Vertikales Bild auf Mobil, horizontales auf Desktop. Verschiedene Versionen für Logos und Icons.

Format-Auswahl: Mit <picture> können auch verschiedene Formate angeboten werden: <source type="image/webp" srcset="image.webp"><img src="image.jpg" alt="...">.

Lazy Loading und Async Decoding

loading="lazy": Lädt das Bild nur, wenn es sich dem Viewport nähert. Erhöht Seitengeschwindigkeit und spart Bandbreite.

decoding="async": Trennt Bild-Decode-Prozess vom Hauptthread. Blockiert nicht das Seiten-Rendering.

fetchpriority="high": Hohe Priorität für LCP-Bild. Browser lädt dieses Bild früher.

Placeholder: Zeigen Sie niedrigauflösenden Placeholder mit Blur-up-Technik. Verschwommener Placeholder wird während des Bildladens angezeigt.

Performance-Tipps

Bildformate: Verwenden Sie WebP oder AVIF. 25-50% kleiner als JPEG. JPEG/PNG als Fallback anbieten.

Komprimierung: Bilder komprimieren. TinyPNG, Squoosh oder ImageOptim verwenden. Quality 80-85 ist normalerweise ausreichend.

Dimensionen: Width und Height Attribute zu Bildern hinzufügen. Verhindert CLS (Cumulative Layout Shift).

CDN: Bilder von CDN ausliefern. Image CDNs wie Cloudinary, Imgix führen automatische Resize und Formatkonvertierung durch.

Responsive Images Test: Prüfen Sie in Chrome DevTools Network Tab, welches Bild geladen wird. Auf verschiedenen Viewports testen.