Responsive Bilder und Art Direction

Responsive Bilder werden häufig mit dem Attribut srcset implementiert. Das Attribut srcset ist eine durch Kommas getrennte Liste mit Bilddateinamen und ihren Deskriptoren für Breite oder Dichte. Um Layoutverschiebungen zu vermeiden, legen Sie die Attribute width und height für <img>- und <source>-Tags fest, die srcset verwenden.

Für responsive Bilder mit Dichtedeskriptoren:

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

Bei responsiven Bildern mit Breitendeskriptoren:

  • Alle in src und srcset aufgeführten Bilder müssen dasselbe Seitenverhältnis haben.
  • Legen Sie die Attribute width und height so fest, dass sie mit den Abmessungen des Fallback-Bilds übereinstimmen.
  • Bildstil nach Bedarf anpassen:Wenn es keinen CSS-Stil gibt, wird das Bild immer in derselben Größe gerendert, wenn Sie width und height für ein responsives Bild mit Breitendeskriptoren festlegen. Das gilt auch dann, wenn die in srcset aufgeführten Bilder unterschiedliche Abmessungen haben. Dieses Verhalten ist möglicherweise nicht Ihren Vorstellungen. Wenn du deinem Bildstil width: 100%; height: auto; oder width: 100vw; height: auto; hinzufügst, erhältst du möglicherweise das gewünschte visuelle Erscheinungsbild.

Für <picture>-Tags:

  • Legen Sie die Attribute width und height für alle <source>-Tags fest: Die geeigneten Werte für width und height hängen davon ab, wie srcset im <source>-Tag verwendet wird. Informationen zur Arbeit mit srcset finden Sie oben.
  • Bildstil anpassen:Wenn Sie den Bildstil anpassen müssen, hat das Hinzufügen von Stilen zu einem <source>-Tag keine Auswirkungen. Ein <source>-Tag ist ein leeres Element. Stattdessen müssen Sie das entsprechende <img>-Tag gestalten.
  • Legen Sie die Attribute width und height im Tag <img> fest: Diese Werte sollten der intrinsischen Größe des Fallback-Bildes entsprechen.

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>