Responsives Bild
Eine Bildimplementierung, die je nach Gerät, Bildschirmgröße und Verbindungsgeschwindigkeit verschiedene Größen oder Formate ausliefert.
Responsive Bilder verhindern, dass mobile Nutzer Desktop-Bilder herunterladen, die Bandbreite verschwenden und Seiten verlangsamen. HTML bietet das srcset-Attribut für den Auflösungswechsel und das picture-Element für Art Direction, damit unterschiedliche Zuschnitte oder Formate an verschiedene Geräte ausgeliefert werden können. Moderne Frameworks wie Next.js automatisieren die responsive Bildgenerierung, erzeugen mehrere Größen aus einer Quelle und liefern die optimale Version anhand des Viewports. WebP- und AVIF-Formate mit JPEG-Fallback reduzieren die Bandbreite zusätzlich. Responsive Bilder sind wichtig für Core Web Vitals: Ein übergroßes Bild verzögert den Largest Contentful Paint, die zentrale Ladeleistungsmetrik, die Nutzererlebnis und Suchmaschinenrankings beeinflusst.