Cum determină browserul ce imagine trebuie încărcată?

Browserul determină că este necesar să încarce o imagine în timpul analizării documentului HTML. Când parserul întâlnește etichetele <img>, <picture> sau atributul background-image în CSS, înțelege că trebuie să facă o solicitare pentru a obține resursa (fișierul imagine) specificată în atributele src, srcset, data sau în regula CSS URL.

Procesul include:

1. Analiza HTML/CSS: Browserul citește și analizează codul HTML linie cu linie. La detectarea etichetelor <img>, <picture> cu source sau reguli CSS cu background-image, extrage URL-ul imaginii.
2. Crearea unui nod în DOM/CSSOM: Pentru fiecare imagine, se creează un nod corespunzător în Document Object Model (DOM) sau se definește o regulă în Cascading Style Sheets Object Model (CSSOM).
3. Formarea solicitării: Browserul formează o solicitare HTTP către serverul indicat în URL-ul imaginii. Solicitarea este de obicei de tip GET.
4. Trimiterea solicitării: Solicitarea formată este trimisă către server.
5. Primirea răspunsului: Serverul procesează solicitarea și trimite un răspuns care conține datele imaginii.
6. Decodificarea și randarea: Browserul primește datele imaginii, le decodează (de exemplu, JPEG, PNG, GIF) și le afișează în locul corespunzător de pe pagina web.

Pentru <picture> și srcset, browserul utilizează informații despre dispozitiv (dimensiunea ecranului, rezoluție) și condițiile media specificate pentru a determina ce imagine din setul de surse să încarce.

Exemplu HTML cu eticheta <img>:

<img src="/images/logo.png" alt="Logo companie">

Exemplu CSS cu background-image:

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