Für eines meiner größeren Projekte war oder besser gesagt ist es notwendig die Bilder responsiv darzustellen, da die Website sowohl auf Desktop als auch auf mobilen Geräten wie Tablets oder Mobiltelefonen läuft. Da Bilder von Haus aus aber eher starre Objekte auf einer sonst sehr variable darstellbaren Website sind, musste ich mir etwas einfallen lassen.
Die erste Idee war das Bild einfach per CSS so flexibel zu gestalten, dass es sich automatisch an den umgebenden Container anpasst. Eine reine CSS Lösung könnte in etwa so aussehen:
img {
max-width: 500px;
width: 100%;
}
In diesem Beispiel gehen wir einfach von der Desktop Auflösung des Bildes aus. Hier ist das Bild 500 Pixel breit. Also stellt diese Breite die maximale Breite dar. Die Breite von 100% sorgt dafür, dass das Bild sich in der Breite dann dem umgebenden Container anpasst.
Warum ist das keine so gute Idee?
Für die reine Darstellung des Bildes ist die eben genannte CSS Lösung vollkommen ausreichend. Leider spielen da aber noch ein paar andere Aspekte eine große Rolle.
Die Datenmenge bleib gleich. Vollkommen egal wie klein oder groß das Bild mit CSS dargestellt wird. Auf mobilen Endgeräten wie zum Beispiel einem Mobiltelefon ist das mitunter ein echter Killer. Mal wieder schmale Bandbreite und dann große Bilddateien laden. Das macht selten Spaß. Es wäre also sinnvoll, wenn man für kleinere Darstellungen auch kleinere Dateigrößen ausliefert, um somit die Ladezeit der Seite zu optimieren.
Manchmal transportieren Bilder eine Message, eine Bildaussage. Diese wird wahrscheinlich bei zu klein dargestellten Bildern nicht mehr ganz so gut oder gar nicht mehr rüber kommen, wie bei Darstellung in voller Größe. Hier wäre es sinnvoll, wenn man für die jeweilige Auflösung optimierte Bilder ausliefert.
Auf hochauflösenden Displays, wie z.B. Apple ’s Retina Display, können auch hochauflösende Bildinhalte dargestellt. Es wäre also auch hier sinnvoll, andere Bilder auszuliefern, als bei kleineren Auflösungen.
Klingt also nach einer kleinen Herausforderung, hm? Natürlich könnten wir all das auch mit CSS Media Queries und entsprechenden Hintergrundbildern lösen. Aber ist das wirklich schön? Nein, nicht wirklich. Wir brauchen also eine Technik, die die Bildschirmauflösung ermittelt und auf Basis dessen das entsprechende Bild lädt. Wir müssen darüber hinaus dann auch noch mehrere Bildpfaden umgehen, da wir für verschiedene Auflösungen auch verschiedene Bilder bereit halten müssen.
Früher hat man versucht das Problem mittels JavaScript zu lösen, indem man die Bildschirmdimensionen ermittelte und anhand dessen dann die Bildquellen änderte. Problematisch wurde es dann, wenn im Browser kein JavasScript aktiviert war. Moderne Browser bieten hierfür eine native Lössung unter HTML5.
Das srcset Attribut
Unter HTML5 gibt es das srcset Attribut, mit welchem man für verschiedene Bildschirmauflösungen verschiedene Bildquellen angeben kann. Lange Reder kurzer Sinn. Das sieht dann so aus:
In der HTML5.1 Spezifikation wurde das img-Element um das srcset Attribut erweitert. Mit diesem Attribut kann man durch Komma getrennte weitere Bildquellen angeben. Darüber hinaus kann man mit den Einhaiten h und w die Höhe und Breite angeben, für die das Bild geladen werden soll. Diese Einheiten beziehen sich nicht auf die Bilddimensionen! In unserem Beispiel wird das zuerst angegebene Bild also für die Bildschirmauflösung 360×640 Pixel geladen. Das x gibt den Faktor für die Auflösung an. Demnach wird in diesem Beispiel also 360×640 als normale Auflösung angegeben. Bei einer doppelten Auflösen wird einfach das bild3.jpg geladen. Das src-Attribut gilt in diesem Beispiel als Fallback Lösung für Browser, die das srcset-Attribut nicht kennen.
Auf caniuse.com wird diese Lösung mit einer ziemlich breiten Abdeckung unter aktuellen Browsern bestätigt. Es lohnt sich also Bilder im Quelltext so zu notieren. Unklar ist allerdings, ob sich die h und w Angaben auf Mindest- bzw. Maximalwerte beziehen. Wenn einer von Euch hier mehr weiß, kann er gern unten einen Kommentar hinterlassen.
Geht das noch genauer?
Ja, das geht noch genauer. Neben dem srcset-Attribut gibt es unter HTML5 auch das picture Element, welches es uns ebenfalls erlaubt genaue Angaben zu Bildern unter verschiedenen Auflösungen zu notieren. Ein Beispiel hierzu könnte wie folgt aussehen:
Im Grunde genommen notieren wir hier ebenfalls mehrere Bilder mit entsprechender Mindestbreite für die Bildschirmauflösung. Somit laden wir verschiedene Bildquellen für verschiedene Bildschirmauflösungen. Aus meiner Sicht die sehr viel elegantere, übersichtlichere Lösung. Jedes source-Element kann darüber hinaus auch mit srcset Attributen ausgestattet werden. Somit können auch entsprechende hochauflösende Bildschirme mit hochauflösenden Bildern abgedeckt werden, indem man einfach einen Faktor zur Pixeldichte angibt, wie wir es im srcset Beispiel getan haben. Leider wird das picture-Element nicht von allen Browsern unterstützt und somit ist der Einsatz nicht so nah an der Praxis wie das srcset-Attribut. Allerdings gibt es auch hier eine Fallback Lösung, indem einfach das img-Element innerhalb des Picture Blocks notiert wird. Somit kommen auch Browser mit dem Bild klar, die das picture-Element nicht unterstützen.
Fazit
Es kann sowohl das srcset-Attribut allein aus auch die umfassendere picture-Element Variante genutzt werden. Also viel Spaß mit responsiven Bildern! Haben wir wieder was gelernt.
