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.
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 , was besonders dem 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 () zu vermeiden.
Responsive Bilder werden idealerweise mit modernen Formaten wie oder AVIF kombiniert. Gerade auf Mobilgeräten mit schwächerer Verbindung ist die richtige Bildgrösse ein wirksamer Performance-Hebel.