Ako určuje prehliadač, ktorú obrázok načíta?

Prehliadač určuje, že je potrebné načítať obrázok počas analýzy HTML dokumentu. Keď parser narazí na značky <img>, <picture> alebo atribút background-image v CSS, chápe, že je potrebné odoslať požiadavku na získanie zdroja (obrázkového súboru) uvedeného v atribútoch src, srcset, data alebo v CSS pravidle URL.

Proces zahŕňa:

1. Analýza HTML/CSS: Prehliadač číta a analyzuje kód HTML riadok po riadku. Pri detekcii značiek <img>, <picture> s source alebo CSS pravidiel s background-image extrahuje URL obrázka.
2. Vytvorenie uzla v DOM/CSSOM: Pre každý obrázok sa vytvorí zodpovedajúci uzol v Document Object Model (DOM) alebo sa definuje pravidlo v Cascading Style Sheets Object Model (CSSOM).
3. Formovanie požiadavky: Prehliadač formuje HTTP požiadavku na server uvedený v URL obrázka. Táto požiadavka je zvyčajne typu GET.
4. Odoslanie požiadavky: Vytvorená požiadavka sa odošle na server.
5. Prijatie odpovede: Server spracuje požiadavku a odošle odpoveď obsahujúcu údaje obrázka.
6. Dekódovanie a vykreslenie: Prehliadač prijíma údaje obrázka, ich dekóduje (napríklad JPEG, PNG, GIF) a zobrazuje na príslušnom mieste webovej stránky.

Pre <picture> a srcset používa prehliadač informácie o zariadení (veľkosť obrazovky, rozlíšenie) a uvedené mediálne podmienky na určenie, ktorý zdroj obrázka načítať.

Príklad HTML s tagom <img>:

<img src="/images/logo.png" alt="Logo spoločnosti">

Príklad CSS s background-image:

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