Bilder dem Endgerät angepasst auszugeben, ist einer der wichtigsten Faktoren, um eine Webseite auf Geschwindigkeit und der qualitativ angepassten Ausgabe auf verschiedenen Geräten zu optimieren.

Responsive Webdesign durch Responsive Bilder

Hintergrundbilder lassen sich bequem im CSS durch Media-Queries anpassen. Media queries sind geräteabhängige Stilvorgaben die im CSS Bereich Ihrer Webseite definiert werden.
Doch erst mit den HTML Attributen srscet und sizes läßt sich auch im HTML bestimmen, welches Bild bei welcher Größe des Endgerätes ausgegeben wird. Mittlerweile sind diese Attribute in den aktuellen Browsern verfügbar.

Leider sieht man trotzdem auch heute noch viele Webseiten, auf denen diese Technik nicht eingesetzt wird. So werden Bilder mit einer großen Abmessung geladen, damit sie dann auf die benötigte Größe herunter skaliert werden. Dies nennt sich downsampling.

Im Chrome Browser kann man sich in den Developer Tools so etwas anschauen. Wird dort das img – Tag im HTML näher untersucht, wird rechts der Wert der originalen Bildgröße (1920 x 1920), und links die der herunter skalierten Größe (752 x 752) für die Ausgabe auf einem iPad angezeigt.

Grösse des Bildes ohne Responsives Webdesign im Chrome Browser

Grösse des Bildes ohne Responsives Webdesign im Chrome Browser

Das Bild wird zwar immer in einer guten Qualität dargestellt, jedoch werden unnötig viele Kilobyte geladen, was sich bei vielen Bildern auf der Seite extrem auf die Ladezeit auswirkt.

Durch das srcset-Attribut wird es möglich, eine Reihe von Bildern mit verschiedenen Größen oder Pixeldichten dem Browser zur Verfügung zu stellen. Der Browser wählt dann das für ihn beste Bild aus.
Die neuen Bildschirme unserer Computer und Smartphones werden zunehmend hochauflösender und damit schärfer. Die Pixeldichte nimmt also immer mehr zu. So hat das Retina Display z.B. eine Pixeldichte von 2.

Responsive Bilder durch Bild-Skalierung: srcset

Möchten wir ein Bild abhängig von seiner Pixeldichte anzeigen, so können wir dem Browser auf diese Art im Code die Datei zur Verfügung stellen.

<img src=„bild.jpg" srcset=„bild@2x.jpg 2x, bild@1x.jpg 1x" alt=„Bild">

Ebenso gibt es auch die Möglichkeit auf die Breite des Bildschirms einzugehen:

<img src=„bild.jpg"
srcset=„bild_gross.jpg 1024w, bild_mittel.jpg 640w, bild_klein.jpg 320w"
sizes="(min-width: 36em) 33.3vw, 100vw"
alt=„Bild">

Hier ist die Ersparnis an Ladezeit und Datenvolumen zu sehen, wenn die genau passende Größe für das Endgerät geladen wird:

Optimales Webdesign durch Responsive Bilder mit srcset

Optimales Webdesign durch Responsive Bilder mit srcset

Bis zu einer Breite von 320 px wird das kleine Bild ausgegeben, bis 640px das mittlere und bis 1024px das grosse Bild. Durch die Angabe von sizes teilen wir dem Browser hier in diesem Fall mit, das bei einer Mindestbreite von 36 em das Bild ein Drittel des Bildschirmes ausfüllen (33.3 Viewport-Width) soll und darunter den kompletten Bereich ausfüllt (100% Viewport-Width).

Bei einer Breite von mehr als 1024px wird auf das Bild zurückgegriffen, welches im src Attribut angegeben wird. Die Datei Bild.jpg ist unsere Fallback-Lösung – sie wird genommen, wenn die Größe nicht definiert ist oder ein älterer Browser das srcset Attribut nicht kennt.

