HTML/Attribute/srcset

Das srcset-Attribut ermöglicht es, mehrere Bildquellen zu laden. Der Browser sucht sich dann die passende Größe aus.

erlaubte Werte
default-Wert
erlaubt in	img, source (in einem picture-Element)
Browsersupport	Details bei caniuse.com: {{{caniuse}}}

Beispiel

<picture> 
  <source scrset="feuerwehr-1600.jpg, 
                  feuerwehr-1600hd.jpg 2x" 
          media="(min-width: 1024px)">
  <source scrset="feuerwehr-480.jpg, 
                  feuerwehr-480hd.jpg 2x" 
          media="(min-width: 480px)">
  <!---Fallback--->
  <img src="feuerwehr-480.jpg" alt="Feuerwehrfest 2014">
</picture>

In diesem Beispiel werden im srcset mehrere URL angeboten. Browser ohne srcset-Support zeigen das mit img referenzierte Bild an, für Retina-Displays werden alternative hochauflösende Bilder zur Verfügung gestellt.
Durch das media-Attribut werden die Bilder vom Browser ausgewählt.

Beachten Sie: Safari 9 unterstützt das srcset-Attribut bei img, aber nicht das im Codebeispiel verwendete picture-Element.

Siehe auch

• Bilder im Internet
  • Bilder im Internet/Einbindung mit img
  • Bilder im Internet/responsive Bilder mit picture

Weblinks

• W3C: srcset attribute