Bilder schneller laden mit neuen HTML-Elementen

5 Tipps für Responsive Images mit HTML
Kommentare

„Responsive“ ist weitaus mehr als ein leeres Buzzword im Webdesign. Es geht um Websites, die auf allen Devices gut aussehen und bequem für Nutzer verwendbar sind, aber auch um eine angenehme Ladezeit – und die hängt ganz zentral von den Bildern ab. Mit einer einfachen Verkleinerung von Grafiken ist es hier aber noch lange nicht getan. Das neue HTML-Element <picture> sowie einige Ergänzungen für das <img>-Element helfen nun dabei, inline Images leichter Responsive zu gestalten.

Die HTML-Ebene einer Website war bisher nicht unbedingt die wichtigste Schnittstelle für das Responsive Webdesign. Dafür ist es zu bequem und schon zu lange möglich, Bilder und andere Elemente per CSS an alle Devices anzupassen. In Zeiten des Pre-Loading von Bildern ist das aber keine optimale Lösung mehr. Immerhin beginnen Browser nun mit dem Laden von Bildern, bevor sie mit der CSS-Ebene fertig sind. Anpassungen an der zu ladenden Bildgröße kommen dadurch erst zu spät im Browser an, sodass die Ladezeiten trotz gut gestzter Media Querys hoch bleiben.

Mit HTML zur kürzeren Ladezeit

Wer weiß, wie die <picture>– und <img>-Elemente richtig benutzt werden, kann dieses Problem aber umgehen.

1. Tipp: Pixeldichte

Das neue Attribut srcset für das <img>-Element kann auf verschiedene Weisen verwendet werden. Die einfachste Nutzung besteht dabei darin, die Pixeldichte eines Bilds an den jeweiligen Bildschirm anzupassen. Die Bildgröße bleibt ansonsten erst einmal unverändert.

<img
src="ex-density-1x.jpg" alt="Density"
srcset="ex-density-2x.jpg 2x, ex-density-3x.jpg 3x">

Browser, die das srcset-Element nicht kennen, arbeiten automatisch mit dem bekannten src-Element; anderenfalls wählt der Browser über das neue Attribut die am besten geeignete Bildquelle aus. Dieses Vorgehen ist vor allem dazu geeignet, Bilder an hochauflösende Retina-Displays anzupassen. Auch für sehr kleine Dichten kann es sich lohnen, auf diesem Weg die Ladezeit zu reduzieren. Der Versuch, möglichst jede Pixeldichte zu erfassen, wird hingegen schnell mühsam, da jede davon einzeln aufgelistet werden muss.

API Summit 2017

Web APIs mit moderner Web-Technologie konsumieren

mit Rainer Stropek (software architects)

API First mit Swagger & Co.

mit Thilo Frotscher (Freiberufler)

2. Tipp: Breakpoints bestimmen

Bei der Wahl von Breakpoints für Bildquellen geht es um mehr als die Optik. Ladegröße und Usability sind genau so wichtig. Darum sollten Designer genau über diesen Aspekt nachdenken. Das Laden kleinerer Bilder spart zwar Traffic, kann aber auch dazu führen, dass Details verloren gehen, während größere Bilder in anderen Fällen gar nicht unbedingt notwendig sein müssen. Art Direction (siehe Tipp 4) kann hier ein hilfreicher Ansatz sein, um einen guten Kompromiss aus Dateigröße und der guten Darstellung relevanter Bildbereiche zu bekommen. Optimal in Sachen Ladezeit ist außerdem natürlich die möglichst genaue Anpassung der Bildquelle an die dargestellte Pixelzahl. Auch kommt es immer sehr auf die dargestellten Inhalte an – manche Bilder verkraften einen Qualitätsverlust besser als andere. Der Frage nach sinnvollen Breakpoints sollte also genug Zeit im Entwicklungsprozess eingeräumt werden.

3. Tipp: Bildgröße

Um verschiedenen Device-Größen zu entsprechen, ist es außerdem wichtig, variable Bildgrößen zu definieren. Auch das ist nun über das <img>-Element möglich:

