Responsive Bilder und Art Direction

Responsive Bilder werden oft mit dem Attribut srcset implementiert. Das Attribut srcset ist eine durch Kommas getrennte Liste von Bilddateinamen und ihren Breiten- oder Dichtedeskriptoren.

Um Layoutverschiebungen zu verhindern, lege die Attribute width und height für <img>- und <source>-Tags fest, die srcset verwenden.

Dichtedeskriptoren

So erstellen Sie responsive Bilder mit Dichtedeskriptoren:

  • Alle in src und srcset aufgeführten Bilder sollten dasselbe Seitenverhältnis haben.
  • Legen Sie die Attribute width und height so fest, dass sie mit den Abmessungen des Bilds 1x übereinstimmen.
  • Das Attribut src sollte sich auf das Bild 1x beziehen.

Beschreibungen der Breite

So erstellen Sie responsive Bilder mit Breitendeskriptoren:

  • Alle in src und srcset aufgeführten Bilder müssen dasselbe Seitenverhältnis haben.
  • Die Attribute width und height sollten mit den Abmessungen des Fallback-Bilds übereinstimmen.
  • Passen Sie den Bildstil nach Bedarf an. Wenn Sie ohne CSS width und height für ein responsives Bild mit Breitendeskriptoren festlegen, wird das Bild immer in dieser festgelegten Größe gerendert. Dies gilt auch dann, wenn die unter srcset aufgeführten Bilder unterschiedliche Abmessungen haben. Dieses Verhalten ist möglicherweise nicht Ihren Wünschen. Wenn Sie Ihrem Bildstil width: 100%; height: auto; oder width: 100vw; height: auto; hinzufügen, können Sie das gewünschte visuelle Erscheinungsbild erreichen.

Bildelemente

So erstellen Sie responsive <picture>-Elemente:

  • Legen Sie die Attribute width und height für alle <source>-Tags fest. Die jeweiligen Werte für diese Attribute hängen davon ab, wie das <source>-Tag srcset verwendet.
  • Passen Sie das Bild an, indem Sie das entsprechende <img>-Tag gestalten. Das <source>-Tag ist ein leeres Element, sodass der Stil keine Auswirkungen hat.
  • Legen Sie die Attribute width und height im <img>-Tag fest. Diese Werte sollten der intrinsischen Größe des Fallback-Bildes entsprechen.

Beispiele

HTML

<!-- Using density descriptors -->
<img width="480" height="330"
    srcset="cat-1x.jpg, cat-2x.jpg 2x, cat-3x.jpg 3x"
    src="cat-1x.jpg"
    alt="Photo of a cat on a green background">
<!-- Using width descriptors -->    
<img width="256" height="128"
    srcset="dog-256w.jpg 256w, dog-512w.jpg 512w, dog-1028w.jpg 1028w"
    src="dog-256w.jpg"
    alt="Photo of a dog on a orange background">
<!-- Picture tag -->
<picture>
    <source media="(max-width: 720px)" width="600" height="300" srcset="newyork-rectangle.jpg" />
    <source media="(min-width: 721px)" width="600" height="600" srcset="newyork-square-1x.jpg, newyork-square-2x.jpg 2x, newyork-square-3x.jpg 3x" />
    <img src="newyork-rectangle.jpg" width="600" height="300" alt="Photo of the Empire State Building">
</picture>