Signatur
Beschreibung
Die Eigenschaft sizes des HTMLSourceElement-Interfaces spiegelt das HTML-Attribut sizes eines <source>-Elements wider. Der Wert ist ein String mit einer kommagetrennten Liste von Einträgen der Form (Media-Bedingung) Breite, z. B. (max-width: 600px) 100vw, 50vw. Der letzte Eintrag ohne Bedingung gilt als Standardbreite.
Wirksam ist sizes nur, wenn das <source>-Element innerhalb eines <picture>-Elements steht und sein srcset Breitenangaben (w-Deskriptoren wie 800w) enthält. Der Browser ermittelt anhand von sizes die voraussichtliche Anzeigebreite des Bildes, verrechnet sie mit der Pixeldichte des Geräts und wählt daraufhin den passenden Kandidaten aus srcset. Das geschieht noch bevor CSS-Layout feststeht, deshalb ist die Angabe für den Preload-Scanner wichtig.
Innerhalb von <audio> und <video> hat sizes keine Bedeutung. Per JavaScript nutzt man die Eigenschaft vor allem, um responsive Bildquellen dynamisch zu erzeugen oder an ein geändertes Layout anzupassen (z. B. wenn die Sidebar eingeklappt wird).
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $value | string | "" | Beim Setzen: kommagetrennte Liste aus (Media-Bedingung) Länge-Paaren, letzter Eintrag optional ohne Bedingung. Längen z. B. in px, vw, em oder als calc(); Prozentwerte sind nicht erlaubt. |
Rückgabewert
sizes-Attributs bzw. ein leerer String, wenn das Attribut fehlt.Beispiele
Wert eines vorhandenen source-Elements auslesen
// HTML:
// <picture>
// <source id="hero-webp" type="image/webp"
// srcset="hero-480.webp 480w, hero-960.webp 960w"
// sizes="(max-width: 600px) 100vw, 50vw">
// <img src="hero-960.jpg" alt="Titelbild">
// </picture>
const source = document.getElementById('hero-webp');
console.log(source.sizes);Responsives picture-Element dynamisch erzeugen
const picture = document.createElement('picture');
const source = document.createElement('source');
source.type = 'image/avif';
source.srcset = 'produkt-400.avif 400w, produkt-800.avif 800w, produkt-1600.avif 1600w';
source.sizes = '(max-width: 700px) 100vw, (max-width: 1200px) 50vw, 600px';
const img = document.createElement('img');
img.src = 'produkt-800.jpg';
img.alt = 'Produktfoto';
picture.append(source, img);
document.querySelector('.galerie').append(picture);
console.log(source.getAttribute('sizes'));sizes an geändertes Layout anpassen
const toggle = document.querySelector('#sidebar-toggle');
const sources = document.querySelectorAll('.artikel picture source');
toggle.addEventListener('click', () => {
const eingeklappt = document.body.classList.toggle('sidebar-zu');
const neueGroesse = eingeklappt
? '(max-width: 800px) 100vw, 90vw'
: '(max-width: 800px) 100vw, calc(100vw - 320px)';
sources.forEach((s) => { s.sizes = neueGroesse; });
console.log('Neue sizes:', neueGroesse);
});// Wichtig · Fallstricke
- Nur mit
w-Deskriptoren sinnvoll: Enthältsrcsetnur Dichteangaben (1x,2x), wirdsizesignoriert. - Keine Prozentwerte:
50%ist ungültig; verwendevwodercalc(). Ungültige Einträge werden übersprungen, fehlt ein gültiger Wert, nimmt der Browser100vwan. - Reihenfolge zählt: Die erste zutreffende Media-Bedingung gewinnt, nicht die spezifischste.
- Nur im Kontext von
<picture>relevant; in<video>/<audio>wirkungslos. - Browser laden bei nachträglicher Änderung nicht zwingend ein kleineres Bild nach, wenn bereits ein größeres im Cache liegt.
sizes=\"auto\"(mitloading=\"lazy\") wird derzeit nur von Chromium-Browsern unterstützt und ist eigentlich für<img>gedacht.- Die Eigenschaft selbst wird von allen modernen Browsern unterstützt (Chrome 38+, Firefox 38+, Safari 9.1+, Edge 13+).