Responsives Bild
Eine Bildimplementierung, die je nach Gerät, Bildschirmgröße und Verbindungsgeschwindigkeit des Betrachters unterschiedliche Größen oder Formate bereitstellt.
Responsive Bilder verhindern, dass mobile Benutzer Bilder in Desktop-Größe herunterladen, was Bandbreite verschwendet und das Laden von Seiten verlangsamt. HTML bietet das srcset-Attribut zum Umschalten der Auflösung und das Bildelement für die Art Direction – so werden unterschiedliche Zuschnitte oder Formate für verschiedene Geräte bereitgestellt. Moderne Frameworks wie Next.js automatisieren die reaktionsfähige Bildgenerierung, indem sie mehrere Größen aus einer einzigen Quelle erstellen und die optimale Version basierend auf dem Ansichtsfenster bereitstellen. WebP und AVIF fAVIFts mit JPEG-FallbacJPEGr reduzieren die Bandbreite. Responsive Bilder sind für die Leistung von Core Web Vitals von entscheidender Bedeutung – ein übergroßes Bild verzögert Largest Contentful Paint, die primäre Messgröße für die Ladeleistung, die sich sowohl auf das Benutzererlebnis als auch auf das Suchmaschinenranking auswirkt.