Как определя браузърът коя изображение да зареди?

Браузърът определя, че е необходимо да зареди изображение при парсиране на HTML документа. Когато анализаторът срещне таговете <img>, <picture> или атрибута background-image в CSS, той разбира, че трябва да направи заявка за получаване на ресурса (файл с изображение), посочен в атрибутите src, srcset, data или в CSS правилото URL.

Процесът включва:

1. Парсиране на HTML/CSS: Браузърът чете и анализира ред по ред HTML кода. При откриване на тагове <img>, <picture> с source или CSS правила с background-image, той извлича URL на изображението.
2. Създаване на възел в DOM/CSSOM: За всяко изображение се създава съответен възел в Document Object Model (DOM) или се определя правило в Cascading Style Sheets Object Model (CSSOM).
3. Формиране на заявка: Браузърът формира HTTP заявка към сървъра, посочен в URL на изображението. Заявката обикновено е тип GET.
4. Изпращане на заявката: Формираната заявка се изпраща към сървъра.
5. Получаване на отговор: Сървърът обработва заявката и изпраща отговор, съдържащ данните на изображението.
6. Декодиране и рендериране: Браузърът получава данните на изображението, ги декодира (например JPEG, PNG, GIF) и ги показва на съответното място на уеб страницата.

За <picture> и srcset, браузърът използва информация за устройството (размер на екрана, резолюция) и посочените медийни условия, за да определи кое изображение от набора източници да зареди.

Пример HTML с таг <img>:

<img src="/images/logo.png" alt="Лого на компанията">

Пример CSS с background-image:

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