Flexible Bilder (responsive images): ein wichtiger Bestandteil moderner Webentwicklung.
Wenn je nach Bildschirmdimension, Pixeldichte oder verfügbarem Platz das passende Bild angezeigt wird, kann das Erlebnis für den Benutzer enorm verbessert werden.
Genauer gibt es folgende Faktoren, die zur Optimierung in Betracht gezogen werden können:
1. Resolution Switching
Die Ladezeit der Webseite bzw. das benötigte Datenvolumen für den Benutzer kann verringert werden. Ausserdem kann das visuelle Erlebnis verbessert werden, indem bei höherer Pixeldichte auch höher auflösende Bilder geladen werden.
2. Art Direction
Bilder, auf denen gewisse Details wichtig sind (bspw. Gesichter), welche beim Verkleinern des Bildes nicht mehr gut erkennbar sind, können auf kleineren Viewports in einem zugeschnittenen Zustand präsentiert werden. So sind die Gesichter wieder erkennbar, die Umgebung wird jedoch abgeschnitten.
Resolution Switching
Bei diesem Use Case bleiben die Proportionen des Bildes jeweils gleich. Je nach Eigenschaften des Viewports/Screens werden Bilder mit einer anderen Pixeldichte oder Auflösung geladen und angezeigt. Anhand des img-Elements und dessen Attribute werden dem Browser Eckdaten zu den Eigenschaften der Bilder angegeben. Mithilfe dieser Daten ermittelt der Browser selbstständig das geeignete Bild und lädt ausschliesslich dieses.
Fixe Breite, unterschiedliche Pixeldichte
Wenn das Bild mit einer fixen Grösse angezeigt werden soll, es aber auf Bildschirmen mit einer höheren Pixeldichte (bspw. mobile Geräte) auch in der verfügbaren höheren Qualität angezeigt werden soll, sodass mehr Details erkennbar sind, kann das «img»-Element mit «srcset» verwendet werden.
<img src="sunset-320px.jpg" srcset="sunset-480px.jpg 1.5x, sunset-640px.jpg 2x, sunset-1280px.jpg 4x" alt="A beautiful sunset" />
src
Bei der standardmässigen Pixeldichte (1x) wird das Bild im bekannten «src»-Attribut verwendet. Dies dient auch als Fallback und kommt zum Tragen, wenn der Browser das «srcset»-Attribut nicht kennt.
srcset
Hier können kommagetrennt weitere Bilder angegeben werden und zusätzlich jeweils die Pixeldichte, für welche dieses Bild geeignet ist.
Damit der Browser die Bilder einschätzen kann, wird für jedes Bild angegeben, für welche Pixeldichte es geeignet ist. So kann er je nach eigenem Ermessen das passende Bild wählen, wobei er theoretisch bei geringer Netzwerkstärke trotzdem auf ein weniger hoch auflösendes Bild zurückgreifen kann.
Variable Breite, unterschiedliche Auflösung
Wenn das Bild je nach verfügbarem Platz jeweils eine andere Auflösung haben soll, um bspw. Ladezeiten zu optimieren, dann kann die nachfolgende Methode verwendet werden.
<img srcset="sunset-480px.jpg 480w, sunset-640px.jpg 640w, sunset-1280px.jpg 1280w" sizes="(max-width: 400px) 100vw, (max-width: 960px) 640px, 50vw" src="sunset-640px.jpg" alt="A beautiful sunset" />
src
Auch hier dient das Bild im «src»-Attribut als Fallback und kommt zum Tragen, wenn der Browser die Attribute «srcset» und «sizes» nicht kennt.
srcset
Hier können kommagetrennt weitere Bilder angegeben werden und zusätzlich jeweils die intrinsische Breite des Bildes in Pixel.
sizes
Hier werden dem Browser kommagetrennt Anweisungen angegeben, wie viel Platz dem Bild bei welchem Viewport zur Verfügung stehen soll. Die Reihenfolge der im «sizes»-Attribut angegebenen Anweisungen spielt eine Rolle, denn sobald die erste Anweisung passt, wird vom Browser nicht mehr weitergeschaut.
Auch bei dieser Methode werden dem Browser gewisse Informationen mitgeteilt, damit er das bestmögliche Bild auswählt und lädt. Zusätzlich wird, wie bei der ersten Methode, Rücksicht auf die Pixeldichte genommen.
Im «srcset»-Attribut wird zu jedem Bild jeweils die Breite des rohen Bildes in Pixel angegeben (bspw. «480w» für eine Breite von 480 Pixel). Im «sizes»-Attribut wird dann festgelegt, wie breit das Bild dann ungefähr auf dem jeweiligen Viewport angezeigt wird. Dies ist ein Tipp des Entwicklers an den Browser.
(max-width: 400px) 100vw
Dies bedeutet also, solange der Viewport kleiner als 400 Pixel ist, wird das Bild auf die gesamte Breite gestreckt.
Auf einem Screen mit normaler Pixeldichte sind das bspw. 320 Pixel. Das bedeutet: Das optimale Bild ist das nächst grössere. Der Browser wählt wahrscheinlich «sunset-480px.jpg».
Auf einem Screen mit zweifacher Pixeldichte stehen dem Bild mit 100vw aber 640 Pixel zur Verfügung, was «sunset-640px.jpg» zum optimalsten Bild macht.
(max-width: 960px) 640px
Wenn die zweite Anweisung in Kraft tritt, bedeutet das, dass dem Bild im Layout dann wohl 640 Pixel zur Verfügung stehen werden. Der Browser wird hier wahrscheinlich «sunset-640px.jpg» wählen, wobei er bei doppelter Pixeldichte «sunset-1280px.jpg» wählen wird.
50vw
Die letzte Anweisung ist dann der Fallback, wenn keine der anderen Anweisungen zutreffen.
Art Direction
Bei diesem Use Case werden je nachdem die Dimensionen und der Schnitt des Bildes verändert. Dies wird seltener benötigt. Es ist dann interessant, wenn das Bild gewisse Details hat, die kaum noch erkennbar sind, wenn das Bild einfach kleiner angezeigt wird (auch wenn die Auflösung vergrössert wird).
Beispielsweise sieht man auf dem Bild in der Mitte ein Gesicht, aber ein Grossteil der Fläche wird rechts und links von Landschaft eingenommen. Auf einem grossen Desktop-Bildschirm ist das Gesicht gut erkennbar. Wird dasselbe Bild aber auf einem schmalen Bildschirm eines mobilen Geräts dargestellt, ist das Gesicht so klein und kaum noch erkennbar, während der Grossteil der Fläche an die Landschaft verschwendet wird.
Gut wäre es, wenn das Bild nur für diesen schmaleren Viewport einen anderen Schnitt hätte, wo die Landschaft abgetrennt wird, damit das Gesicht mehr Fläche des Bildes einnehmen kann.
Dies lässt sich mit dem «picture»-Element verwirklichen.
<picture> <source media="(max-width: 599px)" srcset="only_face.jpg"> <source media="(min-width: 600px)" srcset="face_and_landscape.jpg"> <img src="only_face.jpg" alt="A human being"> </picture>
Analog des «sizes»-Attributs des «img»-Elements können hier Anweisungen festgelegt werden. Der Browser wählt dann jeweils das entsprechende Bild.
Wichtig: das «img»-Element ist Pflicht. Die «picture»- und «source»-Elemente sind als Wrapper anzusehen. Jegliche Style-Anpassungen müssen am «img»-Element vorgenommen werden.
Fazit
Ganz grundsätzlich kann man sich also an folgendem Leitfaden orientieren:
Soll das Bild je nach Viewport einen anderen Fokus oder sogar Inhalt bzw. Seitenverhältnis haben, dann sollte ein «picture»-Element verwendet werden, damit auch sichergestellt wird, dass der Besucher das gewünschte Bild im vorgesehenen Moment sieht.
Bleibt das Bild hingegen in jedem Viewport für das Auge gleich, sollte ein «img»-Element mit «srcset» und «sizes» verwendet werden, damit der Browser anhand Algorithmen die Möglichkeit hat, mitzuentscheiden, welches das optimale Bild ist.
Geschrieben von:
Raphael Ulrich, Frontend-Webentwickler bei der raffiniert media AG
Wie können wir dir helfen?
Siehst du Potential in deiner Webseite? Wir helfen dir, das volle Potential auszuschöpfen.