Wie bestimmt der Browser, welches Bild geladen werden soll?

Der Browser erkennt, dass ein Bild geladen werden muss, wenn er das HTML-Dokument parst. Wenn der Parser auf die Tags <img>, <picture> oder das Attribut background-image in CSS stößt, versteht er, dass eine Anfrage zum Abrufen der Ressource (Bilddatei) gestellt werden muss, die in den Attributen src, srcset, data oder in der CSS-Regel URL angegeben ist.

Der Prozess umfasst:

1. HTML/CSS-Parsing: Der Browser liest und analysiert Zeile für Zeile den HTML-Code. Bei der Entdeckung der Tags <img>, <picture> mit source oder CSS-Regeln mit background-image extrahiert er die Bild-URL.
2. Erstellung eines Knotens in DOM/CSSOM: Für jedes Bild wird ein entsprechender Knoten im Document Object Model (DOM) oder eine Regel im Cascading Style Sheets Object Model (CSSOM) erstellt.
3. Erstellung der Anfrage: Der Browser formt eine HTTP-Anfrage an den im Bild-URL angegebenen Server. Die Anfrage ist in der Regel vom Typ GET.
4. Senden der Anfrage: Die erstellte Anfrage wird an den Server gesendet.
5. Empfang der Antwort: Der Server verarbeitet die Anfrage und sendet eine Antwort, die die Bilddaten enthält.
6. Decodierung und Rendering: Der Browser erhält die Bilddaten, decodiert sie (z.B. JPEG, PNG, GIF) und zeigt sie an der entsprechenden Stelle der Webseite an.

Für <picture> und srcset verwendet der Browser Informationen über das Gerät (Bildschirmgröße, Auflösung) und die angegebenen Medienbedingungen, um zu bestimmen, welches Bild aus dem Quellen-Set geladen werden soll.

Beispiel HTML mit <img>-Tag:

<img src="/images/logo.png" alt="Firmenlogo">

Beispiel CSS mit background-image:

.header {
  background-image: url('/images/header-bg.jpg');
}