Responsive Images: Art Direction im Kreditantrags-Prozess

Antragsstrecke im Ratenkredit

Auch bei der Postbank kann man einen Privatkredit online beantragen. Naturgemäß ist das ein Prozess, der einige Zeit in Anspruch nimmt, da viele Formularfelder auszufüllen sind. Die Postbank hat das Mobile First umgesetzt und setzt neben dem Unveiling-Konzept¹ auch auf ein Bildmotiv, dass auf allen gängigen Endgeräten nicht nur gut aussieht, sondern auch schnell lädt. Und das schauen wir uns genauer an.

Im Showcase werfen wir einen Blick auf die technisch interessante Lösungen einer Website, damit du so etwas auch erstellen kannst.

Das Grundgerüst

Das Bildmotiv wird bei der Postbank mit dem Titel kombiniert. Auf Smartphones erscheint dieser unter dem Bild, auf größeren Bildschirmen wird er auf das Foto platziert.

Das Bild selbst ist als Picture-Element angelegt, das dem Browser alternative Versionen des Bildes anbietet. Das könnte für das Smartphone ein hochformatiges Bild sein und für den Desktop ein querformatiges mit unterschiedlichem Ausschnitt. Eine solche Optimierung nennt man Art Direction. Ziel ist es, dass der Browser stets das Bild lädt, das für das aktuelle Endgerät am besten geeignet ist.

Schauen wir uns den Code dafür einmal an. Zum besseren Verständnis habe ich diesen in Abschnitte unterteilt und erkläre diese nacheinander.

<div class="image-with-title">
  <h1>Schnell und einfach zu Ihrem Wunschkredit</h1>

  <picture>
    <!-- A: Große Bildschirme-->
    <source ../>

    <!-- B: Tablets-->
    <source ../>

    <!-- C: Smartphones-->
    <source ../>

    <!-- D: Fallback-->
    <img src="..." width="..." height="..." alt="...">
  </picture>
</div>

A: Große Bildschirme

In dem folgenden Code wird dem Browser über das <source>-Element und dessen srcset=""-Attribut mitgeteilt, dass das Bild image-790x280 geladen werden soll, wenn der Bildschirm mindestens 790 Pixel breit ist, was über das media=""-Attribut wie in CSS definiert wird. Entweder in der alten Schreibweise (min-width: 790px) oder in der neuen (width >= 790px).

<!-- A: Große Bildschirme-->
<source srcset="image-790x280.avif 790w" media="(min-width: 790px)" sizes="(min-width: 1060px) 1060px, 100vw" type="image/avif">

<source srcset="image-790x280.webp 790w" media="(min-width: 790px)" sizes="(min-width: 1060px) 1060px, 100vw" type="image/webp">

<source srcset="image-790x280.jpg 790w" media="(min-width: 790px)" sizes="(min-width: 1060px) 1060px, 100vw" type="image/jpeg">

Die Angabe 790w hinter dem Dateinamen informiert den Browser, dass dieses Bild tatsächlich 790 Pixel breit ist (w = width). Das sizes=""-Attribut definiert, wie groß das Bild auf dem Bildschirm dargestellt werden soll. In diesem Fall wird das Bild auf 1060 Pixel skaliert, wenn der Bildschirm mindestens 1060 Pixel breit ist. Ansonsten wird das Bild auf die volle Bildschirmbreite (100 % des Viewports) skaliert.

Dieses <source>-Element gibt es gleich dreimal. Entscheidener Unterschied ist die Dateiendung, sowie das das dazu passende Attribut type="". Zuerst wird ein sehr gut kompromiertes Bild im AVIF-Format deklariert, das kleiner ist als ein WebP-Bild ist, das wiederum kleiner ist als ein JPEG-Bild. Das wirkt sich auf die Ladezeit aus. Unterstützt der Browser also AVIF, lädt er das. Tut er das nicht, wird auf WebP zurückgegriffen. Und ist er auch dazu nicht in der Lage, wird das JPEG geladen. Auf der Seite Can I use erfährst du mehr darüber, welche Browser welche Bildformate unterstützten.

