Як браузер завантажує зображення, вказане в src?

HTMLJunior~2 хв читання

Коли браузер зустрічає елемент <img> в HTML, він виконує чітку послідовність дій, щоб завантажити і відобразити зображення.

Розберемо цей процес покроково:

1. Виявлення тега `<img>`

Під час парсингу HTML браузер зустрічає рядок на кшталт:

html

<img src="photo.jpg" alt="Фото природи">

Він додає в DOM (дерево елементів) вузол зображення і одразу починає завантаження ресурсу, вказаного в src.

2. Визначення шляху до файлу (`src`)

Браузер:

перевіряє, що вказано в атрибуті src;
якщо це відносний шлях (наприклад, images/pic.jpg), поєднує його з адресою поточної сторінки;
якщо це абсолютний URL (наприклад, https://site.com/pic.jpg), одразу робить запит за цією адресою.

Приклад:

javascript

Поточна сторінка: https://mysite.com/gallery/page.html
src="img/photo.jpg"
→ Завантажується: https://mysite.com/gallery/img/photo.jpg

3. Надсилання HTTP-запиту

Браузер надсилає окремий мережевий запит:

javascript

GET /gallery/img/photo.jpg HTTP/1.1
Host: mysite.com

Цей запит виконується паралельно з іншими (CSS, JS, шрифтами тощо).

4. Отримання і декодування зображення

Сервер повертає відповідь, наприклад:

javascript

Content-Type: image/jpeg
Content-Length: 51234

Потім браузер:

завантажує байти зображення;
декодує їх у пікселні дані (залежно від формату: JPG, PNG, WEBP тощо);
зберігає в кеш, щоб під час повторного звернення не завантажувати знову.

5. Відображення зображення на сторінці

Щойно зображення завантажено:

Браузер знає його розміри (ширину і висоту).
Перераховує макет (layout) сторінки.
Відображає зображення в потрібній позиції.

Якщо картинка ще не завантажена, браузер зарезервує під неї місце (якщо вказані width і height) або тимчасово покаже «порожній» простір.

6. Якщо завантаження не вдалося

Якщо:

файл не знайдено (404),
сталася помилка мережі,
або формат не підтримується,

тоді браузер:

показує альтернативний текст (alt), якщо він заданий;
або просто порожнє місце / значок «пошкодженого зображення».

Приклад:

html

<img src="wrong-path.jpg" alt="Фото недоступне">

7. Оптимізація (відкладене завантаження)

Якщо вказано:

html

<img src="big-photo.jpg" loading="lazy">

Браузер відкладе завантаження доти, доки зображення не опиниться у видимій області екрана. Це економить трафік і пришвидшує рендеринг сторінки.

Підсумок (коротко):

Етап	Що робить браузер
1	Знаходить `<img>` під час читання HTML
2	Читає `src`, визначає шлях
3	Надсилає HTTP-запит за файлом
4	Отримує і декодує зображення
5	Відображає його в макеті
6	У разі помилки показує `alt`
7	(опційно) відкладає завантаження при `loading="lazy"`

Простими словами: браузер бачить <img src="...">, одразу запитує картинку по мережі, розпаковує її і малює на екрані. Якщо файл не знайдено, показує текст з alt.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.