Ein Bild sagt mehr als tausend Worte. Wer aber das Bild nicht sehen kann, braucht die richtigen Worte um es sich selbst vor zu stellen. Warum wir dies bei der Gestaltung von Inhalten im Web berücksichtigen sollten erklärt Eric Eggert in seiner Lehrveranstaltung Accessability zum Thema Bilder.

Wie finde ich den passenden alt-Text für meine Bilder?

Der alternative Text zu einem Bild (alt) beschreibt das Bild, sodass jemand, der das Bild nicht sehen kann eine Vorstellung erhält, was dort gezeigt wird. Wie aber beschreibt man ein Bild am verständlichsten? Dazu bietet das World Wide Web Consortium (W3C) in Form des alt decision tree Hilfe. Durch Beantwortung von einfachen Fragen bekommt man schnell und einfach Empfehlungen, wie der alternative Text aussehen sollte. In vielen Fällen, immer dann wenn das Bild eher einen dekorativen Character hat, empfiehlt die Kommission sogar den alt-Text leer zu lassen.

Warum Bilder nicht einfach klein Skaliert werden sollten

Auf einem kleinen Smartphone Bilder anzuzeigen, die eigentlich für eine Desktop-Seite gedacht sind, ist technisch kein großes Problem. Durch Skalierung wird das große Bild einfach an das kleine Display angepasst. Für den Nutzer hingegen kann dies unnötig lange Ladezeiten bedeuten und gleichzeitig einen hohen Verbrauch des Datenvolumens mit sich ziehen. Viel mehr noch kann es sein, dass das skalierte Bild so klein ist, dass die wichtigsten Elemente kaum noch zu erkennen sind. ^1

Die Lösung: Responsive Images

Die Lösung für derartige Probleme bei der Skalierung von Bilder sind sogenannte Responsive Images. Sie liefern die passenden Größe und Auflösung für die jeweiligen anfragenden Devices. Sie können aber noch mehr: Durch das Ablegen von verschiedenen Bildern für unterschiedliche Viewport breiten, können so auch Bilder hinterlegt werden, die einen perfekten Ausschnitt für die jeweilige Größe darstellen. Die Orientierung an der Breite des Bildschirms macht es zudem möglich auch auf Landscape und Portrait Ansicht entsprechend zu reagieren. ^2

Das Problem mit den Retina Displays

Mit der Einführung der Retina Displays, die mit dem iPhone 4 im Jahr 2007 von Apple auf den Markt gebracht wurden, kamen neben den verschiedenen Größen eines Bildes auch noch verschiedene Auflösungen ins Spiel. Da unterschiedliche Auflösungen nicht ohne weiteres vom System generiert werden können, besteht im Image Tag <img> die Möglichkeit neben dem Ursprundgsbild für klassische Displays, weitere Bilder mit anderen Auflösungen einzubinden. Diese werden entsprechend mit “2x” und “3x” ausgezeichnet und werden somit automatisch vom Browser genutzt, wenn die doppelte oder dreifache Pixeldichte sinnvoll ist.

Mehr Flexibilität für die Verwendung von Bildern

Es wird auch immer üblicher mehrere Bilder für unterschiedliche Devices im Backend zu hinterlegen. So wird ab einer bestimmten Browser-Größe, ein anderes Bild verwendet oder bestimmte Bilder ganz weggelassen. Hier gibt es verschiedene Methoden, die alle im <picture> Element verortet werden können. Es dient als Container, für verschiedene Möglichkeiten, Bilder in möglichst passender Größe für die jeweiligen Endgeräte auszuliefern. Auch wenn dies in der Regel im CSS einer Webseite geschiet, machen es neue Technologien nötig dies im HTML zu includieren. Grund dafür ist das sogenannte Prefetching. Bei diesem Verfahren versucht der Browser vorher zu sehen, welche Seite ein Nutzer als nächstes Aufruft und läd einen Teil der Inhalte, bereits bevor die eigentliche Seite inklusive des notwendigen CSS geladen wird.^3 Dies kann dazu führen, dass der Browser das größtmögliche hinterlegte Bild abruft, obwohl er eine deutlich kleinere Version benötigt. Für solche Fälle können im Container der <picture> Elements media condition als subset der media queries verwendet werden, die abhängig von der Viewport Breite angeben in welcher Größe ein Bild geladen werden muss.

Bildformate

Neben den klassischen Bildformaten (PNG, GIF, JPG), gibt es auch advanced Formate: SVG, WebP und JPEG2000. Diese komprimieren Bilder, sodass sie in der selben Auflösung weniger KB haben. So lassen sich Ladezeiten von Webseiten verringern. Mit dem oben beschriebenen <picture> Element lässt sich dies ebenso integrieren: Für Browser, die in der Lage sind diese neuen advanced Formate zu lesen, können diese entsprechend hinterlegt und genutzt werden. Für alle anderen Browser muss aber sichergestellt sein, dass auch die klassischen Bildformte noch verfügbar sein,  da diese die neuen advanced Formatformen nicht unterstützen.

Ein Bild ist mehr als eine Datei

Die Einbindung eines Bildes auf einer Webseite ist damit weit mehr als das Referenzieren einer Mediendatei. Sie muss auf Grund der verschiedenen Devicegrößen, der Auflösungen und auch der unterschiedlichen Platzierung von Bildern auf einer Seite gründlich durchdacht und im Code entsprechend eingearbeitet werden. Dies sorgt nicht nur für ein optimales Nutzererlebnis für Menschen mit Handycap, sondern für nahezu jeden Nutzer, der eine Webseite mit Bildern ansehen möchte.

 

^1 Hellweg, Jonas (2015): Responsive Images – <picture>, srcset, sizes & Co. https://blog.kulturbanause.de/2014/09/responsive-images-srcset-sizes-adaptive/

^2 Eggert, Eric (2013) Responsive Images: Erlöst uns ein Bildformat von all unseren Problemen? http://t3n.de/news/responsive-images-erloest-uns-503195/

^3 Schlachter, Florian (2011): Die Falle des prefetching https://www.florian-schlachter.de/post/falle-des-prefetching/

 

Weiterführende Links:

Related Posts