Signatur
Beschreibung
Die Eigenschaft imageSrcset des Interfaces HTMLLinkElement spiegelt das HTML-Attribut imagesrcset wider. Ihr Wert ist ein String mit einem oder mehreren durch Kommas getrennten Bildkandidaten. Jeder Kandidat besteht aus einer URL und optional einem Breitendeskriptor (z. B. 800w) oder einem Pixeldichte-Deskriptor (z. B. 2x) – genau wie beim srcset-Attribut von <img>.
Gebraucht wird sie fast ausschließlich zusammen mit rel="preload" und as="image". So lassen sich responsive Bilder, etwa ein großes Hero-Bild (LCP-Element), vorladen: Der Browser wählt anhand von imagesrcset und imagesizes dieselbe Bildvariante, die später das <img> mit identischem srcset/sizes anfordert. Dadurch wird nichts doppelt geladen.
Verwendet man Breitendeskriptoren (w), sollte man zusätzlich imageSizes setzen. Ohne diese Angabe nimmt der Browser 100vw an. Die Eigenschaft lässt sich lesen und schreiben; ist das Attribut nicht vorhanden, liefert sie einen leeren String.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $value | string | "" | Beim Setzen: kommagetrennte Liste von Bildkandidaten, z. B. "bild-400.jpg 400w, bild-800.jpg 800w". Wird ins Attribut imagesrcset geschrieben. |
Rückgabewert
imagesrcset. Fehlt das Attribut, ist es ein leerer String.Beispiele
Wert eines vorhandenen Preload-Links auslesen
// HTML: <link id="hero-preload" rel="preload" as="image"
// href="hero-800.jpg"
// imagesrcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1600.jpg 1600w"
// imagesizes="100vw">
const link = document.getElementById('hero-preload');
console.log(link.imageSrcset);
console.log(link.imageSizes);Responsives Hero-Bild dynamisch vorladen
const preloadResponsiveImage = (srcset, sizes, fallback) => {
const link = document.createElement('link');
link.rel = 'preload';
link.as = 'image';
link.href = fallback; // für Browser ohne imagesrcset-Unterstützung
link.imageSrcset = srcset;
link.imageSizes = sizes;
document.head.append(link);
return link;
};
const l = preloadResponsiveImage(
'/img/banner-640.webp 640w, /img/banner-1280.webp 1280w',
'(max-width: 700px) 100vw, 700px',
'/img/banner-1280.webp'
);
console.log(l.getAttribute('imagesrcset'));Pixeldichte-Deskriptoren und Feature-Erkennung
const supportsImageSrcset = 'imageSrcset' in HTMLLinkElement.prototype;
const link = document.createElement('link');
link.rel = 'preload';
link.as = 'image';
if (supportsImageSrcset) {
link.imageSrcset = 'logo.png 1x, logo@2x.png 2x';
} else {
link.href = 'logo@2x.png';
}
document.head.append(link);
console.log(supportsImageSrcset, link.imageSrcset);// Wichtig · Fallstricke
- Nur mit
rel="preload"undas="image"wirksam: Bei anderen Link-Typen hat das Attribut keine Wirkung. - Werte müssen übereinstimmen:
imageSrcsetundimageSizesmüssen exakt zusrcset/sizesdes späteren<img>passen. Sonst wählt der Browser womöglich eine andere Variante und lädt das Bild doppelt. - Keine Validierung beim Setzen: Ein fehlerhafter String löst keinen Fehler aus. Ungültige Kandidaten ignoriert der Browser später einfach.
- Kommas in URLs: Kommas innerhalb einer URL können die Auswertung stören; solche URLs sollten kodiert werden (
%2C). - Kompatibilität: In Chromium ab Version 73 und in Firefox ab 78 verfügbar, in Safari erst ab 17.2. Ältere Browser ignorieren das Attribut. Setzt man zusätzlich
hrefals Rückfallwert, laden solche Browser aber ein festes Bild vor. Chromium wertethrefnicht aus, wennimagesrcsetvorhanden ist. - Soll das Vorladen noch vor dem Rendern greifen, gehört der Link möglichst früh ins statische HTML. Per JavaScript nachträglich eingefügte Preloads bringen deutlich weniger.