Kaip naršyklė nustato, kurį vaizdą reikia įkelti?

Naršyklė nustato, kad reikia įkelti vaizdą, analizuojant HTML dokumentą. Kai analizatorius susiduria su <img>, <picture> žymėmis arba CSS background-image atributu, jis supranta, kad reikia siųsti užklausą gauti išteklį (vaizdo failą), nurodytą src, srcset, data arba CSS URL taisyklėje.

Procesas apima:

1. HTML/CSS analizė: Naršyklė skaitydama ir analizuodama eilutę po eilutės HTML kodą, išskiria vaizdo URL, kai aptinka <img>, <picture> su source arba CSS background-image taisyklėse.
2. DOM/CSSOM mazgo kūrimas: Kiekvienam vaizdui sukuriamas atitinkamas mazgas Document Object Model (DOM) arba CSS Object Model (CSSOM).
3. Užklausos sudarymas: Naršyklė sudaro HTTP užklausą nurodytam serveryje, kuris yra vaizdo URL. Ši užklausa dažniausiai yra GET tipo.
4. Užklausos siuntimas: Sukurtas užklausas siunčia į serverį.
5. Atsakymo gavimas: Serveris apdoroja užklausą ir siunčia atsakymą, kuriame yra vaizdo duomenys.
6. Dekodavimas ir atvaizdavimas: Naršyklė gauna vaizdo duomenis, juos dekoduoja (pavyzdžiui, JPEG, PNG, GIF) ir rodo tinkamoje vietoje tinklalapyje.

<picture> ir srcset atveju, naršyklė naudoja įrenginio (ekrano dydis, raiška) ir nurodytų medijos sąlygų informaciją, kad nuspręstų, kurį šaltinį įkelti.

HTML pavyzdys su <img> žyme:

<img src="/images/logo.png" alt="Įmonės logotipas">

CSS pavyzdys su background-image:

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