Heutzutage sehen wir uns Inhalte im Web auf verschiedenen Geräten in verschiedenen Größen, Auflösungen und Pixeldichten an. Responsive Webentwicklung ist mittlerweile sogar Pflicht, wenn man bei Google ganz weit oben stehen möchte. Viele Webseiten sind bereits responsive, aber oft wird hier essentielles vergessen, nämlich die Bilder. Mit dem <img>-Element binden wir normalerweise einzelne Bilder ein. Für ein iPhone benötige ich aber zum Beispiel ein Bild mit doppelter Auflösung im Vergleich zu einem normalen Screen. Wenn ich jetzt aber ein Gerät mit einem normalen Screen habe und ein eigentlich nicht benötigtes hochauflösenden Bild einbinde, wirkt sich das auf die Downloadgeschwindigkeit und somit auch auf den Google Page Speed Index aus. Eine andere Möglichkeit wäre es, die verschiedenen Bilder über Backgroundimages einzubinden und diese mit mediaqueries je nach Displaygröße anzuzeigen.

Dies ist wiederum aus SEO und Accessibility Gründen nicht vorteilhaft, da Bilder, welche den Inhalt bilden, auch wirklich als Inhalt, also mittels <img>-Element, eingebunden werden sollen um auch einen alt-tag definieren zu können. Für wirkliche Backgroundimages ist dies natürlich die perfekte Variante. Eine weitere Variante wäre die Einbindung mittels JavaScript. Dies ist in manchen Fällen auch notwendig, sollte aber so gut wie möglich vermieden werden da Javascript fehleranfälliger ist als HTML. Um die folgenden zukunftsorientierten Varianten für so gut wie alle Browser zu Verfügung stellen zu können, benötigen wir trotzdem die Hilfe von JavaScript in Form eines sogenannten Polifills. Wir verwenden hierfür Picturefill, um alle Browser, welche die Spezifikation nicht von Haus aus können, zu unterstützen. Picturefill könnt ihr ganz einfach unter dem Link herunterladen und mittels <script>-Tag einbinden. Entweder ihr bindet es vor dem schließenden body tag ein oder im head tag. Im head tag ist es sinnvoll, das async attribut zu verwenden, welches dem Browser sagt, dass dieses File asynchron geladen werden soll, um den restlichen Seitenaufbau nicht zu stören. Wichtig bei dem async attribut ist, dass kein anderes File von diesem abhängig ist, da sonst Probleme auftreten. Hier findet ihr, welche Browser async unterstützen.

 

Images mit srcset und sizes

 

Zunächst sehen wir uns die HTML5 Erweiterung des <img>-Elements an. Mit dem srcset-Attribut alleine können wir zwei Sachen bestimmen. Entweder wir übergeben den Parameter für die Pixeldichte wie im Codebeispiel 1 oder wir übergeben den Parameter für die Breite des Bilder wie im Codebeispiel 2.

<img srcset=“photo-@2x.jpg 2x, photo-@1x.jpg 1x“ src=“photo1-@1x.jpg“ alt=“Alternative Text“ />

Unser src-attribut gilt hier immer als Fallback wenn die Browser srcset nicht verstehen und unser polyfill nicht funktioniert. Im srcset übergeben wir die eigentlichen Bilder. Den Wert für normale Pixeldichte, also 1x, könnte man theoretisch weglassen, da dies der Defaultwert ist. Mit 2x sagen wir, dass dieses Bild die doppelte Pixeldichte besitzt. Der Browser entscheidet nun also von alleine, welches Bild ausgeliefert werden soll. Sinnvollerweise benennen wir unsere Bilder auch mit -@1x oder -@2x.

<img srcset=“photo-larger.jpg 1400w, photo-medium.jpg 700w, photo-small.jpg 400w“ src=“photo-medium.jpg“ alt=“Alternative Text“ />

Bei dieser Variante geben wir dem Browser eine größere Entscheidungsfreiheit. Nach dem Bild schreiben wir zusätzlich die wirkliche Breite des Bildes (zb. aus Photoshop) an. Der Browser entscheidet somit wieder für sich, wann er welches Bild nimmt. Natürlich hat man hier nicht die genaue Kontrolle und muss den Browserherstellern vertrauen, dass das optimale Bild verwendet wird. Beim Testen mit dem Google Chrome Browser müsst ihr jedoch beachten, dass ihr in den Dev Tools unter dem Reiter Network das Caching deaktiviert. Google Chrome nimmt als einziger Browser immer das Größte gecachte Bild. Beim Entwickeln ist das natürlich ein Nachteil. Für den Kunden selber ist es dann gut.

 

Zusätzlich ist es möglich, noch das sizes Attribut anzugeben. Den ersten Wert, den wir übergeben, ist die media query. Dieser sollte mit den verwendeten media queries im Layout zusammenhängen. Der zweite Wert is die Breite, die das Bild einnehmen soll. Der letzte Wert is der Default Wert. Diese Werte sind immer relativ zum Viewport. 100vw entspricht somit den 100% des Viewports. Mit unserem sizes Attribut sagen wir also, dass unser Bild immer 100% des Viewports hat, außer wir erreichen die 700px. Dann wird das Bild mit 700px festgelegt. Kurz gesagt, teilen wir mit dem srcset Attribut dem Browser mit, wie groß das Bild in Pixel ist, und mit dem sizes Attribut wie viel Platz das Bild im Layout einnehmen wird.

<img sizes=“(min-width: 700px) 700px, 100vw“ srcset=“photo-larger.jpg 1400w, photo-medium.jpg 700w, photo-small.jpg 400w“ src=“photo-medium.jpg“ alt=“Alternative Text“ />

Weitere Infos für diese Variante könnt ihr der Mozilla Developer Spezifikations für das img-Element entnehmen.

 

Images mit dem Picture Element

 

Wenn man genauer bestimmten möchte, wann welches Bild genommen wird, ist das picture-Element die sinnvollere Variante, auch wenn diese nur von wenigen Browsern unterstützt wird. Mit dem polifill sollte es aber keine Probleme geben. Beim picture-Element haben wir zusätzlich innen das source-Element. Diesem Element übergeben wir, wie bereits vorher, die Bilder mittels srcset und den Pixeln. Zusätzlich können wir hier aber über das media-Attribut auch die Orientation, wie bei Codebeispiel 3, oder einen Mediaquery, wie bei Beispiel 4, übergeben. Man kann also wesentlich genauere Angaben machen, wann welches Bild verwendet wird.

<picture>
 <source media=“(orientation: landscape)“ srcset=“photo-large.jpg 2048w, photo-medium.jpg 1400w, photo-small.jpg 800w“ />
 <source srcset=“photo-square-large.jpg 1000w, photo- square-medium.jpg 800w />
 <img src=“photo-medium.jpg“ alt=“Alternative Text“ />
</picture>

 
<picture> 
 <source media="(min-width: 45em)" srcset="photo-large.jpg "> 
 <source media="(min-width: 32em)" srcset="photo-medium.jpg "> 
 <img src="photo-small.jpg" alt=" Alternative Text"> 
</picture> 

Weitere Informationen wieder in der Mozilla Developer Network Spezifikation für das picture Element.

Fazit

Das srcset und sizes attribut des img-Elementes wird von den Browser wesentlich besser unterstützt als das picture-Element. Wie es aussieht, wird sich ersters auch in der Zukunft mehr durchsetzen. Auch ist es in den meisten Fällen ausreichend, um die passenden Bilder für die Auflösung ausliefern zu können. Wenn man jedoch wirklich für spezielle Viewports passende Bilder ausliefern muss, bietet sich das picture-Element besser an.