Hoe bepaalt de browser welke afbeelding geladen moet worden?

De browser bepaalt dat het nodig is om een afbeelding te laden tijdens het parsen van het HTML-document. Wanneer de parser de tags <img>, <picture> of het attribuut background-image in CSS tegenkomt, begrijpt hij dat er een verzoek moet worden gedaan om de bron (afbeeldingsbestand) op te halen dat is gespecificeerd in de attributen src, srcset, data of in de CSS-regel URL.

Het proces omvat:

1. Parsing van HTML/CSS: De browser leest en analyseert regel voor regel de HTML-code. Bij het detecteren van de tags <img>, <picture> met source of CSS-regels met background-image, haalt hij de URL van de afbeelding op.
2. Aanmaken van een knoop in DOM/CSSOM: Voor elke afbeelding wordt een overeenkomstige knoop in het Document Object Model (DOM) of een regel in het Cascading Style Sheets Object Model (CSSOM) gemaakt.
3. Vorming van de aanvraag: De browser vormt een HTTP-verzoek naar de server die in de URL van de afbeelding is aangegeven. Het verzoek is meestal van het type GET.
4. Verzenden van het verzoek: Het gevormde verzoek wordt naar de server gestuurd.
5. Ontvangst van het antwoord: De server verwerkt het verzoek en stuurt een antwoord dat de afbeeldingsgegevens bevat.
6. Decodering en rendering: De browser ontvangt de afbeeldingsgegevens, decodeert ze (bijvoorbeeld JPEG, PNG, GIF) en toont ze op de juiste plek op de webpagina.

Voor <picture> en srcset gebruikt de browser informatie over het apparaat (schermgrootte, resolutie) en de vermelde media-voorwaarden om te bepalen welke afbeelding uit de bronset moet worden geladen.

Voorbeeld HTML met <img>-tag:

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

Voorbeeld CSS met background-image:

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