Bilder sind ein wesentlicher Bestandteil moderner Websites. Das heißt: Die Optimierung für verschiedene Bildschirmgrößen und Auflösungen ist entscheidend für die Performance und Benutzererfahrung.
Zwei häufig genutzte HTML-Mechanismen zur Optimierung der Bildauslieferung sind das Picture Element und das ‚srcset‘-Attribut. Beide haben Stärken und Schwächen und die richtige Wahl hängt von den spezifischen Anforderungen Ihres Projekts ab. In diesem Artikel zeigen wir anhand praxisnaher Beispiele, wie Sie beide Techniken optimal einsetzen und welche sich für welche Situation am besten eignet.
Das Picture-Element
Mit dem Picture-Element können Sie mehrere Source-Elemente innerhalb des Elements definieren – jeweils mit eigenen Bedingungen wie Bildschirmbreite oder unterstütztem Format. Der Browser prüft diese Bedingungen der Reihe nach und verwendet das erste Bild, das passt.
Die Vorteile des Picture-Elements sind:
Mehr Kontrolle über Bildformate: Es ermöglicht die Angabe verschiedener Bildformate (z. B. WebP, JPEG) für unterschiedliche Browser.
Anpassung an Medienabfragen: Es bietet Flexibilität, Bilder anhand von Medienabfragen gezielt auszutauschen.
Bedingtes Laden von Bildern: Mit dem Picture-Element kann die Bildanzeige an unterschiedliche Bedingungen angepasst werden.
Die Nachteile des Picture-Elements sind:
Komplexere Syntax: Der Code ist umfangreicher und komplexer im Vergleich zur einfachen Verwendung von ‚srcset‘. Dadurch kann man eher noch Fehler einbauen oder Elemente vergessen.
Beschränkt auf Picture-Element: Kann nur innerhalb eines Picture-Elements genutzt werden, was bedeutet, dass die bestehende HTML-Struktur geändert muss, wenn bisher nur ein <img>-Tag verwendet wurde.
Die Verwendung von dem Picture-Element ist vorteilhaft, wenn:
Sie verschiedene Bildformate je nach Browserunterstützung bereitstellen müssen.
Sie eine präzise Kontrolle über die Bildanzeige basierend auf Medienabfragen benötigen.
Sie unterschiedliche Bildinhalte abhängig von der Bildschirmgröße oder Geräteausrichtung anzeigen möchten.
Das Attribut ‚srcset‘
Das ‚srcset‘-Attribut wird direkt im <img>-Tag verwendet. Es ermöglicht die Angabe verschiedener Bildversionen für unterschiedliche Bildschirmauflösungen oder -breiten. Der Browser wählt das am besten geeignete Bild basierend auf der Pixeldichte des Geräts und den angegebenen Bildgrößen aus.
Die Vorteile von ‚srcset‘ sind:
Einfachere Syntax: Das Hinzufügen eines ‚srcset‘-Attributs zu einem <img>-Tag ist unkompliziert und leicht lesbar.
Automatische Auswahl basierend auf der Auflösung: Der Browser wählt das richtige Bild basierend auf der Pixeldichte aus.
Abwärtskompatibilität: Ältere Browser zeigen das Bild mithilfe des ‚src‘-Attributs an.
Die Nachteile von ‚srcset‘ sind:
Weniger Flexibilität bei Bedingungen: ‚srcset‘ unterstützt keine Medienabfragen wie das Picture-Element.
Begrenzte Formatwahl: Im Gegensatz zum Picture-Element kann ‚srcset‘ keine unterschiedlichen Bildformate bereitstellen.
Die Verwendung von ‚srcset‘ ist vorteilhaft, wenn:
Sie nur die Bildauflösung basierend auf der Pixeldichte anpassen müssen.
Der Bildinhalt unverändert bleibt, aber verschiedene Größen des gleichen Bildes angezeigt werden sollen.
Sie eine einfache und schnelle Möglichkeit zur Verbesserung des responsiven Designs suchen.
Wann sollte ich was einsetzen?
Beide Methoden können die Bild-Performance verbessern, wenn sie richtig eingesetzt werden. Die Frage ist also nicht, ob man sie einsetzt, sondern welche Herangehensweise man in welchem Szenario einsetzt.
Bei ‚srcset‘ wählt der Browser automatisch die geeignetste Bildgröße basierend auf den Geräteeigenschaften (Pixeldichte oder Ansichtsfensterbreite), was zu einer optimalen Dateigröße führt. Mit dem Picture-Element hat man mehr Kontrolle über das Laden von Bildern. Wenn die Bedingungen zu breit gefasst sind, könnte ein größeres Bild geladen werden – das kann die Leistung negativ beeinflussen.
‚srcset‘ kann also einen leichten Leistungsvorteil haben, wenn es nur um die Auflösungsumschaltung geht. Das Picture-Element dagegen bietet mehr Flexibilität für komplexe Szenarien, erfordert jedoch eine sorgfältige Implementierung. Der Leistungsunterschied ist allerdings vernachlässigbar, wenn die Bilder korrekt optimiert sind.
Schauen wir uns die zwei Szenarien an:
Szenario 1: Gleiches Bild für alle Breakpoints
Das Bild sieht auf allen Geräten gleich aus, unabhängig von der Bildschirmgröße. Ziel des Kunden: Er möchte Performance-Einbußen vermeiden.
Szenario 2: Unterschiedliche Bilder für Mobil und Desktop
Das Bild variiert je nach Gerät, um die Kundenansprache für Mobil- und Desktop-Nutzer:innen anzupassen. Durch gezielten Bildeinsatz wird die Botschaft kontextgerecht optimiert.
Beispiel: Auf Mobilgeräten soll die Information kurz und prägnant ins Auge springen, während auf Desktop mehr Platz ist, um das Produkt in Szene zu setzen.
Da das Bild bei Szenario 1 auf allen Breakpoints gleich aussehen soll, verwendet man das ‚srcset‘-Attribut. Damit können verschiedene Bildauflösungen basierend auf der Pixeldichte des Geräts bereitgestellt werden, sodass hochauflösende Bildschirme (z. B. Retina-Displays) ein höherwertiges Bild erhalten, während Standard-Displays eine kleinere, optimierte Version laden. Für Nutzer:innen bleibt der Qualitätsunterschied unbemerkt, doch die Performance profitiert erheblich.
Beispielimplementierung:
<img
src="image-800.jpg"
srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"
sizes="(max-width: 600px) 400px, (max-width: 900px) 800px, 1200px"
alt="Responsive Image">
Wird die Website initial auf einer Fenstergröße von 500px geladen, wird das ‚image-800.jpg‘ angezeigt. Ändern Nutzer:innen nun die Bildschirmbreite auf 1000px, wird das Bild ‚image-1200.jpg‘ nachgeladen. Beim erneuten Verkleinern des Bildschirms ändert sich nichts an der Bildauswahl, da mit ‚image-1200.jpg‘ bereits die beste Wahl geladen wurde.
Das Verhalten ist also darauf ausgelegt, die Leistung zu optimieren und unnötige Bildladevorgänge zu vermeiden. Wenn ein größeres Bild bereits geladen ist, gibt es keinen Grund, ein kleineres Bild zu laden. Dies würde nur die Ladezeit und den Netzwerkverkehr erhöhen, ohne die Bildqualität zu verbessern.
Beim Wechsel zu einer höheren Auflösung oder einem höherwertigen Bildschirm möchte der Browser sicherstellen, dass die beste verfügbare Bildqualität angezeigt wird. Daher wird das Bild nachgeladen, wenn ein besser passendes Bild im ‚srcset‘ vorhanden ist.
Wenn für Mobil- und Desktopgeräte unterschiedliche Bilder benötigt werden, wie in Szenario 2 beschrieben, ist das Picture-Element die bessere Wahl. Diese Methode ermöglicht es, verschiedene Bilder je nach Bildschirmbreite bereitzustellen.
Das Picture-Element bietet mehr Kontrolle darüber, welches Bild bei verschiedenen Breakpoints angezeigt wird. Es ermöglicht die Anpassung der Bildinhalte an verschiedene Geräte und erlaubt das bedingte Laden von Bildern basierend auf Medienabfragen.
Beispielimplementierung:
<picture>
<source srcset="uploads/mobil-bild.jpg" media="(max-width: 799px)">
<source srcset="uploads/desktop-bild.jpg" media="(min-width: 800px)">
<img src="uploads/standard-bild.jpg" alt="Kundenkommunikationsbild">
</picture>
In unserem Beispiel werden Geräten mit einer Breite von unter 800px ein spezielles Mobile-Bild angezeigt. Ändern Nutzer:innen nun die Breite auf über 800px, wird es mit dem neuen Desktop-Bild ausgetauscht. Ändern User:innen nun wieder die Bildschirmbreite auf unter 800px, wird das Mobile Bild angezeigt.
Bei dem Picture-Element wird also immer das Bild angezeigt, das wir für die Bedingung definiert haben. Es ist darauf ausgelegt, eine speziellere Form der Kommunikation zu gewährleisten.
Fazit
Das Picture-Element und ‚srcset’ sind beide sehr gute Bildoptimierungsansätze. Das Picture-Element ist ideal, wenn gezielte Kontrolle über die Bilddarstellung und Kommunikation erforderlich ist. Das ‚srcset‘-Attribut eignet sich hingegen, um die Performance zu optimieren, ohne die Bildinhalte zu variieren.
Unsere Expert:innen von diva-e Conclusion helfen Ihnen gern dabei, Ihre Websitedarstellung nachhaltig und für unterschiedliche Devices und Bildschirme zu optimieren.
