Zur Einbindung von Bilddateien in ein responsives Webdesign muss einiges beachtet werden.
Zwar ist die reine dynamische Anpassung von Bildern an die Breite des Displays zunächst keine große Schwierigkeit.
Hier im Beispiel legt sich das Header-Bild immer auf die gesamte Breite des Displays oder des Browser-Fensters.
Die Teaser-Bilder nehmen 50% der verfügbaren Breite ein.

Hierzu wurde für Bilder in CSS generell eine Breite von 100% und eine automatische Höhe definiert. Das Bild nimmt somit die volle Breite ein seiner übergeordneten Elements ein und so viel Höhe, wie zur vollständigen Darstellung des Bildes benötigt wird.

img {
width:100%;
heigth:auto;
}

Außerdem wurden für die Teaser mit Hilfe von Media Queries Umbrüche definiert für kleine Displays und Geräte, sodass die Teaser-Bilder in kleinen Displays untereinander anstatt nebeneinander dargestellt werden.

@media screen and (max-width: 800px) {
.teaser {
width:100%;
}
}

Soweit kann man hier schon von einem „responsiven Design“ sprechen. Allerdings ist es noch optimierbar. Hintergrund ist, dass im bisherigen Beispiel unabhängig von Displaygröße und Gerät immer die gleichen Bilder geladen werden. Ganz gleich, ob ein Smartphone mit z.B. 400 Pixel Breite oder ein 5k-Monitor mit 5200 Pixel Breite die Seite aufruft.
Das Bild müsste demnach möglichst groß abgelegt werden, damit in großen Bildschirmen die Bildqualität gewährleistet ist. Das wiederum wirkt sich negativ auf die Ladezeit in mobilen Geräten aus, wo es gar nicht nötig wäre Bilder in 2500 Pixel Breite oder sogar größer zu laden. Gerade im mobilen Netz ist die Datengeschwindigkeit immer noch deutlich unterhalb der Internetanschlüsse im Festnetz. Eine Seite, die mehrere Bilder lädt, hat Auswirkungen auf die Ladezeit im mobilen Netz und somit auf die Performance der Seite.
Legt man die Bilder dagegen zu klein an, ist zwar die Ladezeit im mobilen Netz besser, aber die Bildqualität in ganz großen Bildschirmen schlecht.

Für einen optimalen responsiven Webauftritt sollten Bilder also mehrfach angelegt werden und unterschieden werden, wann welches geladen werden soll.

Um das zu erreichen, gibt es die Möglichkeit den Image-Tag mit einem „srcset“-Attribut auszustatten.
Mit diesem kann genau definiert werden, welche Bilddatei unter welchen Bedingungen geladen werden soll. Im aufrufenden Gerät werden dann ausschließlich die Bilder geladen, welche diese definierten Bedingungen erfüllen.

<img src=“tablet.jpg“ srcset=“smartphone.jpg 480w, tablet.jpg 800w, desktop.jpg 1600w“ alt=“srcset-Beispiel“ />

Zunächst wird wie üblich ein „src“-Attribut mit einer Bilddatei verwende, sodass ein Fallback integriert ist, falls ein Browser „srcset“ nicht unterstützt, was allerdings nicht vorkommen dürfte. Mit dem „srcset“-Attribut kann ein „Set“ an Bildquellen angelegt werden. In diesem Fall werden drei verschiedene JPG-Dateien aufgeführt.

Mit dem Wert „w“ wird die Breite (width) des Viewports angegeben. Wird die Seite mit einem Tablet mit einer Breite von beispielsweise 720 Pixel aufgerufen, wird die Bildquelle „tablet.jpg“ geladen, da im SrcSet definiert wurde, dass bei Viewports bis 800 Pixel Breite diese Datei geladen werden soll. Ist der Viewport bis zu 480 Pixel breit, käme die Bildquelle „smartphone.jpg“ zur Geltung.

Im folgenden Beispiel wird abhängig vom Gerät bzw. von der Breite des Browsers ausschließlich die Bilddatei geladen, welche die definierte Bedingung erfüllt.

Diese Vorgehensweise bietet also die Möglichkeit für das Gerät optimierte Bilddateien zu laden.

Außer der Angabe des w-Wertes (width) für die Maximal-Breite des Viewports ist auch möglich unterschiedliche Bilddateien für unterschiedliche Auflösungen zu hinterlegen. Dafür kann ein x-Wert angegeben werden. Wobei „1x“ für normalauflösende Displays gilt und 2x oder 3x hat entsprechend die doppelte oder dreifache Pixeldichte.

Hiermit können beispielsweise für Geräte und Monitore mit Retina-Display höher auflösende Bilder hinterlegt werden, welche auch nur dann geladen werden.

Mit dem „srcset“-Attribut allein kann man aber nicht dynamisch unterschiedliche Bilddateien laden, wenn der Viewport nach dem Laden der Seite verändert wird. Wenn man also das Browserfenster nach Laden der Seite größer schiebt, bleibt die geladene Bilddatei bestehen.

Es kann also passieren, dass das Browserfenster beim Laden der Seite eine kleine Bilddatei lädt, es dann größer geschoben wird und dadurch das kleine Bild zu groß skaliert. Außerdem wird das Bild im Browser-Cache gespeichert und beim erneuten Laden der Seite wird immer diese im Cache liegende Bildquelle verwendet, egal wie groß das Browser-Fenster dann ist.

Durchaus mehr Flexibilität bietet das HTML5-Element <picture>

Innerhalb des Picture-Elements können mehrere Bilder angegeben werden, sowie Bedingungen definiert werden, wann welche angezeigt werden soll.
<picture>
<source media=“(max-width: 480px)“ srcset=“smartphone.jpg“>
<source media=“(max-width: 800px)“ srcset=“tablet.jpg“>
<source media=“(max-width: 1600px)“ srcset=“desktop.jpg“>
<img src=“fallback.jpg“ alt=“Image“>
</picture>

Hier zum Beispiel
In diesem Beispiel kann das Browserfenster groß und klein geschoben werden. Die Bilder ändern sich je nach Größe des Viewports. Somit hat man mit diesem Picture-Tag abgesehen von Optimierungen in Bezug auf Qualität und Ladezeiten die Möglichkeit, sich kreative Einsatzmöglichkeiten auszudenken. 😉 Beispielsweise könnten für verschiedene Viewports unterschiedliche Bildausschnitte oder Bildformate zur Verfügung gestellt werden.
Auch hier können im srcset-Attribut noch weitere Dateien angegeben werden, die beispielsweise für hochauflösende Displays zum Einsatz kommen sollen.
<source media=“(max-width: 800px)“ srcset=“tablet.jpg 1x, tablet-highres.jpg 2x“>

Allerdings wird dieses relativ neue HTML-Element noch nicht von allen Browsern unterstützt. In diesem Fall wird nur das Bild angezeigt, das im „üblichen“ img-Tag.

Das war ein kurzer Einblick mit Praxisbeispielen und vereinfachten Veranschaulichungen. Es sollte in die Thematik von Images in responsiven Designs einführen. Wenn du Ergänzungen und Anregungen hast, hinterleg einen Post oder schreib uns einfach an. 🙂

Demnächst gibt es bestimmt weitere Beiträge in unserer Reihe Responsive Design

Weitere Artikel von Nima Sorouri