Bilder im responsive Webdesign

Für inhaltlich relevante Bilder sollte immer das img-Tag verwendet werden, da die Angaben in den Attributen „alt“ und „title“ relevant für Suchmaschinen und Webseitenbesucher sind. Grafiken, die rein der Optik dienen, sind gut im CSS-Code aufgehoben.

Was muss im Zuge der mobilen Optimierung einer Webseite beim Einsetzen von Bildern beachtet werden, damit sowohl Ladezeiten geringgehalten als auch gestochen scharfe Grafiken auf den unterschiedlichen Geräten (Smartphone, Tablet, Desktop) angezeigt werden?

Das responsive Webdesign ist längst nicht mehr wegzudenken. Warum dies so bedeutend ist, haben wir bereits in diesem Artikel beschrieben. Nun tauchen wir tiefer in die Materie ein und sehen uns an, was es bei diesen flexiblen Layouts in Bezug auf Bilder und Grafiken zu beachten gibt.

Ganz grundsätzlich gibt es zwei Methoden, Bilder auf einer Webseite darzustellen: Das direkte Einsetzen im HTML-Code über das img-Tag und die Einbindung als Hintergrund mithilfe von CSS:

Das richtige Dateiformat

Schauen wir uns im Folgenden die für die Anwendung im Web gängigen Dateiformate an. Jedes dieser Formate besitzt Vor- und Nachteile, weshalb es wichtig ist, für jede Grafik die bestmögliche Option zu wählen.

JPG/JPEG

In diesem Format können Bilder mit verhältnismäßig geringer Dateigröße abgespeichert werden. Nachteil: Es werden keine transparenten Bildbereiche unterstützt. Zu beachten ist, dass die Datei nicht zu stark komprimiert wird, da ansonsten Unschärfe entsteht.

Gute Wahl für Bilder, die auf der Webseite sehr groß dargestellt werden sollen und keine Transparenzen besitzen (z. B. Bilder für den Kopfberreich, Hintergrundgrafiken).

PNG

Das PNG wird unterteilt in die Formate PNG-8, -24 und -32. Für einfache Grafiken mit geringen Farbabstufungen und einfacher Transparenz eignet sich PNG-8. Sollen hingegen Bilder mit vielen Schattierungen dargestellt werden, muss die Wahl auf PNG-24 fallen. Bei komplexen Transparenzen ist eine ordentliche Darstellung nur mit PNG-32 möglich. Nachteil: Dateien im Format PNG-24 und ganz besonders PNG-32 kommen auf hohe Dateigrößen und sollten daher im Web nur in Ausnahmefällen verwendet werden – vor allem in großen Abmessungen.

Für Bilddateien, bei denen auf Transparenz nicht verzichtet werden kann und Logos, für die sich das SVG-Format nicht eignet.

GIF

Ähnlich wie PNG-8 bietet das GIF-Format eine geringe Farbtiefe. Darüber hinaus ist mit diesem Format nur die Darstellung einfacher Transparenzen möglich. Dafür lassen sich im GIF-Format Animationen abspeichern, weshalb es für diesen Anwendungsbereich ideal ist.

Für animierte Bilddateien.

SVG

Im Gegensatz zu den vorangegangenen pixelbasierten Formaten unterstützt SVG Vektoren, wodurch die Dateigröße deutlich reduziert werden kann. Vektorgrafiken lassen sich darüber hinaus beliebig skalieren und weisen in jeder Darstellungsgröße knackige Konturen auf. Auch einfache Transparenzen sind möglich und SVG-Dateien lassen sich mithilfe von CSS oder JavaScript animieren. Allerdings sind mit Vektoren nur wenige Details darstellbar, wodurch dieses Format für komplexe Bilder mit vielen Farbabstufungen und Schattierungen nicht in Frage kommt.

Dafür ist es ideal für Logos, Icons, Diagramme und alle vektorbasierten Grafiken.

WebP

Mit diesem Format ist es möglich, Grafiken zu erstellen, die eine 26 % geringere Dateigröße im Vergleich zu PNG-Dateien besitzen. Bei verlustbehafteter Komprimierung kann die Dateigröße verglichen mit JPG-Bilddateien sogar um bis zu 34 % reduziert werden. Dadurch lässt sich die Ladezeit der Webseite reduzieren, ohne auf gestochen scharfe Bilder verzichten zu müssen. Mittlerweile ist der Browser-Support ordentlich: Lediglich der Internet Explorer, Safari und der KaiOS kommen mit dem relativ jungen Format (noch) nicht zurecht.

