Responsive Images:
Bilder in optimaler Größe und mit dem richtigen Motiv für alle Endgeräte

Situation: Ein Bild sagt mehr als 1000 Worte. Allerdings muss das Bild bzw. das Motiv für den Betrachter gut erkennbar sein. Auf unserer Seite über das Responsive Layout zeigen wir Ihnen ein Bild mit verschiedenen Ansichten dieser Website auf unterschiedlichen Engeräten.

Auch auf dieser Seite wollen wir das Bild auch als Beispiel nutzen. Das Bild verwendet hier die volle Breite im Contentbereich.

Responsive Image Beispiel für das Laden verschiedener Bilddateien unf unterschiedlich großen Endgeräten

Auf einem großen Bildschirm ist das Bild ideal, um dem Betrachter einen Eindruck von unterschiedlichen Layouts auf den verschiedenen Endgeräten zu vermitteln. Doch auf Smartphones erkennt man fast nichts mehr auf den verschiedenen Geräten.

Responsive Webdesign Bild mit schlechtem Motiv für die Darstellung auf Smartphones

Das Problem mit diesem Bild entsteht auf schmalen Bildschirmen:

Auf einem Smartphonebildschirm ist die Bildschirmbreite wesentlich kleiner, so dass auf dem Bild kaum noch etwas zu erkennen ist. Das Bild ist auf Grund des Seitenverhältnisses und dem Motiv untauglich für die Nutzung auf einem Smartphone.

Responsive Image mit optimierter Darstellung auf Smartphones

Die Lösung für die optimale Nutzung von Bildern im Responsive Webdesign:

Unterschiedliche Bilder für unterschiedlich breite Endgeräte. Ermöglicht werden diese unterschiedlichen Bilder durch das HTML <picture> Element, das in fast allen Webbrowsern für mobile Endgeräte unterstützt wird.

In unserem Frontly CMS kann man schnell und einfach ein anderes Bild für Tablets oder Smartphones hinterlegen.

Neben der Optimierung der Darstellung kommt ein weiterer wichtiger Faktor für die Ladezeit der Website hinzu.

Durch die Verwendung eines kleineren Bildes verringert sich die Datenmenge oft drastisch, so dass bis zu 90% eingespart werden können.

Das Gegenteilige Problem entsteht bei der Verwendung von kleinen Bildern und Grafiken in einem mehrspaltigen Layout. Die kleinen Bilder skalieren sich dann häufig auf die gesamte Bildschirmbreite. Das sieht oft schlecht aus, weil das Bild nicht hoch genug aufgelöst ist und dann sieht es verpixelt aus. Meist werden jedoch viel zu große Bilder auf Websites verwendet, die entsprechend mehr Zeit zum Laden benötigen.

Damit wir solchen Problemen entgegentreten können, testen wir alle Websites bei der Erstellung auf unterschiedlichen Endgeräten, um die Bilder auf der Website gut darzustellen und dabei möglichst kleine Bilddateien zu laden und die Website so schneller und benutzerfreundlich zu machen.

Natürlich kann man das Darstellungsproblem auch anders lösen, indem man mehrere einzelne Bilder auf der Seite lädt. Diese werden auf kleinen Geräten dann jedoch auch untereinander ohne erklärenden Text angezeigt, nehmen mehr Ladezeit in Anspruch.