Jak przeglądarka określa, które zdjęcie należy załadować?

Przeglądarka określa, że konieczne jest załadowanie obrazu podczas parsowania dokumentu HTML. Gdy parser napotyka tagi <img>, <picture> lub atrybut background-image w CSS, rozumie, że musi wysłać żądanie w celu pobrania zasobu (pliku obrazu) wskazanego w atrybutach src, srcset, data lub w regule CSS URL.

Proces obejmuje:

1. Parsowanie HTML/CSS: Przeglądarka czyta i analizuje kod HTML linia po linii. Gdy wykryje tagi <img>, <picture> z source lub reguły CSS z background-image, wyciąga URL obrazu.
2. Tworzenie węzła w DOM/CSSOM: Dla każdego obrazu tworzony jest odpowiedni węzeł w Document Object Model (DOM) lub definiowana jest reguła w Cascading Style Sheets Object Model (CSSOM).
3. Tworzenie żądania: Przeglądarka formułuje żądanie HTTP do serwera wskazanego w URL obrazu. Żądanie zazwyczaj jest typu GET.
4. Wysyłanie żądania: Utworzone żądanie jest wysyłane do serwera.
5. Odbiór odpowiedzi: Serwer obsługuje żądanie i wysyła odpowiedź zawierającą dane obrazu.
6. Dekodowanie i renderowanie: Przeglądarka otrzymuje dane obrazu, dekoduje je (np. JPEG, PNG, GIF) i wyświetla w odpowiednim miejscu na stronie.

Dla <picture> i srcset, przeglądarka korzysta z informacji o urządzeniu (rozmiar ekranu, rozdzielczość) i warunków mediów, aby określić, który obraz z zestawu źródeł załadować.

Przykład HTML z tagiem <img>:

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

Przykład CSS z background-image:

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