Um SRCSET nutzen zu können, müssen bereits beim Upload verschiedenen Versionen einer Bilddatei erzeugt werden. Wenn ein Bild mit srcset eingebunden wird, erhält der Browser die Möglichkeit, das passende Bild zu laden. Dazu kann mit einer Media-Query die Größe des Viewports ermittelt werden. Der Browser kann dann aus der angegebenen Auswahl die am besten passende Bildversion laden.
Da kleineren Geräten kleinere Bilder zugestellt werden, kann dies die Ladegeschwindigkeit erheblich verbessern, außerdem ist nur wenige individuelle Optimierung erforderlich.
srcset und sizes sind Attribute des <img>-Tags in HTML, die zusammen verwendet werden, um responsive Bilder zu liefern, die sich an die unterschiedlichen Anforderungen von Geräten und Bildschirmgrößen anpassen. Diese Attribute tragen dazu bei, die Ladezeiten zu optimieren und die beste Bildqualität für die jeweilige Anzeigeumgebung zu bieten.
srcset-Attribut:
Das srcset-Attribut ermöglicht es, mehrere Bildquellen mit unterschiedlichen Auflösungen und Größen anzugeben. Der Browser wählt dann das geeignetste Bild basierend auf der Bildschirmauflösung und den Geräteeigenschaften des Benutzers aus.
Beispiel:
<img src="image-800w.jpg"
srcset="image-400w.jpg 400w, image-800w.jpg 800w, image-1600w.jpg 1600w"
sizes="(max-width: 600px) 100vw, 50vw"
alt="Beispielbild">
In diesem Beispiel gibt srcset drei verschiedene Bilddateien an:
- image-400w.jpg mit einer Breite von 400 Pixeln
- image-800w.jpg mit einer Breite von 800 Pixeln
- image-1600w.jpg mit einer Breite von 1600 Pixeln
sizes-Attribut:
Das sizes-Attribut definiert, wie viel Platz das Bild im Ansichtsfenster des Browsers einnimmt. Es gibt eine Liste von Bedingungen und Werten an, die der Browser verwendet, um die geeignete Bildquelle aus dem srcset-Attribut auszuwählen.
Beispiel:
sizes="(max-width: 600px) 100vw, 50vw"
In diesem Beispiel bedeutet:
(max-width: 600px) 100vw: Wenn die Ansicht weniger als 600 Pixel breit ist, soll das Bild 100% der Ansichtsfensterbreite (100vw) einnehmen.50vw: In allen anderen Fällen soll das Bild 50% der Ansichtsfensterbreite (50vw) einnehmen.
Vorteile der Verwendung von srcset und sizes:
- Optimierte Ladezeiten: Der Browser lädt nur die Bildgröße, die für das aktuelle Gerät und die Bildschirmauflösung geeignet ist, was die Ladezeiten reduziert und die Bandbreitennutzung optimiert.
- Bessere Bildqualität: Durch die Bereitstellung von Bildern mit unterschiedlichen Auflösungen können hochauflösende Geräte schärfere und detailliertere Bilder anzeigen.
- Responsives Design: Bilder passen sich dynamisch an verschiedene Bildschirmgrößen und Layouts an, was zu einem besseren Benutzererlebnis führt.
Die Attribute srcset und sizes sind wesentliche Werkzeuge für die Implementierung von responsive Bildern in HTML. Sie ermöglichen es Webentwicklern, Bilder effizient an verschiedene Geräteeigenschaften anzupassen, wodurch die Ladezeiten verbessert und die Bildqualität auf allen Geräten optimiert werden.
Wir haben mit dem Modul PCM Image eine leistungsfähiges Bildmodul für Divi entwickelt, das Bilder und Meta-Tags aus unterschiedlichen Quellen dynamisch laden und mithilfe von srcset und sizes resposnsiv ausgeben kann.
