Responsive Bilder liefern je nach Bildschirmgrösse und Auflösung des Geräts eine passend dimensionierte Bildvariante aus, damit nicht unnötig grosse Dateien geladen werden.Zum Glossareintrag → sorgen dafür, dass ein Browser je nach Bildschirmgrösse, Auflösung und Layout die passende Bildvariante lädt. So erhält ein kleines Smartphone-Display nicht dieselbe riesige Datei wie ein grosser Desktop-Bildschirm. Das spart Datenvolumen und verbessert die PageSpeed bezeichnet die Ladezeit und Reaktionsfähigkeit einer Website. PageSpeed-Optimierung umfasst Massnahmen, die Ladezeit, Reaktionsfähigkeit und visuelle Stabilität verbessern.Zum Glossareintrag →, was besonders dem Largest Contentful Paint (LCP) misst, wann das grösste sichtbare Inhaltselement im sichtbaren Bereich geladen ist, und steht damit für die wahrgenommene Ladegeschwindigkeit.Zum Glossareintrag → auf mobilen Geräten zugutekommt.

Technisch werden responsive Bilder über die Attribute srcset und sizes umgesetzt. Damit beschreibt man mehrere Bildgrössen, aus denen der Browser die passende auswählt:

  • srcset listet verschiedene Bildvarianten mit ihren Breiten auf,
  • sizes beschreibt, wie viel Platz das Bild im Layout einnimmt,
  • zusätzlich sollten width und height gesetzt sein, um Layout-Shifts (Cumulative Layout Shift (CLS) misst, wie stark sich Layout-Elemente während des Ladens unerwartet verschieben, und steht für die visuelle Stabilität einer Seite.Zum Glossareintrag →) zu vermeiden.

Responsive Bilder werden idealerweise mit modernen Formaten wie WebP und AVIF sind moderne, platzsparende Bildformate, die bei vergleichbarer Qualität deutlich kleinere Dateien als JPEG oder PNG ermöglichen und so die Ladezeit verbessern.Zum Glossareintrag → oder AVIF kombiniert. Gerade auf Mobilgeräten mit schwächerer Verbindung ist die richtige Bildgrösse ein wirksamer Performance-Hebel.