Art Direction

Katie Hempenius
Katie Hempenius
X

Demo ausprobieren

  • Wenn Sie sich eine Vorschau der Website ansehen möchten, drücken Sie App ansehen und dann Vollbild Vollbild.
  • Laden Sie die App mit unterschiedlichen Browsergrößen neu. Die Bilder unterscheiden sich nicht nur in der Größe, sondern auch im Zuschnitt und im Seitenverhältnis.

Was passiert hier?

Bei der Art-Direction werden unterschiedliche Bilder auf unterschiedlichen Bildschirmgrößen angezeigt.

Bei einem responsiven Bild werden unterschiedliche Größen desselben Bildes geladen. Bei der Art Direction geht man noch einen Schritt weiter und lädt je nach Display völlig unterschiedliche Bilder.

Mit Art Direction können Sie die visuelle Präsentation verbessern. So sorgen die verschiedenen Bildausschnitte in dieser Demo dafür, dass der POI (die Blume) unabhängig vom Display immer detailliert zu sehen ist. Die Vorteile der Art-Direction sind rein ästhetisch. Sie bietet keinen Leistungsvorteil gegenüber responsiven Bildern.

Code ansehen

  • In index.html finden Sie den Art-Direction-Code für diese Demo.

So funktioniert der Code

Für die Art Direction werden die Tags <picture>, <source> und <img> verwendet.

bild

Das <picture>-Tag dient als Wrapper für null oder mehrere <source>-Tags und ein <image>-Tag.

source

Das <source>-Tag gibt eine Medienressource an.

Der Browser verwendet das erste <source>-Tag mit einer Mediaabfrage, die „wahr“ zurückgibt. Wenn keine der Media-Abfragen übereinstimmt, lädt der Browser das mit <img> angegebene Bild. -Tag zu laden.

img

Durch das <img>-Tag funktioniert dieser Code auch in Browsern, die das <picture>-Tag nicht unterstützen.

Wenn ein Browser das <picture>-Tag nicht unterstützt, wird das vom <img>-Tag angegebene Bild geladen.