Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Як браузер завантажує зображення, вказане в src?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)Коли браузер зустрічає елемент **`<img>`**, він виконує чітку послідовність дій: додає вузол у DOM, визначає шлях до файлу зі `src`, надсилає HTTP-запит, отримує та декодує зображення, а тоді відображає його в макеті сторінки. **Ключове:** якщо завантаження не вдається, браузер показує альтернативний текст з `alt` (якщо він заданий) або порожнє місце.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняКоли браузер зустрічає елемент `<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. Відображення зображення на сторінці Щойно зображення завантажено: 1. Браузер знає його **розміри** (ширину і висоту). 2. Перераховує **макет (layout)** сторінки. 3. Відображає зображення в потрібній позиції. Якщо картинка ще не завантажена, браузер **зарезервує під неї місце** (якщо вказані `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`.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.