<img> - HTML елемент зображення

HTML-елемент <img> вбудовує зображення в документ. Це порожній елемент, що означає, що він не може мати дочірніх елементів або закриваючого тега.

Елемент <img> є одним з найважливіших елементів для візуального представлення контенту на веб-сторінках. Він вимагає принаймні двох атрибутів для коректної роботи: src для вказівки шляху до зображення та alt для надання альтернативного тексту.

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

HTML
<img src="path/to/image.jpg" alt="Опис зображення">

Атрибути

Цей тег може мати глобальні атрибути.

src

Обов’язковий атрибут, який вказує URL-адресу (шлях) до зображення.

alt

Обов’язковий атрибут, який надає текстовий опис зображення. Це важливо для доступності та SEO.

width

Визначає ширину зображення в CSS-пікселях. Вказування розмірів допомагає браузеру зарезервувати місце для зображення до його завантаження, запобігаючи зсуву макета.

height

Визначає висоту зображення в CSS-пікселях.

srcset

Список з одного або більше рядків, розділених комами, що вказують на можливі джерела зображень для браузера. Це дозволяє надавати різні версії зображення для різних розмірів екрана або щільності пікселів.

sizes

Список з одного або більше рядків, розділених комами, що визначають розміри зображення для різних умов макета. Використовується разом з srcset.

loading

Вказує, як браузер має завантажувати зображення. Можливі значення:

eager: завантажувати одразу
lazy: відкладене завантаження

decoding

Підказка для браузера щодо того, як декодувати зображення. Можливі значення: sync (синхронно), async (асинхронно), auto (за замовчуванням).

crossorigin

Визначає, чи слід використовувати CORS при завантаженні зображення. Це необхідно, якщо зображення завантажується з іншого домену і ви плануєте взаємодіяти з ним через Canvas API.

ismap

Булевий атрибут, який вказує, що зображення є частиною серверної карти зображень.

usemap

Вказує на id елемента <map>, який визначає клієнтську карту зображень.

referrerpolicy

Визначає, яку інформацію про реферера надсилати під час завантаження зображення.

Технічне резюме

Категорія контенту	Потоковий контент, фразовий контент, вбудований контент, відчутний контент.
Дозволений вміст	Немає, це пустий елемент.
Пропуск тегів	Повинен мати початковий тег і не повинен мати кінцевого тегу.
Дозволені батьківські елементи	Будь-який елемент, що приймає вбудований контент.
Роль ARIA	Якщо `alt` не пустий або відсутній, тоді `img` Якщо `alt` пустий, тоді `presentation`
DOM інтерфейс	`HTMLImageElement`

Приклади використання

<img
  src="/static/forest.jpg"
  alt="Сонячний ліс з довгоми тінями"
  width="300">

Стилі за замовчуванням

CSS
img {
  display: inline-block;
}

Підтримка браузерів



`<img>`
`align`
`alt`
`aspect_ratio_computed_from_attributes`
`attributionsrc`
`border`
`crossorigin`
`decoding`
`fetchpriority`
`height`
`hspace`
`ismap`
`loading`
`longdesc`
`name`
`referrerpolicy`
`sizes`
`src`
`srcset`
`usemap`
`vspace`
`width`