Diese Demo ausprobieren
- Um die Website als Vorschau anzusehen, wählen Sie App ansehen und dann Vollbild
aus. - Aktualisieren Sie die App mit unterschiedlichen Browsergrößen. Beachten Sie, wie unterschiedlich die Bilder sind: Sie haben nicht nur unterschiedliche Größen, sondern auch unterschiedliche Zuschnitte und Seitenverhältnissen.
Was passiert hier?
Art Direction zeigt unterschiedliche Bilder auf unterschiedlichen Bildschirmgrößen an.
Bei einem responsiven Bild werden verschiedene Größen desselben Bildes geladen. Art Direction geht noch einen Schritt weiter und lädt je nach verwendetem Display völlig unterschiedliche Bilder.
Verwende Art Direction, um die visuelle Präsentation zu verbessern. Die verschiedenen Bildzuschnitte in dieser Demo sorgen beispielsweise dafür, dass der POI (die Blume) unabhängig vom Display immer im Detail angezeigt wird. Die Vorteile von Art Direction sind rein ästhetisch, gegenüber responsiven Bildern keine Leistungsverbesserung.
Code ansehen
- Den Art Direction-Code für diese Demo findest du unter
index.html.
Funktionsweise des Codes
In Art Direction werden die Tags <picture>, <source> und <img> verwendet.
Bild
Das <picture>-Tag bietet einen Wrapper für null oder mehr <source>-Tags und ein <image>-Tag.
source
Das Tag <source> gibt eine Medienressource an.
Der Browser verwendet das erste <source>-Tag mit einer Medienabfrage, die „true“ zurückgibt. Wenn keine der Medienabfragen übereinstimmt, lädt der Browser das von <img> angegebene Bild.
Tag eingefügt werden.
img
Das <img>-Tag sorgt dafür, dass dieser Code in Browsern funktioniert, die das <picture>-Tag nicht unterstützen.
Wenn ein Browser das <picture>-Tag nicht unterstützt, wird das durch <img> angegebene Image geladen.