Obwohl wir im img-Tag durch das srcset-Attribut die Möglichkeit haben, verschiedene Bild-Dateien zu hinterlegen, ist es nicht für die Ausgabe verschiedener Inhalte gedacht! Dafür gibt es das picture-Tag.

Responsive Bilder durch Austauschen: Art Directions

Um Inhalte noch gezielter für verschiedene Geräte und Größen zu platzieren, gibt es das img – Tag. Dies verschafft noch mehr Kontrolle über die Ausgabe.

Dadurch gibt es die Möglichkeit bei bestimmten Bildschirmbreiten statt eines Querformates ein Hochformat anzuzeigen oder nur einen Ausschnitt des Bildes auszugeben. Es ist nur selten wirklich erforderlich – meist reicht die oben beschriebene Lösung. Bei aller Optimierung, sollte auf ein sinnvolles Aufwand/Nutzen-Verhältnis geachtet werden. Denn die Mediadaten müssen bearbeitet und der Code sollte so gestaltet sein, daß er leicht pfleg- und veränderbar bleibt.

<picture>
<source media="(min-width: 1024px)" srcset=„stift3.jpg">
<source media="(min-width: 640px)" srcset=„stift2.jpg">
<source srcset=„stift3.jpg">
<img src=„stift.jpg" alt=„Bild von einem Stift">
</picture>

So erhalten wir auf verschiedenen Geräten vollkommen unterschiedliche Bildvariationen.
Zusätzlich ist es im srcset-Attribut möglich, weitere Dateien für Geräte mit verschiedenen Pixeldichte vorzubehalten.

Responsive Bilder mit Hoch- und Querformat durch Art Directions

Responsive Bilder mit Hoch- und Querformat durch Art Directions

Links sieht die Ausgabe auf einem Ipad im Querformat mit einer Breite von 1024px und rechts im Hochformat auf einem IPhone 5 mit einer Bildschirmbreite von 320px.

<picture>
<source media="(min-width: 1024px)" srcset=„stift3.jpg 1x, stift3@2x.jpg 2x">
<source media="(min-width: 640px)" srcset=„stift2.jpg 1x, stift2@2x.jpg 2x">
<source srcset=„stift3.jpg x1, stift1@2x.jpg 2x">
<img src=„stift.jpg" alt=„Bild von einem Stift">
</picture>

Um älteren Browsern das picture tag beizubringen, gibt es z.B. picturefill. Dies ist eine kleine Javascript Datei, die dann im Head-Bereich des HTML Dokumentes eingebunden wird.

<script>
// Picture element HTML5 shiv
document.createElement( "picture" );
</script>
<script> src=„picturefill.js“ async></script>

Wenn bereits HTML5shiv eingebunden wurde entfällt der erste Teil. HTML5shiv ermöglicht bei älteren Browsern wie Internet Explorer 6-9, Safari 4.x (and iPhone 3.x), and Firefox 3.x das Verarbeiten von HTML5 Elementen die der Browser sonst nicht verarbeiten würde.

Für den Internet Explorer 9.0 ist zusätzlich ein Trick erforderlich, da dieser source-Elemente die in picture-Tags verschachtelt sind, nicht erkennt.

<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="smaller.jpg" media="(max-width: 768px)">
<source srcset="default.jpg">
<!--[if IE 9]></video><![endif]-->
<img srcset="default.jpg" alt="My default image">
</picture>

Responsive Bilder und die Steuerung über das picture oder dem img – Tag ist überall leicht implementierbar. Ob in einer statische Webseite, Typo3, WordPress oder einem eigenen CMS.

Haben Sie Fragen zu den beschriebenen Techniken oder möchten Sie Ihre bestehende Webseite optimieren? Sprechen Sie uns an!

Bleiben Sie informiert!

Erhalten Sie einmal im Monat wertvolle Informationen über SEO, Webdesign und neue Trends.
Die Angaben in den Feldern mit * werden benötigt
Ja, ich möchte über neue Blogartikel auf dem Laufenden gehalten werden und wertvolle Informationen erhalten.