Responsive Bilder mit festen Höhen auf unter­schiedlichen Display­größen

In der Praxis stolpern wir häufig über ein wiederkehrendes Problem: die responsive Darstellung von Bildern mit festen oder prozentualen Höhen.

Das Problem

Häufig soll beispielsweise ein Hero-Teaser oder ein vollflächiges Bild auf einer Website zwar groß zu sehen sein - das Bild in seinem vollen Seitenverhältnis sprengt dann allerdings den Rahmen. Was tun?

Die naheliegende Lösung ist es, das Bild auf eine maximale Größe zu beschränken. Wenn das Bild jedoch vollflächig zu sehen sein soll, haben wir ein Problem. Im folgenden schauen wir uns drei Displaygrößen mit unterschiedlichen Pixelgrößen an und demonstrieren, wie ein vollflächiges Bild sich verhält und welche Anteile des Bildes beschnitten werden.

• Desktop-Rechner mit 27 Zoll Bildschirmdiagonale und einer Auflösung von 2.560×1.440 Pixeln
• Laptop mit 15 Zoll Bildschirmdiagonale und einer Auflösung von 1.440×900 Pixeln
• Tablet mit 11 Zoll Bildschirmdiagonale und einer Auflösung von 834×1.366 Pixeln
• Smartphone mit ca. 6 Zoll Display und einer Auflösung von 375×667 Pixeln

Darstellung auf einem 27 Zoll Monitor

Auf einem 27 Zoll Monitor müsste doch genug Platz sein, um viel von unserem Bild zu sehen.

Auf dem ersten Bild ist zu sehen, dass das Bild größer ist, als der Bildschirm. Es kommt also sogar bei voller Ausnutzung des Displays schon zu einem Beschnitt. Praxisnaher ist, dass der User einer Website sehen soll, dass "unten noch was kommt". Daher begrenzen wir im zweiten Bild die Bildhöhe auf 80% des Viewports.

Trotz des großen Bildschirms haben wir hier schon einen recht großen Beschnitt - es fehlen als Bildinformationen (im Bild dargestellt durch die roten Balken).

Begrenzung auf 500 Pixel Höhe

Deutlich mehr Informationen gehen verloren, wenn (wie beispielsweise für Slideshows üblich) die Höhe von Bildern auf beispielsweise 500 Pixel begrenzt wird.
So fehlt im Beispiel die Hälfte des Bildes - wobei das vollständige Bild in unserem Beispiel dennoch geladen wird. Ein Faktor, der für die Ladezeiten von Websites nicht unerheblich sein kann.

Darstellung auf einem 15 Zoll Laptop

Da das Seitenverhältnis des 15-Zoll-Displays dem des 27 Zoll Monitors sehr ähnlich ist, beobachten wir hier ein ähnliches Verhalten wie auf dem 27 Zoll Monitor. Der Beschnitt auf 500 Pixel Höhe ist jedoch deutlich weniger drastisch, da das Bild weniger Breite ausfüllen muss und so noch "Futter" hat.

Hochformat to the rescue!

Wenigstens im Hochformat sieht alles gut aus - denkt man im ersten Moment.

Doch auch hier lauern Falltüren. Sobald die Bildgröße auf eine prozentuale oder Pixel-Höhe begrenzt wird, haben wir es wieder mit einem Bildbeschnitt zu tun. Tückischerweise wird das Bild bei 80% der Viewport-Höhe links und rechts beschnitten (da wir einen relativ hohen Bildschirm haben), bei 500 Pixeln Höhe allerdings wieder oben und unten (da das Bild bei 500 Pixel Höhe nicht mehr auf 100% Breite füllend wäre).

Darstellung auf dem Smartphone

Wieder analog zum Tablet im Hochformat verhält sich das Bild in voller Größe auf dem Smartphone. Wobei hier die volle Größe sogar ein wenig verloren wirkt und der Eyecatcher-Effekt des Bildes, der den Blick in die Mitte zieht, fast verloren geht.

Im Gegensatz zum Tablet wird das Bild sowohl in 80% Viewport-Höhe, als auch in 500 Pixeln Höhe links und rechts deutlich beschnitten, da das Smartphone in einem deutliche ausgeprägteren Hochformat daherkommt.

Analyse

Mehrere Faktoren spielen hier zusammen. Es gibt keine rein technische CSS-Lösung.

• Es muss beachtet werden, dass jedes Bild einen "Hotspot" hat, der (fast) immer zu sehen ist. Je näher es an den Rand des Bildes geht, desto wahrscheinlicher wird es, dass das Bild auf irgendeinem Display nicht vollständig zu sehen ist.
• Diese Probleme bestehen immer - es gibt also keine perfekte Bildgröße, die immer funktionieren würde.

Lösungen

Was tun?

• Inhaltlich: die hier betrachteten Probleme bei der Auswahl eines Bildes beachten.
• Technisch: es ist sinnvoll, für große und kleine Displays zwei unterschiedliche Bilder hochzuladen. Ein sinnvoller Breakpoint liegt um ca. 800 Pixel Breite. Darunter wird ein eher quadratisches Bild angezeigt, darüber ein Bild im Landscape-Format. Zwei Probleme werden so minimiert: die Bildgröße auf mobilen Geräten kann reduziert werden und der sichtbare Bereiche wird auf allen Geräten maximiert (wir haben also weniger Verlust).
• Ein weiterer Vorteil beim Verwenden von zwei Bildern ist, dass man den gewünschten Ausschnitt anpassen kann wie im Bild unten.
• Sinnvoll ist es auch, Bilder für große Bildschirme auf eine Maximalbreite zu begrenzen. Diese sind dann nicht mehr vollflächig, dafür wird jedoch mehr "echter" Inhalt des Bildes gezeigt.

Hinweise:

• die tatsächlichen Pixel der gezeigten Geräte sind höher, wir rechnen aber der Einfachheit halber in "angezeigten" Pixeln auf einer Website @1x.
• der Einfachheit halber betrachten wir die volle Displaygröße - in der Praxis gibt es hier unzählige weitere Konfigurationen, da Browserleisten, -fenster, -Plug-Ins, etc. den tatsächlichen Platz für die Website reduzieren können.

Copyright-Hinweise:

• Die Geräte-Mockups stammen von: Hintergrund Vektor erstellt von rawpixel.com - de.freepik.com
• Das Foto von Unsplash: Photo by Deconovo on Unsplash

Kurzer technischer Exkurs

Unser gezeigtes Bild wird als Hintergrund-Bild angezeigt und zentral ausgerichtet:

<div class="background-image"></div>

Das CSS für das 500 Pixel hohe Bild sieht wie folgt aus:

.background-image {
  background-image: url(https://images.unsplash.com/photo-1617597837929-b34c021186f3);
  background-position: center center;
  height: 500px;
  width: 100%;
}

Alternativ könnte das Bild auch als Image-Tag mit object-fit angelegt werden:

<img src="https://images.unsplash.com/photo-1617597837929-b34c021186f3" alt="">

CSS:

img {
  object-fit: cover;
  object-position: center center;
  height: 500px;
  width: 100%;
}