Jak prohlížeč určuje, kterou obrázek načíst?

Prohlížeč určuje, že je třeba načíst obrázek při parsování HTML dokumentu. Když parser narazí na značky <img>, <picture> nebo atribut background-image v CSS, chápe, že je třeba odeslat požadavek na získání zdroje (obrázkového souboru) uvedeného v atributech src, srcset, data nebo v CSS pravidle URL.

Proces zahrnuje:

Parsování HTML/CSS: Prohlížeč čte a analyzuje kód HTML řádek po řádku. Při detekci značek <img>, <picture> s source nebo CSS pravidel s background-image extrahuje URL obrázku.
Vytvoření uzlu v DOM/CSSOM: Pro každý obrázek je vytvořen odpovídající uzel v Document Object Model (DOM) nebo je definováno pravidlo v Cascading Style Sheets Object Model (CSSOM).
Vytvoření požadavku: Prohlížeč sestaví HTTP požadavek na server uvedený v URL obrázku. Tento požadavek je obvykle typu GET.
Odeslání požadavku: Vytvořený požadavek je odeslán na server.
Přijetí odpovědi: Server zpracuje požadavek a odešle odpověď obsahující data obrázku.
Dekódování a vykreslení: Prohlížeč obdrží data obrázku, dekóduje je (například JPEG, PNG, GIF) a zobrazí na příslušném místě webové stránky.

Pro <picture> a srcset používá prohlížeč informace o zařízení (velikost obrazovky, rozlišení) a uvedené mediální podmínky, aby určil, který zdroj obrázku načíst.

Příklad HTML s tagem <img>:

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

Příklad CSS s background-image:

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