Nach oben

Bildern im Responsive Design mehr Beachtung schenken

Bilder werden auf Websites im Responsive Design oft noch stiefmütterlich behandelt. Denn es kommt nicht nur auf den Bildanteil einer Webseite an, sondern auch auf Motive, Ladezeiten und den perfekten Ausschnitt des einzelnen Bildes.

Heute werden nahezu alle Websites responsive konzipiert. Dabei wird besonders auf Interaction Design und Performance geachtet, meist auch auf eine gute Informationsarchitektur und frisch geschriebene Texte – aber auch das Verhalten des Bildmaterials gehört zum Konzept für Responsive Design.

Lassen Sie Bilder im gleichen Verhältnis skalieren

Früher war es ist üblich, Bildern eine fixe Breite und Höhe zuzuweisen. Konsequenterweise geht dies im «Responsive Web Design» nicht mehr. Bilder müssen sich nun proportional in der Breite und Höhe anpassen. Ansonsten würden sie gequetscht angezeigt oder über den Bildschirm von kleinen Geräten hinausragen. Eine kleine CSS-Anweisung auf dem HTML-Tag des Bildes löst das Problem.

Dieser CSS-Code-Schnipsel lässt Bilder korrekt skalieren.

Verbessern Sie die Ladezeit durch Zuschnitt des optimalen Bildes

Die obenstehende Lösung sorgt dafür, dass die Bilder sich innerhalb ihres Containers verkleinern. Aber umgekehrt werden die Bilder nicht grösser skaliert als ihre maximale Auflösung. Dies hat zur Folge, dass Bilder für die breitestmöglichen Bildschirme optimiert sind. Grössere Bilder bedeuten aber auch grössere Datenmengen. Dies mag für Desktops und Laptops gut sein. Jedoch funktionieren viele mobile Endgeräte mit langsameren Netzverbindungen. Die Benutzer unterwegs müssen also warten, bis auch die grössten Bilder endlich geladen sind.

Folglich ist die Absprungrate bei mobil langsamen Websites höher, die durchschnittliche Verweildauer der Benutzer ist kürzer und letztlich wird die Conversion Rate kleiner.

Idealerweise schickt man dem jeweiligen Gerät ein Bild in optimierter Auflösung. Wir bei Zeix setzen z.B. 3 verschiedene Bildgrössen pro Motiv auf unserer Website ein. Achten Sie darauf, dass Geräte mit einer höhere Pixeldichte (z.B. MacBook Pro, iPhones u.v.a.m.) die angepasste doppelte Auflösung erhalten. Ansonsten sieht das Bild unscharf aus.

Kuratieren Sie Ihre Bilder

Sicherzustellen, dass Bilder in der korrekten Grösse und Auflösung zum jeweiligen Gerät übermittelt werden, sind eine gute Grundlage. Momentan wird für das Desktop-Layout gerne auf horizontale, grosse Bilder gesetzt. Damit soll ein bestimmtes Gefühl oder eine Atmosphäre vermittelt werden. Diese Bildformate können auf mobilen Endgeräten unter Umständen anders wirken, da sie auf schmalen Bildschirmen ihre Wirkung verlieren. So kann das Gestaltungskonzept Ihrer Website auseinanderfallen.

Das untenstehende Bild veranschaulicht, wie das gleiche Bild auf unterschiedlichen Screengrössen anders wirkt.

Das gleiche Bild für alle Screengrössen kann an Wirkung verlieren.

Die gute Nachricht: Als Lösung steht uns die <picture>-Implementation zur Verfügung. Dabei kann man definieren, bei welcher Bildschirmbreite und/oder Pixeldichte, welches Bild im Browser dargestellt wird. Das heisst umgekehrt, dass Sie für jedes Bild verschiedene Motive oder verschiedene Ausschnitte des gleichen Bildes definieren müssen, die auf verschiedenen Grössen angezeigt werden.

Je nach Grösse des Viewports werden neue Bildausschnitte definiert und Bilder ein- oder ausgeblendet.
Je nach Grösse des Viewports werden neue Bildausschnitte definiert und Bilder ein- oder ausgeblendet.

Ein Lösung gibt es

Das picturefill Plugin stellt sicher, dass die Picture-Implementation auf den meisten Browsern funktioniert.

Code-Beispiel für -Implementation (Quelle: picturefill Plugin Seite)

Fazit

Eine responsive Website zu konzipieren, heisst nicht nur Texte, Bilder und Videos technisch richtig zu verpacken. Bilder sind ein wichtiger Baustein des Inhalts, der auch nach der grundsätzlichen Bildauswahl noch redaktionelle Aufmerksamkeit benötigt. Also bringen Sie Ihre Website doch auf das nächste User-Experience-Level und kuratieren Sie Ihre Bilder.

Kommentare

Kommentar schreiben

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.