HTML/Tutorials/Bilder im Internet/responsive Bilder mit picture

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Text-Info

Lesedauer
30min
Schwierigkeitsgrad
mittel
Vorausgesetztes Wissen
Kenntnisse in
● HTML
● Bilder mit img


Das picture-Element ist wie z. B. video ein Container-Element, mit dem über die srcset- und sizes-Attribute mehrere Bildquellen vorgehalten werden und der Browser nur das passende Bild lädt und anzeigt.

Dabei wählt der Browser selbständig anhand von Medienmerkmalen wie den Geräteeigenschaften (Abmessungen, Auflösungen oder Seitenverhältnissen) oder den Benutzereinstellungen (Dark Mode, hoher Kontrast, weniger Animationen) das passende Bild aus.

bisherige Ansätze[Bearbeiten]

Ethan Marcotte stellte Responsive Webdesign ursprünglich als fluid grids, flexible images, and media queries vor[1]. Bei Grafiken, die Teil des Inhalts sind, beschränkte sich diese Flexibilität auf prozentuale Breitenangaben. Immer größere Monitore erforderten größere Bilder, die von mobilen Geräten trotz ihres geringeren Viewports genauso geladen werden mussten. Dabei haben gerade mobile Geräte niedrige Datenübertragungsraten oder sogar noch Volumensbegrenzungen. Hier müssen Webdesigner eine Balance finden zwischen dem optimalen Bild in HD-Qualität und einer benutzerfreundlichen Seite, die ihre Inhalte schnell und unkompliziert zur Verfügung stellt.

prozentuale Breitenangaben[Bearbeiten]

Bisher konnten Sie die Größe des img-Elements mithilfe von CSS an die Größe des Viewports anpassen. Allerdings wurden die hochauflösenden Bilder auch für mobile Geräte eingebunden und, obwohl nicht benötigt, trotzdem geladen, was bei geringen Übertragungsraten lange dauern konnte.

prozentuale Breitenangaben ansehen …
header { height: 150px; background: url(Monumentvalley-1920.jpg) center; background-size: 100%; margin: 10px 0; } @media all and (max-width: 45em) { header { height: 120px; } } @media all and (max-width: 30em) { header { height: 90px; } } article .panorama { width: 100%; }
ansehen …

In diesem Beispiel sind sowohl das Hintergrundbild im header als auch das untere Panoramabild im Inhaltsteil responsiv, d. h. sie erstrecken sich über die gesamte Breite des je nach Viewport verfügbaren Platzes.

Allerdings wird auch bei schmalen Viewports das großformatige Bild geladen, was zu längeren Ladezeiten führen kann. Dies ist insbesondere für mobile Geräte von Bedeutung, da auch noch ein Bild übertragen wird, was in dieser hohen Auflösung gar nicht benötigt wird.

Hintergrundbilder und media queries[Bearbeiten]

Bei Hintergrundbildern könnte man durch media queries mehrere Versionen einer Grafik referenzieren, von denen dann die passende geladen würde:

Einbinden mehrerer Bildquellen mit media queries
header { background: url(Monumentvalley-600.jpg) center; } @media all and (min-width: 30em) { header { background: url(Monumentvalley-1200.jpg) center; } } @media all and (min-width: 60em) { header { background: url(Monumentvalley-1920.jpg) center; } }

Sie sollten sich nicht nur darauf beschränken, dasselbe Motiv in verschiedenen Größen auszuliefern, was Übertragungsvolumen und Übertragungszeit spart, sondern für kleinere Ausgabemedien ggf. auch einen anderen Bildausschnitt liefern.

Anwendungsbeispiele[Bearbeiten]

hochauflösende Versionen mit srcset[Bearbeiten]

Früher galt die Grundregel, dass Bilder in ihren Abmessungen genauso viele Pixel wie der auf der Seite dafür vorgesehene Platz haben sollten. Durch das Aufkommen von Retina-Displays, 4K-Monitoren und Ultra-HD haben sich Pixel weg von physischen Pixel hin zu einer relativen Maßeinheit entwickelt.

Herkömmliche Bilder sehen auf solchen Monitoren mit einer höheren Pixeldichte oft verpixelt aus.

