HTML/Attribute/srcset

Aus SELFHTML-Wiki
< HTML‎ | Attribute(Weitergeleitet von Srcset)
Wechseln zu: Navigation, Suche

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

Weblinks