Hogyan határozza meg a böngésző, hogy melyik képet kell betölteni?

A böngésző meghatározza, hogy a HTML-dokumentum elemzése során szükség van egy kép betöltésére. Amikor az elemző találkozik az <img>, <picture> tagekkel vagy a CSS-ben a background-image attribútummal, akkor érti, hogy kérés küldése szükséges a forrás (képfájl) beszerzéséhez, amelyet az src, srcset, data attribútumokban vagy a CSS URL szabályában adtak meg.

A folyamat a következő lépéseket tartalmazza:

1. HTML/CSS elemzése: A böngésző soronként olvassa és elemzi a HTML-kódot. Amikor észleli az <img>, <picture> tageket vagy a background-image CSS-szabályokat, kivonja a kép URL-jét.
2. Csúcs létrehozása a DOM/CSSOM-ban: Minden képhez egy megfelelő csúcs jön létre a Document Object Model (DOM) vagy a Cascading Style Sheets Object Model (CSSOM) rendszerében.
3. Kérés összeállítása: A böngésző HTTP-kérést formál a szerver felé, amely a kép URL-jében van megadva. Ez a kérés általában GET típusú.
4. Kérés küldése: A formált kérés elküldésre kerül a szervernek.
5. Válasz fogadása: A szerver feldolgozza a kérést és választ küld, amely a kép adatait tartalmazza.
6. Dekódolás és megjelenítés: A böngésző megkapja a kép adatait, dekódolja (például JPEG, PNG, GIF) és a weboldal megfelelő helyén megjeleníti.

A <picture> és srcset esetében a böngésző az eszköz (képernyőméret, felbontás) és a megadott médiahírek információit használva dönt arról, hogy melyik forrásból tölti be a képet.

Példa HTML-ben <img> taggel:

<img src="/images/logo.png" alt="Cég logója">

Példa CSS-ben background-image-el:

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