Empfehlung: Verwenden Sie große Bilder.
Auf Bildschirmen mit einer hohen Pixeldichte sehen Grafiken besser aus, wenn Sie größere Abmessungen haben. Damit die Dateigröße nicht ins Unermessliche steigt, ist es möglich und völlig unproblematisch, die Kompression eines .jpgs auf 25% zu reduzieren.[2][3]


Mittels des srcset-Attribut können Sie dem Browser mehrere Versionen Ihrer Grafik zur Verfügung stellen.

  • Chrome
  • Firefox
  • Edge
  • Opera
  • Safari

Details: caniuse.com

hochauflösende Versionen ansehen …
<img src="Monumentvalley-1920.jpg"
     alt="Panorama Monument Valley - Quelle Wikipedia"
     srcset="Monumentvalley-1200.jpg 1x, 
             Monumentvalley-1920.jpg  2x" >
ansehen …

Für das Panoramabild werden im srcset-Attribut zwei verschiedene Versionen zur Verfügung gestellt:

Da der Browser die referenzierten Grafiken nur im Bedarfsfall laden soll, wird mit dem dazugehörigen x-Wert übermittelt, welches Bild für hochauflösende Bildschirme verwendet werden soll. Der Browser kann dann selbst entscheiden, welche Bilder geladen werden sollen.

Falls der Browser das srcset-Attribut noch nicht kennt, wird es ignoriert und stattdessen die im herkömmlichen src-Attribut referenzierte Bildquelle geladen.

Alle Bilder teilen sich ein alt-Attribut, mit dem die Zugänglichkeit gewahrt wird

Resolution Switching mit srcset[Bearbeiten]

Seinen wahren Nutzen erreicht das srcset-Attribut aber, wenn dem Browser mehrere Grafikversionen für verschiedene Auflösungen vom kleinen Mobilgerät bis zum übergroßen 4k-Monitore zur Verfügung gestellt werden und mit dem dazugehörigen w-Wert die Breite der Bilder übermittelt wird.

Der Browser kann dann selbst entscheiden, welches der referenzierten Bilder am Besten zur vorhandenen Bildschirm-Auflösung (screen resolution) passt und geladen werden soll. Die Pixeldichte wird automatisch berücksichtigt; Retina-Displays entscheiden sich entsprechend für größere Bilder.

  • Chrome
  • Firefox
  • Edge
  • Opera
  • Safari

Details: caniuse.com

Resolution Switching ansehen …
<img src="Monumentvalley-1920.jpg"
     alt="Panorama Monument Valley - Quelle Wikipedia"
     srcset="Monumentvalley-600.jpg 600w, 
             Monumentvalley-1200.jpg 1200w, 
             Monumentvalley-1920.jpg 1920w" >
ansehen …

Für das Panoramabild werden drei verschiedene Versionen zur Verfügung gestellt. Die Breiten der einzelnen Versionen werden dem Browser über den w-Wert mitgeteilt.

So kann der Browser selbst entscheiden, welches der referenzierten Bilder er laden will.

Beachten Sie, dass bei einer Änderung des Viewports die Grafik nicht neu geladen wird. Sie müssen dazu die Seite neu laden. Was wie ein Nachteil klingt, ist bei mobilen Geräten, die evtl. nur über eine leistungsschwache Datenverbindung verfügen, jedoch ein Vorteil, da nicht bei jeder auch unbeabsichtigten Bewegung grafische Inhalte nachgeladen werden, und so der traffic nicht übermäßig belastet wird.
Eine Drehung des Bildschirms z.B. bei einem Tablet benötigt diese Vorgehensweise mit dem picture-Element.

Gestaltung mit sizes[Bearbeiten]

Das sizes-Attribut kann in Verbindung mit srcset nicht nur auflösungsabhängig verschiedene Grafiken laden, sondern diese nach Medienmerkmalen (media condition) auch unterschiedlich anzeigen.

  • Chrome
  • Firefox
  • Edge
  • Opera
  • Safari

Details: caniuse.com

Gestaltung mit sizes 
<img src="bild.jpg"
     alt="Alternativtext"
     srcset="bild.jpg 800w, 
             bild-gross.jpg 1920w" 
     sizes="(min-width: 60em) 50vw, 
            100vw"
>

