Referenz:HTML/Attribute/srcset

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
Attribut srcset
Beschreibung ermöglicht mehrere Bildquellen zu laden
erlaubte Werte
default-Wert
anwendbar auf img, source (in einem picture-Element) (Unterschied Tag Element Attribut)
Browsersupport
  • Chrome
  • Firefox
  • Edge
  • Opera
  • Safari
Spezifikation W3c logo klein.gif srcset attribute
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.

Tipp
Beachten Sie: Die Angaben beziehen sich ausschließlich auf HTML5, zu früheren HTML-Versionen kann es deutliche Unterschiede geben.