Das passende Bild für jeden Screen

Responsive Webdesign, also die Gestaltung und Programmierung von flexiblen Websites für alle Geräte, ist heute eine Selbstverständlichkeit. Weit weniger Beachtung findet jedoch die Optimierung von Bildern für unterschiedliche Auflösungen. Für den Spagat zwischen knackig scharfen Bildern und kurzen Ladezeiten gibt es jedoch einfache Lösungen – wir erklären sie dir hier.


Herausforderung 1: Unterschiedliche Bildschirm-Auflösungen | Websites müssen auf einer Vielzahl von Geräten gut aussehen. Vom älteren Smartphone mit einer maximalen Breite von 320 Pixeln bis hin zu grossen, hochauflösenden Monitoren mit 5000 Pixeln und mehr müssen Websites heute ausgelegt werden.

Um unscharfe, pixelige und damit schlecht aussehende Bilder zu vermeiden, müssen wir Bilder in grosser Auflösung zur Verfügung stellen. Doch diese sind dann rasch für ein kleines Screen wiederum viel zu gross, was uns zur nächsten Herausforderung führt…


Auflösung

Herausforderung 2: Zu grosse Bilder vertreiben Website-Besucher scharenweise | Grosse, qualitativ gute Bilder haben eine Datei-Grösse von einigen Megabytes. Mit einer rasanten Glasfaser-Leitung am Desktop-Computer mag dies nicht ins Gewicht fallen. Mit dem Smartphone und einer langsamen Verbindung wird diese Grösse jedoch rasch zum Rohrkrepierer. Denn mehr als die Hälfte der User beendet den Besuch einer Website frühzeitig, wenn das Laden länger als 3 Sekunden dauert.1 Und dies ist schon bei nur einem zu grossen Bild mit einer mässigen Mobil-Verbindung rasch erreicht.


Ladezeiten

Die Lösung: Für jedes Screen das passende Bild | Alle aktuellen Browser bieten für dieses Problem eine ganz einfache Lösung. Diese besteht darin, dass Bilder auf einer Website in unterschiedlichen Grössen zur Verfügung gestellt werden und der Browser dann genau dasjenige Bild lädt, welches ideal zur jeweiligen Auflösung des Screens passt. So werden die Bilder knackig scharf, ohne unnötig viele Daten laden zu müssen und so die Besucher mit langen Wartezeiten zu vergraulen.

Wie das im Detail geht findest du beispielsweise bei SELFHTML.


Teste es selbst | Nachfolgendes Bild zeigt dir, in welcher Auflösung dieses gerade für dich geladen wurde. Wenn du nun dein Browser-Fenster vergrösserst oder verkleinerst, wird ein anderes Bild geladen, welches für die neue Breite optimiert ist. Je nach deiner Auflösung funktioniert dies auch auf deinem Smartphone oder Tablet, indem du die Ausrichtung des Gerätes zwischen Hoch- und Querformat veränderst.


Aktuelle Bildbreite