Signatur
Beschreibung
Die Eigenschaft sizes spiegelt das HTML-Attribut sizes eines <img>-Elements. Sie besteht aus einer kommagetrennten Liste von Quellgrößen. Jeder Eintrag enthält eine optionale Media Condition und eine Längenangabe, z. B. (max-width: 600px) 100vw. Der letzte Eintrag hat normalerweise keine Bedingung und gilt als Standardwert.
Sinnvoll ist sizes nur zusammen mit srcset und Breitenangaben (w-Deskriptoren). Der Browser nimmt die erste passende Bedingung und leitet daraus die voraussichtliche Anzeigebreite ab. Anhand dieser Breite und der Pixeldichte des Geräts wählt er aus srcset die passende Datei aus. Das passiert beim Vorabladen, also bevor CSS ausgewertet wird. Deshalb muss sizes die Breite angeben, die das Layout später tatsächlich ergibt.
Der Wert auto ist nur zusammen mit loading="lazy" erlaubt. Der Browser nimmt dann die tatsächlich gerenderte Breite des Bildes. Das geht, weil Lazy-Bilder ohnehin erst nach dem Layout geladen werden. Eine Liste wie auto, (max-width: 600px) 100vw, 50vw sorgt dafür, dass Browser ohne auto-Unterstützung auf die übrigen Angaben zurückfallen.
Wenn Sie sizes per JavaScript ändern, prüft der Browser die Bildauswahl erneut und lädt eventuell eine andere Datei. Das aktuell gewählte Bild steht in currentSrc.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $value | string | "" | Beim Setzen: kommagetrennte Liste aus [Media Condition] Länge (z. B. (min-width: 1024px) 33vw, 100vw) oder auto. Erlaubt sind CSS-Längen wie px, em, vw und calc(), jedoch keine Prozentwerte. |
Rückgabewert
sizes-Attributs als Zeichenkette. Fehlt das Attribut, ist es ein leerer String.Beispiele
Responsives Bild dynamisch erzeugen
const img = document.createElement('img');
img.srcset = 'hero-480.jpg 480w, hero-960.jpg 960w, hero-1920.jpg 1920w';
// Mobil volle Breite, ab 900px zwei Spalten mit Abstand
img.sizes = '(max-width: 899px) 100vw, calc(50vw - 2rem)';
img.src = 'hero-960.jpg'; // Fallback
img.alt = 'Titelbild';
document.body.append(img);
console.log(img.sizes);sizes="auto" für Lazy Loading mit Rückfallwert
const img = document.querySelector('img.gallery');
img.loading = 'lazy'; // auto ist nur bei lazy erlaubt
img.sizes = 'auto, (max-width: 600px) 100vw, 33vw';
img.addEventListener('load', () => {
console.log('Geladen:', img.currentSrc);
});sizes an geändertes Layout anpassen
const cards = document.querySelectorAll('.card img');
const toggle = document.querySelector('#grid-toggle');
toggle.addEventListener('change', (e) => {
const threeCols = e.target.checked;
for (const img of cards) {
// Neue Layoutbreite melden, damit der Browser eine passende Datei wählt
img.sizes = threeCols ? '(max-width: 700px) 100vw, 33vw' : '100vw';
}
});Attribut und Eigenschaft vergleichen
const img = new Image();
console.log(JSON.stringify(img.sizes));
img.setAttribute('sizes', '50vw');
console.log(img.sizes);// Wichtig · Fallstricke
- Nur mit
w-Deskriptoren wirksam: WennsrcsetDichteangaben wie2xverwendet oder ganz fehlt, hatsizeskeine Wirkung. - Keine Prozentwerte:
50%ist ungültig, weil der Bezugsrahmen beim Vorabladen noch nicht bekannt ist. Verwenden Sievwodercalc(). - Fehlt
sizes, obwohlsrcsetw-Deskriptoren enthält, nimmt der Browser100vwan. Kleine Bilder werden dann oft unnötig groß geladen. - Die Reihenfolge zählt: Es gilt die erste passende Media Condition. Allgemeine Bedingungen gehören deshalb ans Ende.
autogilt nur beiloading="lazy", sonst wird der Wert ignoriert. Die Unterstützung ist noch nicht vollständig: Chromium ab Version 126, andere Browser nach und nach. Geben Sie daher immer eine Rückfallliste an, z. B.auto, 100vw. Lazy-Bilder mitautobrauchen außerdem feste Maße (width/heightoder CSS), sonst ist die gerenderte Breite 0.- In
<picture>hat jedes<source>ein eigenessizes. Dassizesdes<img>gilt nur, wenn keine Quelle passt. sizeslegt nur fest, welche Datei geladen wird, nicht wie groß das Bild angezeigt wird. Die Anzeige steuern Sie per CSS.