Kā pārlūkprogramma nosaka, kuru attēlu jāielādē?

Pārlūkprogramma nosaka, ka ir nepieciešams ielādēt attēlu, analizējot HTML dokumentu. Kad parsētājs sastop <img>, <picture> tagus vai CSS background-image atribūtu, tas saprot, ka ir jānosūta pieprasījums, lai iegūtu resursu (attēla failu), kas norādīts src, srcset, data vai CSS URL noteikumā.

Procesā ietilpst:

1. HTML/CSS analīze: Pārlūkprogramma lasa un analizē rindiņu pa rindiņai HTML kodu. Atklājot <img>, <picture> ar source vai CSS noteikumus ar background-image, tā izvelk attēla URL.
2. Koka izveide DOM/CSSOM: Katram attēlam tiek izveidots atbilstošs mezgls Document Object Model (DOM) vai tiek definēts noteikums Cascading Style Sheets Object Model (CSSOM).
3. Pieprasījuma veidošana: Pārlūkprogramma veido HTTP pieprasījumu uz serveri, kas norādīts attēla URL. Šis pieprasījums parasti ir GET tips.
4. Pieprasījuma nosūtīšana: Izveidotais pieprasījums tiek nosūtīts uz serveri.
5. Atbildes saņemšana: Serveris apstrādā pieprasījumu un nosūta atbildi, kas satur attēla datus.
6. Dekodēšana un attēlošana: Pārlūkprogramma saņem attēla datus, dekodē tos (piemēram, JPEG, PNG, GIF) un attēlo vietā, kur tas ir paredzēts lapā.

<picture> un srcset gadījumā, pārlūkprogramma izmanto ierīces (ekrāna izmērs, izšķirtspēja) un norādīto mediju nosacījumu informāciju, lai noteiktu, kuru avotu ielādēt.

HTML piemērs ar <img> tagu:

<img src="/images/logo.png" alt="Uzņēmuma logo">

CSS piemērs ar background-image:

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