Wenn das Browser-Fenster breiter als 60em ist, wird dieses Bild wahrscheinlich in der halben Breite dargestellt; bei kleineren Viewports aber über die gesamte verfügbare Breite.


In der praktischen Umsetzung ergeben sich einige Probleme, die im folgenden Beispiel erklärt werden.

responsive Gestaltung mit sizes ansehen …
      <img src="Antelope-1-klein.jpg"
           alt="Lower Antelope Canyon - Quelle Wikipedia"
           srcset="Antelope-1-klein.jpg 600w, 
                   Antelope-1-mittel.jpg 1200w, 
                   Antelope-1-gross.jpg 1920w"
           sizes="(min-width: 35em) 50vw,
                  (min-width: 50em) 33vw,
                  100vw"> 
      <img src="Antelope-2-klein.jpg"
           alt="Lower Antelope Canyon - Quelle Wikipedia"
           srcset="Antelope-2-klein.jpg 600w, 
                   Antelope-2-mittel.jpg 1200w, 
                   Antelope-2-gross.jpg 1920w"
           sizes="(min-width: 35em) 50vw,
                  (min-width: 50em) 33vw,
                  100vw">
ansehen …

Für das Panoramabild werden drei verschiedene Versionen zur Verfügung gestellt. Die Breiten der einzelnen Versionen werden dem Browser über den w-Wert mitgeteilt.

Zusätzlich wird nun mit dem sizes-Attribut die je nach Medien-Merkmal unterschiedliche Breite angegeben.

  • Auf schmalen Bildschirmen nimmt die Grafik die gesamte Breite ein.
  • Ab einer Viewport-Breite von 25em wird die Grafik in einem 2-spaltigen Layout auf 50vw der Breite begrenzt (Die Einheit vw bezieht sich auf die Breite des Viewports).
  • Bei großen Bildschirmen ab 50em nimmt sie nur noch ein Drittel der Breite ein.
Beachten Sie: Anders als vielleicht erwartet, regelt das sizes-Attribut nicht die Größe der Darstellung, sondern hilft dem Browser zu entscheiden, welche Versionen er laden soll.
Die Größe der Darstellung wird über media queries geregelt.
Gestaltung mit sizes ansehen …
article img {
  width: 100%;
}	

@media all and (min-width: 35em) {
  article img {
    width: 49%;
  }	  
} 

@media all and (min-width: 50em) {
  article img {
    width: 32.5%;
  }	  
}
ansehen …

Nach dem Grundsatz mobile first! erhalten Bilder die volle Breite der article-Elements.
Wenn der Viewport breiter als 35em ist, nimmt das Bild die Hälfte, bei einer Breite von mehr als 50em ein Drittel des Viewports ein.


picture[Bearbeiten]

Das picture-Element ist ein Container, mit dem Sie mehrere Bildquellen referenzieren können. Dadurch können Sie mehrere Bildversionen für verschiedene Pixeldichten, Auflösungen und Bildschirmformate zur Verfügung stellen, aus denen der Browser dann die passende Grafik auswählt und lädt.

  • HTML5
  • Chrome
  • Firefox
  • Edge
  • Opera
  • Safari

Details: caniuse.com

Beachten Sie: Das picture-Element selbst ist nur ein Container für das darin enthaltene img-Element und eventuelle vorhandene source-Elemente.

Art Direction[Bearbeiten]

Panoramabilder von weiträumigen Landschaften und Gebirgsketten entfalten ihre volle Wirkung nur bei großen Abmessungen. Auf kleineren Bildschirmen lässt eine skalierte Miniansicht aber nur wenig Einzelheiten erkennen. Ein einzelner Gipfel sieht hier besser aus.

Diese Veränderung des Seitenverhältnisses oder Bildausschnitts, in der Fachliteratur art direction genannt, erfordert das Anlegen verschiedener Bilder und eine sofortige Anpassung bei einer Veränderung der Auflösung.

Mit dem picture-Element können Sie mehrere Bilder für verschiedene Viewports referenzieren.

  • HTML5
  • Chrome
  • Firefox
  • Edge
  • Opera
  • Safari

Details: caniuse.com