Alternative für JPG- und PNG-Dateien.

Hier wird dem Browser mit dem Wert „w“ mitgeteilt, welche Breiten-Abmessungen die im srcset angegebenen Dateien besitzen. Dadurch wird der Browser bei einem Anzeigebereich, der kleiner/gleich 480px ist das smartphone.jpg anzeigen, bei kleiner/gleich 992px Anzeigebreite das tablet.jpg bis hin zum desktop-gross.jpg. Letzteres wird dargestellt, sobald der Anzeigebereich die 1440px in der Breite übersteigt.

Support: Alle Browser, außer IE und Opera Mini (hier wird das Bild aus „src“ geladen)

picture

Innerhalb des picture-Tag kommt das source-Tag zum Einsatz. Mit diesem kann im Attribut „media“ festgelegt werden, bei welchem Anzeigebereich das im srcset angegebene Bild angezeigt werden soll. In diesem Fall wird bis zu einer Anzeigebreite von 480px die Datei „smartphone“ angezeigt, darüber die „tablet“-Datei, bis schließlich ab 1440px „desktop-gross“ zum Einsatz kommt.

Mit dem „type“-Attribut wird dem Browser zudem mitgeteilt, um welches Bildformat es sich handelt. So würden hier die Browser, die WebP nicht unterstützen, die entsprechenden JPG-Dateien anzeigen.

Support: Alle Browser, außer IE und Opera Mini (hier wird das Bild aus dem img-Tag geladen)

CSS

Mithilfe von Medienabfragen lassen sich auch per CSS unterschiedliche Bildgrößen für die verschiedenen Anzeigebereiche anzeigen. Doch wie gesagt: Dies sollte nur für Schmuckelemente zum Einsatz kommen!

Fazit: Ladezeit und Anzeigequalität

Um die Ladezeiten von Webseiten möglichst gering zu halten, sollte bei Bildern stets die kleinstmögliche Datei Verwendung finden. Gleichzeitig soll der Internetauftritt möglichst hochwertig daherkommen, wozu auch knackige Bilder gehören. Mithilfe der Möglichkeiten in diesem Artikel sind diese beiden Wünsche im responsive Webdesign miteinander vereinbar. Dies ist für den Entwickler natürlich mit einem gewissen Mehraufwand verbunden, der sich im Endeffekt jedoch auszahlt.

Die richtigen Bildgrößen

Bei den Abmessungen kommt es in erster Linie darauf an, was dargestellt bzw. an welcher Stelle der Webseite das Bild verwendet werden soll. Auch kommt hier natürlich die Bildschirmauflösung zum Tragen.

Damit der Browser die für die jeweilige Bildschirmgröße passende Bildgröße wählen kann, ist es notwendig, Grafiken in unterschiedlichen Größen bereit zu stellen. So müssen auf einem mobilen Gerät nicht unnötig große Dateien abgerufen werden bzw. es entstehen in den Bilddateien keine Unschärfen durch Skalierung.

Die unterschiedlichen Bildgrößen für ein von der Höhe her schmales Bild, das über die gesamte Bildschirmbreite verläuft (z. B. als Bild im Kopfbereich) können demnach wie folgt aussehen:

• 480 px x 160 px für Smartphones
• 992 px x 200 px für Tablets
• 1440 px x 240 px für Desktop-Monitore
• 1920 px x 280 px für große Monitore

Im Gegensatz zum Entwickler der Seite ist dem Browser sowohl die Bildschirmauflösung als auch die Größe des Fensters bekannt, mit der der Nutzer auf Deiner Webseite unterwegs ist. Allerdings erkennt dieser nicht, welche Größen die Bilder besitzen. Demzufolge muss der Entwickler dem Browser den Hinweis geben, bei welcher Anzeigegröße dieser welche Datei anzeigen soll.

Der richtige Rahmen

Damit der Browser weiß, welche Datei er wann anzuzeigen hat, muss er entsprechende Anweisungen bekommen. Dafür kann das zu Beginn dieses Artikels gezeigte img-Tag um das Attribut „srcset“ ergänzt werden. Alternativ dazu ist die Verwendung des picture-Tag möglich, mit welchem verschiedene Bildtypen verwendet werden können – wie das WebP-Format. Für Browser, die dieses nicht unterstützen, wird ein alternatives Format bereitgestellt.

HTML

srcset mit w-Wert