B: Tablets

Auch für Geräte in der Größenordnung eines Tablets gibt es drei <source>-Elemente. Hier wird das Bild image-440x200 geladen, wenn der Bildschirm mindestens 440 Pixel und maximal 789 Pixel breit ist. Das Bild hat eine Größe von 440 Pixel (440w) und wird auf die volle Bildschirmbreite skaliert (100vw).

<!-- B: Tablets-->
<source srcset="image-440x200.avif 440w" media="(min-width: 440px) and (max-width: 789px)" sizes="100vw" type="image/avif">

<source srcset="image-440x200.webp 440w" media="(min-width: 440px) and (max-width: 789px)" sizes="100vw" type="image/webp">

<source srcset="image-440x200.jpg 440w" media="(min-width: 440px) and (max-width: 789px)" sizes="100vw" type="image/jpeg">

C: Smartphones

Bei kleinen Geräten wie Smartphones, wird das Bild image-400x170 geladen, wenn der Bildschirm maximal 439 Pixel breit ist. Das 400 Pixel breite Bild wird auf die volle Bildschirmbreite skaliert.

<!-- C: Smartphones-->
<source srcset="image-400x170.avif 400w" media="(max-width: 439px)" sizes="100vw" type="image/avif">

<source srcset="image-400x170.webp 400w" media="(max-width: 439px)" sizes="100vw" type="image/webp">

<source srcset="image-400x170.jpg 400w" media="(max-width: 439px)" sizes="100vw" type="image/jpeg">

Der Browser geht hier also in jedem Abschnitt von oben nach unten alle Varianten durch und zeigt das Bild, das für die aktuelle Bildschirmgröße am besten geeignet ist.

D: Fallback

Erst wenn alle oben aufgeführten Eventualitäten für den Bildschirm nicht greifen, wird das Bild image-400x170.jpg geladen. Es ist damit quasi ein Fallback. Gleichzeitig – und das ist wichtig zu verstehen – ist das img-Element dasjenige, welches das Bild tatsächlich auch anzeigt. Auch dann, wenn der Browser eine andere Variante wählt.

<!-- Abschnitt D-->
<img src="image-400x170.jpg 400w" width="400" height="170" alt="...">

Über die Attribute width und height kann der Browser darüber hinaus das Seitenverhältnis berechnen und dem Bild genug Platz einräumen, bis es vollständig geladen wurde. Das Attribut alt gibt dem Browser an, was er textlich anzeigen soll, wenn das Bild nicht geladen werden kann. Dies sollte immer beschreibend sein.

Testen mit den Developer Tools

Welches Bild tatsächlich geladen wird, kannst du in den Developer Tools deines Browsers überprüfen. In Chrome öffnest du die Developer Tools mit F12 unter Windows und Cmd + Option + I unter macOS. Du wählst den Reiter Network aus und lädst die Seite über den Reload-Button des Browsers neu. Suche in der Spalte Name nach dem Bild. Die Dateiendung, sowie die dazugehörigen Spalte Type sollten nun dem Bild enstprechen, welches du für die aktuelle Bildschirmgröße (Viewport) definiert hattest.

Wenn du den Browser nun kleiner oder größer ziehst, kannst du beobachten, wie die anderen Bilder nachgeladen werden. Lädst du die Seite nun noch einmal neu, wird auch hier nur das Bild geladen, das für den aktuelle Viewport vorgesehen ist.

Demo zum Ausprobieren

In dem folgenden Codepen² habe ich das Bildmotiv in anderer Konstellation nachgebaut. Ich habe Bilder vorbereitet, die als Motiv die Größe und das Format anzeigen. So kannst du auch ohne Developer Tools nachvollziehen, wann welches Bild geladen wird. Öffne dazu das Codepen und ziehe das Browserfenster kleiner und größer.

Ich wünsche viel Spaß beim Ausprobieren!

• Verwendete Tags:
• html
• images
• showcase