HTML/Attribute/sizes

Der Begriff sizes ist mehrdeutig.
sizes (engl. für Größen) gibt es:

• als HTML-Attribut sizes im link-Element
• als HTML-Attribut sizes bei img- und picture-Elementen
• Das ähnlich klingende HTML-Attribut size bestimmt die Anzeigegröße einer select-Liste.

Das sizes-Attribut ermöglicht es dem Browser zu entscheiden, welche Bildquellen der mit srcset angegebenen Alternativen nach Medienmerkmalen (media condition) er laden soll.

erlaubte Werte	eine durch Komma getrennten Liste von Medienmerkmalen (media condition), vorgeschlagenen Breitenangaben Beachte: Die letzte Breitenangabe darf kein Medienmerkmal besitzen.
default-Wert
erlaubt in	img, source (in einem picture-Element)

Beispiel

<img src="Monumentvalley-gross.jpg"
     alt="Panorama Monument Valley - Quelle Wikipedia"
     srcset="Monumentvalley-klein.jpg 600w, 
             Monumentvalley-mittel.jpg 1200w, 
             Monumentvalley-gross.jpg 1920w"
     sizes="(min-width: 50em) 33vw,
            (min-width: 25em) 50vw,
            100vw">

In diesem Beispiel werden mit dem sizes-Attribut die je nach Medien-Merkmal unterschiedliche Breite angegeben.

• Auf schmalen Bildschirmen nimmt die Grafik die gesamte Breite ein.
• Ab einer Viewport-Breite von 25em wird die Grafik auf 50% der Viewport-Breite begrenzt.
• Bei großen Bildschirmen ab 50em nimmt sie nur noch ein Drittel der Breite ein.

Beachte: Wenn das srcset-Attribut fehlt oder keine gültigen Angaben eines w-Werts hat, hat das sizes-Attribut keine Auswirkungen.

Empfehlung: Prozentangaben sind in einem <source-size-value> nicht erlaubt, um Verwirrung darüber zu vermeiden, worauf sich die Größe bezieht. Die Einheit "vw" kann für Größen relativ zur Breite des Ansichtsfensters verwendet werden.

Siehe auch

• Hero-Images – Große Bilder als Blickfang (Gestaltung mit sizes)

Weblinks

• W3C: sizes attribute
• WHATWG: sizes attribute

Liste der HTML-Attribute

• Medien-Attribute
  • alt
  • autoplay
  • buffered
  • controls
  • data
  • default
  • height
  • ismap
  • kind
  • label
  • loading
  • loop
  • mediagroup
  • muted
  • played
  • poster
  • preload
  • sandbox
  • sizes
  • src
  • srcdoc
  • srclang
  • srcset
  • type (embed, object, source)
  • volume
  • width
• Universalattribute
• Aria-Attribute
• Formular-Attribute
• Listen-Attribute
• Meta-Attribute
• Tabellen-Attribute
• Verweis-Attribute
• obsolet oder gelöscht