Kuidas määrab brauser, millist pilti tuleb laadida?

Brauser määrab, et tuleb laadida pilti, kui HTML-dokumenti parsitakse. Kui parser kohtab <img>, <picture> või CSS-is background-image atribuuti, mõistab ta, et tuleb teha päring ressursi (pildifaili) saamiseks, kasutades src, srcset, data või URL-i CSS-reeglites.

Protsess hõlmab:

1. HTML/CSS-i parsimine: Brauser loeb ja analüüsib rida-realt HTML-koodi. Kui ta leiab <img>, <picture> või CSS-reeglid background-image, siis ta tõmbab välja pildi URL-i.
2. Dom-i / CSSOM-i sõlme loomine: Iga pildi jaoks luuakse vastav sõlm Document Object Modelis (DOM) või määratletakse reegel Cascading Style Sheets Object Modelis (CSSOM).
3. Päringu koostamine: Brauser koostab HTTP-päringu serverile, mille URL on pilt. Päring on tavaliselt GET-tüüpi.
4. Päringu saatmine: Koostatud päring saadetakse serverile.
5. Vastuse saamine: Server töötleb päringu ja saadab vastuse, mis sisaldab pildi andmeid.
6. Dekodeerimine ja kuvamine: Brauser saab pildi andmed, dekodeerib need (näiteks JPEG, PNG, GIF) ja kuvab need veebilehel vastaval kohal.

<picture> ja srcset puhul kasutab brauser seadme infot (ekraani suurus, resolutsioon) ja määratud meedia-tingimusi, et otsustada, millist pilti lähtekogustest laadida.

Näide HTML-st <img>-sildiga:

<img src="/images/logo.png" alt="Ettevõtte logo">

Näide CSS-is background-image-ga:

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