Blogbeitragsbild mit Fotografer

Großflächige Bilder auf Webseiten – Was Sie beachten müssen

Dieser Artikel ist Nummer 1 von 3 im Special "UX und Webdesign"

Wir bringen Mensch und Maschine durch gelungenes Webdesign zusammen. Die Kunst den Nutzer bestmöglich zu führen hat ihre Ursache nicht nur im Design, sondern bereits in der Konzeption des Webdesigns.

Menschen denken in Bildern,

Menschen denken nicht in Texten. Bei der Gestaltung von Webseiten ist man seit geraumer Zeit dazu übergegangen, großflächige Bilder in den Vordergrund zu stellen und Texte auf das Nötigste zu beschränken. Um sich von der Masse abzuheben, ist es unerlässlich, im Gedächtnis zu bleiben und die Emotionen potenzieller Kunden anzusprechen. Bilder ermöglichen genau das und vereinfachen zudem das Verständnis. Welche Vorteile Bilder im Webdesign mit sich bringen und was für einen effizienten Einsatz unbedingt beachtet werden muss, möchten wir Ihnen im Folgenden näher bringen.

Bilder erregen Aufmerksamkeit

Bei allem technologischen Fortschritt, den die Menschheit bis heute erreicht hat, funktioniert unsere Wahrnehmung immer noch nach demselben Prinzip wie seit Jahrtausenden. Sicherlich ist es Ihnen schon oft aufgefallen, dass es leichter fällt, komplexe Themen oder Abläufe zu verstehen, wenn sie zusätzlich visuell aufbereitet sind. Eine übersichtliche Infografik kann binnen Sekunden verstanden werden, Fließtexte hingegen müssen zuerst durchgelesen werden, bevor man ihren Inhalt auch nur erahnen kann.
Unser Gehirn ist seit jeher darauf getrimmt, die aktuelle Umgebung auf der Suche nach Nahrung und möglichen Gefahrenquellen schnell und zuverlässig zu erfassen. Visuelle Reize haben bis heute einen sehr starken Einfluss auf uns, da sie früher essenziell für das Überleben waren.

In der Gestaltung von Webseiten nutzt man diese evolutionär bedingte Eigenschaft des Gehirns. Die Aufmerksamkeit des Webseitenbesuchers wird gezielt auf diejenigen Bereiche gelenkt, die zuerst auffallen sollen. Wenn Nutzer sofort erkennen, wo man welche Informationen erhält, dann erzeugt das in ihnen ein Gefühl der Vertrautheit. Folglich verweilen sie länger auf der Seite. Webseitenbetreiber haben dann die Möglichkeit, Waren und Dienstleistungen ausführlicher vorzustellen.
Bilder erzeugen Emotionen. Eine gute Geschichte bleibt immer dann im Gedächtnis, wenn man ein besonderes Gefühl mit ihr verbindet. Durch den gezielten Einsatz von zum Thema passenden Fotos und Grafiken machen Sie den Nutzer neugierig und erzeugen das Verlangen, mehr zu erfahren. Genauere Informationen sollten dann in inhaltlich relevanten Texten bereitgestellt werden.

Herausforderung Internet

Bei der technischen Umsetzung von Webseiten ist es besonders wichtig, dass sie schnell aufrufbar sind und auf mobilen Endgeräten wenig Datenvolumen verbrauchen. Beträgt die Ladezeit einer Seite mehrere Sekunden, dann steigt das Risiko, dass Besucher sie bereits verlassen, bevor die Seiteninhalte angezeigt werden. Die besten Bilder nutzen also nichts, wenn sie nicht gesehen werden. Grafiken und Fotos haben enormen Einfluss auf die Ladezeiten. Je größer sie sind, desto später werden sie auf der Seite angezeigt.
Die Herausforderung ist es, den bestmöglichen Kompromiss zwischen Dateigröße und Bildqualität zu finden. Die Bildkomprimierung ist dabei von höchster Wichtigkeit, denn sie ermöglicht es, Bilder für bestimmte Einsatzzwecke zu optimieren.

Effiziente Bildkomprimierung

Zunächst muss man im Internet beachten, dass die Endgeräte unterschiedliche Bildschirmauflösungen besitzen können. Bevor Smartphones und Tablets auf den Markt kamen, betrug die standardmäßige Bildschirmauflösung 72 Pixel pro Zoll (auf Englisch Pixels Per Inch – PPI). Wurden Fotos für diese Auflösung optimiert, konnte man sich über eine einheitliche Anzeigequalität weitestgehend verlassen. Aktuell befinden wir uns jedoch in einer Übergangsphase zu deutlich höheren Pixeldichten bei Monitoren und Smartphone-Displays. Während ein älteres Gerät mit 72 PPI auflöst, erreichen andere über 300 oder sogar 400 PPI. Man muss sich also schon im Vorhinein überlegen, von welchen Geräten aus die meisten Zugriffe auf die Webseite zu erwarten sind. Einen einheitlichen Weg für alle Geräte gibt es derzeit nicht.

Glücklicherweise bieten alle gängigen Bildbearbeitungsprogramme Funktionen und Einstellungsmöglichkeiten an, um Fotos für das Web zu optimieren. In Photoshop können Sie sich in Echtzeit die Auswirkungen verschiedener Einstellungen anzeigen lassen. Auf diese Weise lässt sich schnell der ideale Kompromiss zwischen Komprimierung und Qualität ermitteln.
Eine weitere Möglichkeit der Bildoptimierung ist die dynamische Bildskalierung. In Content-Management-Systemen wie WordPress kann man mittlerweile einstellen, dass je nach Anzeigegerät unterschiedlich hoch aufgelöste Bilddateien in die Webseite geladen werden. Auf Smartphones können Bilder stärker komprimiert werden als auf großen Monitoren und trotzdem qualitativ hochwertig angezeigt werden. Das spart gerade das beim mobilen Surfen so wichtige Datenvolumen des Nutzers und verkürzt die Ladezeit.
Kennt man die Methoden der Bildkomprimierung und weiß diese effizient einzusetzen, dann ermöglicht man den Nutzern die größtmögliche Anzeigequalität und Performance auf seiner Webseite.

Weitere Beiträge dieser SerieErfolgreiche Tipps, um die Conversion Rate zu steigern »

Diesen Beitrag bewerten

0 Kommentare

Dein Kommentar

Möchtest du mitdiskutieren?
Fühl dich frei, beizutragen!

Schreibe einen Kommentar

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

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.