Bilder für alle Bildschirme

Ein Bild, das auf einem großen Monitor scharf aussieht, ist auf dem Handy Verschwendung: Der Browser lädt zwei Megabyte und zeigt davon ein Viertel. Umgekehrt sieht ein kleines Bild auf dem großen Schirm matschig aus. HTML löst das, indem du mehrere Varianten anbietest und der Browser wählt.

01 / 04Mehrere Größen mit srcset

<img
  src="/lernen/media/demo-600.jpg"
  srcset="/lernen/media/demo-600.jpg 600w, /lernen/media/demo-1200.jpg 1200w"
  sizes="100vw"
  alt="Demobild, das seine eigene Breite anzeigt"
  width="600"
  height="338"
>

Die Demobilder tragen ihre eigene Größe als Aufschrift. Zum Ausprobieren: Geh aufs Vollbild und schalt in der Viewport-Leiste zwischen Handy, Tablet und Laptop um. Nach jedem Wechsel neu laden. Das Neuladen gehört dazu, denn eine einmal geladene große Variante behält der Browser auch dann, wenn das Fenster danach schmaler wird.

Raten musst du dabei nicht: Im Reiter „Netzwerk“ steht der Name der Datei, die er geholt hat. Bei Laptop und Desktop ist das demo-1200.jpg. Ohne Vollbild, also so schmal, wie die Seite hier sonst steht, ist es auf einem gewöhnlichen Bildschirm demo-600.jpg; auf einem hochauflösenden kann auch dort schon die große Datei stehen, und warum, steht im nächsten Absatz.

srcset listet die verfügbaren Dateien mit ihrer echten Breite in Pixeln, gekennzeichnet mit w. Das ist keine Anweisung, sondern eine Auskunft: „Diese Datei ist 1200 Pixel breit.“

sizes sagt, wie breit das Bild im Layout dargestellt wird. Hier: immer die volle Breite des Fensters (100vw). Aus beiden Angaben rechnet der Browser aus, welche Datei er braucht, und bezieht dabei auch die Pixeldichte des Geräts ein.

Wichtig dabei: sizes ist eine Zusage über dein Layout, keine Anweisung an das Bild. Wie breit es wirklich dasteht, entscheidet dein CSS. Hier gibt es keins, deshalb bleibt das Bild durch width="600" immer 600 Pixel breit, egal was in sizes steht.

src bleibt als Rückfall stehen, für sehr alte Browser. Und alt, width und height gehören weiterhin dazu.

Der wichtige Punkt: Der Browser entscheidet. Du lieferst nur die Fakten. Deshalb funktioniert das auch auf Geräten, die es beim Schreiben der Seite noch nicht gab.

02 / 04Formate mit picture

<picture>
  <source srcset="/lernen/media/demo-600.webp" type="image/webp">
  <img
    src="/lernen/media/demo-600.jpg"
    alt="Demobild, das seine eigene Breite anzeigt"
    width="600"
    height="338"
  >
</picture>

Neuere Bildformate liefern bei gleicher Qualität deutlich kleinere Dateien. WebP versteht heute jeder Browser, AVIF spart noch einmal, ist aber nicht überall angekommen. Und ein Bild, das gar nicht angezeigt wird, ist schlechter als ein großes.

picture löst das. Es ist eine Klammer um mehrere Angebote:

• Jedes source nennt seine Datei in srcset und über type ihr Format. Achte auf den Attributnamen: Im picture heißt es srcset, nicht src. Ein source mit src übergeht der Browser stillschweigend, und du siehst nur das img. Beim Video ist es später genau umgekehrt.
• Das img am Ende ist der Rückfall und trägt weiterhin alt, src, width und height.

Der Browser geht die source von oben nach unten durch und nimmt die erste, die er versteht. Deshalb steht das modernste Format oben. Versteht er keines, landet er beim img.

Welche der beiden Dateien gewonnen hat, siehst du dem Bild nicht an: WebP und JPEG zeigen hier dasselbe Motiv. Der Reiter „Netzwerk“ sagt es dir. Dort steht demo-600.webp, und das JPEG taucht gar nicht erst auf, der Browser hat es nie angefragt.

Merk dir: Das img ist nicht optional. Ohne das img im picture wird gar nichts angezeigt, und der alt-Text lebt weiterhin dort und nicht am source.

03 / 04Anderer Ausschnitt je Bildschirm

<picture>
  <source media="(min-width: 700px)" srcset="/lernen/media/demo-1200.jpg">
  <img
    src="/lernen/media/demo-600.jpg"
    alt="Demobild, das seine eigene Breite anzeigt"
    width="600"
    height="338"
  >
</picture>

Der dritte Fall heißt Art Direction: nicht dieselbe Datei in anderer Größe, sondern ein anderer Bildausschnitt. Ein breites Panorama funktioniert auf dem Handy nicht, dort will man den Ausschnitt mit dem Motiv.

Dafür trägt das source ein media-Attribut mit einer Bedingung zur Fensterbreite. Trifft sie zu, nimmt der Browser diese Datei. Auch hier gilt: erste passende Regel gewinnt, das img ist der Rückfall.

Ehrlich zum Beispiel: Die beiden Demobilder unterscheiden sich nur in Größe und Farbe, nicht im Ausschnitt. Zu sehen ist hier deshalb der Wechsel selbst und nicht sein Zweck. Nachvollziehen kannst du ihn im Vollbild: Bei Handy holt der Browser demo-600.jpg, ab Tablet demo-1200.jpg, und der Reiter „Netzwerk“ schreibt beides mit. In einem echten Projekt lägen dort zwei Zuschnitte desselben Fotos, ein breiter für den Monitor und ein hoher fürs Handy.

04 / 04Und SVG?

Für Logos, Icons und Diagramme ist SVG oft die bessere Wahl als jedes Pixelformat: beliebig skalierbar, meist winzig, immer scharf. Eine SVG-Datei bindest du ganz normal als img ein, mit src und alt wie gewohnt. Fotos gehören dagegen weiterhin in JPEG, WebP oder AVIF.