HTML/Tutorials/Bilder im Internet/responsive Bilder
Text-Info
- 30min
- mittel
- Kenntnisse in
● HTML
● CSS
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.
Mit dem picture-Element, bzw. den srcset- und sizes-Attributen für picture und auch img ist es nun auch möglich, dass auflösungsabhängig mehrere Bildquellen vorgehalten werden und der Browser nur das passende Bild lädt und anzeigt.
Inhaltsverzeichnis
bisherige Ansätze[Bearbeiten]
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, die, obwohl nicht benötigt, trotzdem geladen werden mussten, was bei geringen Übertragungsraten lange dauern konnte.
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:
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.
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.
Details: caniuse.com
<img src="Monumentvalley-1920.jpg"
alt="Panorama Monument Valley - Quelle Wikipedia"
srcset="Monumentvalley-1200.jpg 1x,
Monumentvalley-1920.jpg 2x" >
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.
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.
Details: caniuse.com
<img src="Monumentvalley-1920.jpg"
alt="Panorama Monument Valley - Quelle Wikipedia"
srcset="Monumentvalley-600.jpg 600w,
Monumentvalley-1200.jpg 1200w,
Monumentvalley-1920.jpg 1920w" >
w-Wert mitgeteilt.
So kann der Browser selbst entscheiden, welches der referenzierten Bilder er laden will.
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.
Details: caniuse.com
<img src="bild.jpg"
alt="Alternativtext"
srcset="bild.jpg 800w,
bild-gross.jpg 1920w"
sizes="(min-width: 60em) 50vw,
100vw"
>
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.
<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">
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
25emwird die Grafik in einem 2-spaltigen Layout auf50vwder Breite begrenzt (Die Einheit vw bezieht sich auf die Breite des Viewports). - Bei großen Bildschirmen ab
50emnimmt sie nur noch ein Drittel der Breite ein.
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.
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%;
}
}
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-Elements 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.
Details: caniuse.com
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. Seit der Version 9.1 unterstützt auch der Safari das picture-Element, für ältere Versionen gibt es aber einen Polyfill.
Details: caniuse.com
<picture>
<source srcset="bild1x.jpg 1x, bild2x.jpg 2x, bild4x.jpg 4x">
<!--- Fallback --->
<img src="bild1x.jpg" alt="">
</picture>
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.<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>
- Bei einer Viewport-Breite von mehr als
50emwird 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
30emerscheint eine quadratische Version.
unterschiedliche Bilder für light und dark mode[Bearbeiten]
<picture>
<source srcset="tb-dark.webp" media="(prefers-color-scheme: dark)">
<img src="tb-light.img" alt="">
<picture>
Der Browser überprüft die media query, ob ein dunkles color-scheme (Dark Mode) aktiviert ist, und lädt nur dann das webp-Bild mit dunklem Hintergrund.
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.
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-Bildern 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.
Quellen[Bearbeiten]
- ↑ A list apart: Responsive Webdesign vom 25.05.2010
- ↑ developers.google.com: Bild-Optimierung
- ↑ Daan Jobsis: Retina revolution
Weblinks[Bearbeiten]
- MDN: Responsive Images
- alistapart: Using Responsive Images (Now) (06.10.2015)
- alistapart: Why Responsive Images Matter (04.11.2014)
- Jake Archibald: The anatomy of responsive images (03.09.2015)
- smashingmagazine: Responsive Images Done Right: A Guide To <picture> And srcset (14.05.2014)
- Eric Portis: Srcset and sizes (24.03.2014)
- Responsive Images Community Group
- Matt wilcox: Keeping srcset and sizes under control (31.10.2014)
- Martin Wolf: the new srcset and sizes explained
- Kulturbanause: Responsive Images – <picture>, srcset, sizes & Co.
responsive Bilder in CMS-Systemen[Bearbeiten]
- wordpress/core: Responsive Images in WordPress Core (15.10.2015)
- responsify (Plugin für Word Press)
- xt-adaptive-images (Plugin für Joomla)
Polyfills[Bearbeiten]
- scottjehl/github Picturefill
- Respimage (Alexander Farkas)
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.