Art Direction 
<picture>
    <source srcset="bild1x.jpg 1x, bild2x.jpg 2x, bild4x.jpg 4x">
    <!--- Fallback --->
    <img  src="bild1x.jpg" alt="">
</picture>

Das picture-Element ist ein Container für ein img-Element als Fallback und eins oder mehrere source-Elemente, die mit dem srcset-Attribut ein oder mehrere Bilder referenzieren können.
Hier werden je nach Pixeldichte über den x-Wert Bilder vorgeschlagen.

Art Direction ansehen …
<picture>
  <source media="(min-width: 50em)" 
          srcset="TotemPole-2000.jpg">
  <source media="(min-width: 30em)" 
          srcset="TotemPole-1200.jpg">
  <source srcset="TotemPole-600.jpg">
  <img src="TotemPole-2000.jpg" alt="Monument Valley - Totem Pole">
</picture>
ansehen …

Die vorhandene Grafik wird in drei Versionen mit jeweils unterschiedlichen Seitenverhältnissen abgespeichert.

  • Bei einer Viewport-Breite von mehr als 50em wird die Panorama-Version (Verhältnis 2:5) geladen.
  • Sobald der Viewport kleiner wird, erscheint eine schmalere Version ( Verhältnis von 2:4).
  • Bei kleinen Viewports unterhalb von 30em erscheint eine quadratische Version.

Siehe auch

Benutzereinstellungen[Bearbeiten]

light und dark mode[Bearbeiten]

Mit prefers-color-scheme wird abgefragt, ob der Nutzer in den Benutzereinstellungen im Betriebssystem einen dunkles color-scheme (Dark Mode) aktiviert ist, und lädt nur dann das webp-Bild mit dunklem Hintergrund.

unterschiedliche Bilder für light und dark mode 
<picture>
  <source srcset="tb-dark.webp" media="(prefers-color-scheme: dark)">
  <img src="tb-light.jpg" alt="">
<picture>

WebP („weppy“) ist ein Datenformat für verlustbehaftet oder verlustfrei komprimierte statische oder animierte Bilder. WebP erreicht bei sehr hoher Komprimierung mehr Bildqualität pro Datenmenge als JPEG.

Animation oder Standbild[Bearbeiten]

Ähnlich verhält sich prefers-reduced-motion. Hier wird abgefragt, ob ein Nutzer weniger Bewegung und Animationen wünscht. Während das manche nur nervt, kann es für andere zu Übelkeit und Kopfschmerzen führen.

Wenn in den Benutzereinstellungen im Betriebssystem prefers-reduced-motion mit dem Wert reduceaktiviert ist, lädt der Browser nur dann das statische Bild.

Video, animated Gif oder Standbild, je nach Benutzerwunsch 
<picture>
  <source srcset="static.webp" media="(prefers-reduced-motion: reduce)">
  <source srcset="animated.mp4" type="video/mp4">
  <img srcset="animated.gif" alt="animated image">
</picture>

Fazit[Bearbeiten]

Die Browser-Unterstützung für die srcset- und sizes-Attribute ist so gut, dass Sie sie problemlos einsetzen können; ältere Versionen des Internet Explorers erhalten einfach die im src-Attribut referenzierte Standardversion.

Bei normalen Bildern werden sich mehrere Versionen einer Grafik nicht lohnen, bei großflächigen Panorama- und Hero-Images dagegen schon. Hierfür eignet sich das img-Element in Verbindung mit srcset, um mehrere optimierte Versionen anbieten zu können.

Für Art Direction empfiehlt sich das picture-Element.

Eine Einbindung mehrerer Bildquellen in Content Management Systeme ist nicht trivial, mittlerweile gibt es aber Plugins für die gängigsten Systeme.


← Einbindung mit img
Bilder im Internet
(Übersicht)
Bilder mit CSS formatieren →

Quellen[Bearbeiten]

  1. ↑ A list apart: Responsive Webdesign vom 25.05.2010
  2. ↑ developers.google.com: Bild-Optimierung
  3. ↑ Daan Jobsis: Retina revolution

Weblinks[Bearbeiten]


responsive Bilder in CMS-Systemen

Abgerufen von „http://wiki.selfhtml.org/index.php?title=HTML/Tutorials/Bilder_im_Internet/responsive_Bilder_mit_picture&oldid=81185“