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 als Beispiel nutzen. Das Bild verwendet hier die volle Breite im Contentbereich. 

Auf einem großen Bildschirm wird dieses Bild in optimaler Größe ideal dargestellt, 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.

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.

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.

Nur durch gewissenhaftes Testen erreicht man die richtigen Einstellungen zur fehlerfreien Darstellung der Bilder im Responsive Webdesign.

Wieso ist die Verwendung verschiedener Bildegrößen und Bildformate im Responsive Webdesign wichtig?


Bilder können Stimmung schaffen und Informationen liefern. Deshalb sollten Bilder auf keiner Website fehlen. 

Im Responsive Webdesign kann man unterschiedliche Bilder für unterschiedlich breite Bildschirme zeigen, um immer eine optimale Ansicht zu ermöglichen. 

Neben der benutzerfreundlichen Darstellung spielt auch die Dateigröße eine wichtige Rolle im Hinblick auf die Ladezeit einer Website. 

Bilder sollten deshalb immer so groß wie nötig und so klein wie möglich vom Webserver bereitgestellt werden. 

Bei der Erstellung von Websites entsteht ein nicht zu vernachlässigender Aufwand, der die Qualität und Benutzerfreundlichkeit der Website enorm steigern kann. Planen Sie deshalb immer Zeit oder Budget für die Bildoptimierung für die Erstellung einer Website mit ein.

Links zu unseren anderen Responsive Webdesign Gestaltungsmöglichkeiten

Responsive Schrift

Responsive Styles 

Responsive Layout

Ihre Agentur für Responsive Webdesign, SEO und Webprogrammierung aus Gütersloh

Erneuerung von Websites innerhalb weniger Tage

SEO für gute Platzierung in Suchmaschinen