srcset nennt mehrere Fassungen desselben Bildes mit ihren Breiten, damit der Browser die passende wählt.
- srcset
Attribut, das mehrere Fassungen desselben Bildes mit ihrer jeweiligen Pixelbreite nennt.
Beispiel: „Ein srcset überlässt dem Browser die Wahl der Fassung.“
Wie es notiert wird
<img src="/team-800.jpg"
srcset="/team-400.jpg 400w, /team-800.jpg 800w, /team-1600.jpg 1600w"
sizes="(min-width: 768px) 50vw, 100vw"
alt="Das Team" width="1600" height="1067">Das w nennt die tatsächliche Pixelbreite der Datei, nicht die Darstellungsgröße. Der Browser rechnet daraus zusammen mit sizes und der Bildschirmdichte, welche Datei er holt.
Was es bringt
Auf einem Telefon wird nicht die 1600 Pixel breite Datei geladen. Bei bildlastigen Seiten ist das der wirksamste einzelne Eingriff in die Ladezeit, oft mehrere Megabyte.