<img
src="ex-width-400.jpg" alt="Width"
srcset="ex-width-200.jpg 200w,
ex-width-400.jpg 400w,
ex-width-800.jpg 800w,
ex-width-1200.jpg 1200w"
sizes="(min-width: 640px) 60vw,
(min-width: 800px) 50vw, 100vw,"
>

Die Angabe vw steht dabei für Viewport Width Unit, also die relative Größe des Bildes im jeweiligen Viewport. 100vw entspricht 100 %, 60vw 60 %. Die Breite des Bilds kann per min-width und max-width angegeben werden; die Länge relativ in vw, absolut oder über das CSS-Element calc. Länge und Breite werden ohne Trennung hintereinander genannt, zwischen verschiedene Größen wird ein Komma gesetzt. Hier fällt auch die Auflistung aller denkbaren Fälle weg – um nicht definierte Größen abzudecken, kann eine Länge ohne vorherige Breitenabgabe eingefügt werden.

Stellen Sie Ihre Fragen zu diesen oder anderen Themen unseren entwickler.de-Lesern oder beantworten Sie Fragen der anderen Leser.

4. Tipp: Art Direction

Bis zu einer bestimmten Bildschrimgröße mag es sinnvoll sein, Bilder einfach zu verkleinern, aber weiterhin vollständig anzuzeigen. Sobald aber eine gewisse Schwelle unterschritten wird, kann das aber zum Problem werden. Das Bild wird schlecht erkennbar, die wesentlichen Elemente gehen unter. Hier ist es deutlich nutzerfreundlicher, für kleine Devices nur noch einen bestimmten Bildausschnitt anzuzeigen – also ein eigenes Bild zu laden, das nur noch die relevanten Elemente zeigt.

Dazu wird das neue HTML-Element <picture> verwendet.

<picture>

<source media="(max-width: 800px)"
srcset="ex-focused-800.jpg 800w, ex-focused-1406.jpg 1406w"
sizes="(min-width: 530px) calc(100vw - 96px), 100vw">

<img alt="example"
src="ex-689.jpg"
srcset="ex-689.jpg 689w, ex-1378.jpg 1378w, f1-500.jpg 500w, ex-1000.jpg 1000w" sizes="(min-width: 1066px) 689px, calc(75vw - 137px)">

</picture>

Das <img>-Element muss in jedem Fall im <picture>-Element enthalten sein; die Angaben in <source> sind bindend für den Browser. Eine Entscheidung seitens des Browsers für eine andere Bildquelle aufgrund weiterer Elemente wird ausgeschlossen. Wenn keine passende Angabe in <source> gefunden wird, wird das <img>-Element verwendet. Die weitere Verarbeitung von srcset erfolgt wie in allen anderen Fällen auch; srcset kann also auch wie in den vorher genannten Beispielen definiert werden.

5. Tipp: Bildformat

Jpg, png, gif – das war es dann auch schon an Bildtypen, die in allen Browsern funktionieren. Insofern lassen die meisten Entwickler die Finger von anderen Bildformaten, auch wenn diese sich aufgrund geringerer Dateigrößen als vorteilhaft erweisen könnten. Das muss mit dem <picture>-Element aber nicht mehr sein; damit ist es nämlich möglich, verschiedene Dateitypen zu definieren. Kann ein Browser diese Bildart nicht verarbeiten, nutzt er das ja eh immer zusätzlich anzugebende <img>-Element.

<picture>
<source type="image/svg+xml" srcset="logo.xml">
<source type="image/webp" srcset="logo.webp">
<img src="logo.png" alt="Logo">
</picture>

Auch dieses Element kann wieder mit den bisher behandelten Attributen kombiniert werden.

CSS oder HTML?

Zwar ist CSS immer noch der Standard für responsive Design, da Media Queries doch noch mehr ermöglichen; auch bei hochauflösenden Bildern für Retina-Displays kann ein Blick auf die Möglichkeiten der entsprechenden Media Queries sinnvoll sein. Und das image-set()-Element war immerhin Vorbild für das neue srcset-Element. Doch gerade, wenn es um die Ladezeit geht, bieten sich die neuen HTML-Elemente an.

Aufmacherbild: Code syntax on a computer screen via Shutterstock.com /  Urheberrecht: photovibes

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -