Как браузер определяет, что необходимо загрузить изображение?

Браузер определяет, что необходимо загрузить изображение, при парсинге 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');
}