Що робить елемент <img> в HTML?

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

Елемент <img> використовується для вставки зображення на веб-сторінку. Він не має закривного тега і підключає картинку за посиланням з інтернету або з файлів сайту.

1. Найпростіший приклад

html

<img src="cat.jpg" alt="Кіт на підвіконні">

Що тут відбувається:

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

Браузер завантажить і покаже файл cat.jpg прямо на сторінці.

2. Основні атрибути `<img>`

Атрибут	Призначення	Приклад
`src`	Шлях до зображення (обов'язковий)	`src="images/photo.png"`
`alt`	Текст-опис, якщо зображення не відображається	`alt="Фото профілю"`
`width`	Ширина зображення (у пікселях або %)	`width="200"`
`height`	Висота зображення	`height="150"`
`title`	Спливаюча підказка при наведенні	`title="Клацніть для збільшення"`
`loading`	Оптимізація завантаження (`lazy`, `eager`)	`loading="lazy"`

3. Шляхи до зображення

Відносний шлях (якщо файл у папці проєкту):

html

<img src="img/pic.jpg" alt="Фото">

Абсолютний шлях (якщо картинка з іншого сайту):

html

<img src="https://example.com/image.jpg" alt="Фото">

4. Приклад з розмірами та описом

html

<img src="mountains.jpg" alt="Гори на світанку" width="400" height="250">

Зображення буде відображатися із зазначеними розмірами (400×250 пікселів).

5. Атрибут `alt`: навіщо він важливий

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

Приклад:

html

<img src="avatar.png" alt="Фотографія користувача">

Якщо файл не знайдено, браузер покаже:

javascript

Фотографія користувача

6. Атрибут `loading="lazy"`

Сучасні браузери можуть відкладати завантаження зображень, які ще не видно на екрані:

html

<img src="big-photo.jpg" alt="Пейзаж" loading="lazy">

Це пришвидшує завантаження сторінки.

7. Приклад із зовнішнім посиланням

html

<a href="https://example.com">
  <img src="logo.png" alt="Логотип компанії">
</a>

Зображення стає клікабельним посиланням.

Підсумок:

Властивість	Опис
Тег	`<img>` (непарний)
Призначення	Вставка зображення
Обов'язкові атрибути	`src`, `alt`
Часто використовувані	`width`, `height`, `title`, `loading`
Особливості	Не містить тексту, не має закривного тега

Простими словами: <img> - це «вікно» для картинки на сайті. src каже, де лежить зображення, а alt - що там має бути, якщо воно не завантажиться.

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

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

Premium

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