Wenn Sie sich wundern, warum sich in der Slideshow auf Ihrer Homepage der Bildausschnitt ändert, wenn Sie den Browser in der Größe verändern, dann sollten Sie diesen Artikel aufmerksam studieren. Das Problem zeigt sich auch darin, dass manchmal nicht ganz optimale Ausschnitte des Bildes angezeigt werden. Ich hoffe, ich nehme nicht die Spannung weg, wenn ich sage: Es hat viel mit Seitenverhältnissen und responsive Websites zu tun.


Der Hintergrund

Bevor die Endgeräte mit verschiedenen Auflösungen ihren Siegeszug angetreten haben, war Webseitenentwicklung wesentlich einfacher als heute. Heutzutage haben Sie von winzigen Displays auf Smartphones älteren Baujahrs bis hin zu Arbeitsplätzen mit mehreren Großbildschirmen alles, was das Website-Besucherherz begehrt. Im besten Fall sollen die Webseiten überall gleich gut aussehen. 


Dieser Artikel nimmt sich einen kleinen Aspekt dieses Themas heraus und möchte Ihnen einen Einblick gewähren, wo die Grenzen bei der Darstellung von Bildern sind. Gerade das Problem, warum manchmal Bilder anders als erwartet dargestellt werden, ist für viele nicht ganz so einfach zu verstehen. Aber wir versuchen mal, es einfach anhand von Beispielen darzustellen.


Fall 1: Der Idealfall

Wenn Bilder auf einer Webseite dargestellt werden sollen, gibt es immer einen bestimmten Platz, der für das jeweilige Bild vorgesehen ist. Im Idealfall ist das Bild genauso groß wie der Platz, an dem es stehen soll. Dann gibt es keinerlei Probleme. Das ist einfach zu verstehen.


Fall 2: Der vorgesehene Platz ist kleiner oder größer (gleiches Seitenverhältnis)

Wenn der Platz, an dem das Bild angezeigt werden soll, kleiner oder größer als das Bild ist, aber der Platz das gleiche Seitenverhältnis wie das Bild hat, kann man durch Skalieren das Bild so anpassen, dass es genau passt. Im nachfolgenden Bild soll das Bild von dem Haus in die schwarzen Bereiche eingefügt werden.



Das das Bild das gleiche Seitenverhältnis wie die schwarzen Bereiche hat, kann man durch Verkleinern das Foto genau einpassen (siehe Bild):


Fall 3: Der vorgesehene Platz hat ein anderes Seitenverhältnis als das Foto

Das ist der Fall, der den meisten Leuten Probleme bereitet. Im nachstehenden Bild sieht man, welche 2 Möglichkeiten man hat. 

1. Möglichkeit: Man skaliert das Bild so, dass die Breite passt (siehe linkes Bild). Dann sieht man zwar alles, aber es entstehen Ränder oben und unten, die nicht ausgefüllt werden können.


2. Möglichkeit: Man skaliert das Bild so, dass die Höhe passt (siehe rechtes Bild). In diesem Fall muss etwas vom Bild weggeschnitten werden. Jetzt hat man keine ungefüllten Ränder mehr, dafür sieht man nicht das ganze Bild.


Sie als Webseitenbetreiber haben leider keinen Einfluss, welches Seitenverhältnis Ihr Webseitenbesucher bei sich hat. Wenn man die die Webseite in ein zu starres Konzept presst, damit das nicht passiert, hat man in der Regel ein größeres Problem: die gesamte Webseite wird dann nicht lesefreundlich dargestellt, weil der Platz für die übrigen Inhalte nicht genutzt wird.


Was bedeutet das jetzt?

Sie sehen, es ist gar nicht so einfach. Aber welche Folgen hat das jetzt? Nun, Sie müssen bei der Auswahl Ihrer Bilder darauf achten, dass sie immer noch gut aussehen, wenn sich der Bildausschnitt ändert. Das ist oftmals gar nicht so einfach, aber viele Landschaftsbilder eignen sich gut. Oder Bilder, bei denen sich die Hauptsache, also das Wichtigste, in der Bildmitte befindet. Wenn dann ein bisschen vom Rand weggeschnitten wird, ist das nicht so schlimm.


Dieses Problem stellt sich nur bei wirklich großen Bildern, die über die ganze Seite gehen, wie z.B. in der Slideshow. Sie sollten also bei den Slideshows keine Bilder verwenden, die Texte enthalten oder Personen, die sich an dern Rändern befinden. Abgeschnittene Texte oder Personen machen in der Regel keinen guten Eindruck.