НАЙКРАЩИЙ САЙТ ДЛЯ ВЕБ-РОЗРОБНИКІВ
HTML5. W3Schools українською. Повний довідник тегів

En

HTML Тег <img>


Приклад

Як вставити зображення:

<img src="../images/img_girl.jpg" alt="Дівчина в жакеті" width="500" height="600">
Спробуйте самі »

Більше прикладів "Спробуйте самі" далі.


Визначення та використання

Тег <img> використовується для вставлення зображення на сторінку HTML.

Зображення технічно не вставляються на вебсторінку; зображення пов’язані з вебсторінками. Тег <img> створює простір для зберігання зображення, на яке посилається.

Тег <img> має два обов’язкові атрибути (згідно специфікації HTML5):

  • src - Вказує шлях до зображення
  • alt - Визначає альтернативний текст для зображення, якщо зображення з якоїсь причини не може бути відображено

Примітка: Крім того, завжди вказуйте ширину та висоту зображення. Якщо ширину та висоту не вказано, сторінка може мерехтіти під час завантаження зображення.

Порада: Щоб пов’язати зображення з іншим документом, просто вставте тег <img> у тег <a> (див. приклад нижче).


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

Елемент
<img> Yes Yes Yes Yes Yes

Атрибути

Атрибут Значення Опис
alt text Визначає альтернативний текст для зображення
crossorigin anonymous
use-credentials
Дозволити використання зображень зі сторонніх сайтів, які дозволяють перехресний доступ, із canvas
height pixels Визначає висоту зображення
ismap ismap Визначає зображення як карту зображення на стороні сервера
loading eager
lazy
Визначає, чи має браузер завантажувати зображення негайно чи відкладати завантаження зображень до виконання певних умов
longdesc URL Вказує URL-адресу докладного опису зображення
referrerpolicy no-referrer
no-referrer-when-downgrade
origin
origin-when-cross-origin
unsafe-url
Визначає, яку інформацію про реферера використовувати під час отримання зображення
sizes sizes Визначає розміри зображень для різних макетів сторінок
src URL Вказує шлях до зображення
srcset URL-list Визначає список файлів зображень для використання в різних ситуаціях
usemap #mapname Визначає зображення як карту зображень на стороні клієнта
width pixels Визначає ширину зображення

Глобальні атрибути

Тег <img> також підтримує Глобальні атрибути в HTML.


Атрибути подій

Тег <img> також підтримує Атрибути подій в HTML.


Більше прикладів

Приклад

Вирівнювання зображення (за допомогою CSS):

<img src="../images/smiley.gif" alt="Smiley face" width="42" height="42" style="vertical-align:bottom">
<img src="../images/smiley.gif" alt="Smiley face" width="42" height="42" style="vertical-align:middle">
<img src="smiley.gif" alt="Smiley face" width="42" height="42" style="vertical-align:top">
<img src="../images/smiley.gif" alt="Smiley face" width="42" height="42" style="float:right">
<img src="../images/smiley.gif" alt="Smiley face" width="42" height="42" style="float:left">
Спробуйте самі »

Приклад

Додати рамку (межі) зображення (за допомогою CSS):

<img src="../images/smiley.gif" alt="Smiley face" width="42" height="42" style="border:5px solid black">
Спробуйте самі »

Приклад

Додайте ліве та праве поля до зображення (за допомогою CSS):

<img src="../images/smiley.gif" alt="Smiley face" width="42" height="42" style="vertical-align:middle;margin:0px 50px">
Спробуйте самі »

Приклад

Додайте верхнє та нижнє поля до зображення (за допомогою CSS):

<img src="../images/smiley.gif" alt="Smiley face" width="42" height="42" style="vertical-align:middle;margin:50px 0px">
Спробуйте самі »

Приклад

Як вставити зображення з іншої теки або з іншого вебсайту:

<img src="../images/stickman.gif" alt="Stickman" width="24" height="39">
<img src="https://www.w3schools.com/images/lamp.jpg" alt="Lamp" width="32" height="32">
Спробуйте самі »

Приклад

Як додати гіперпосилання до зображення:

<a href="https://www.w3schools.com">
<img src="w3html.gif" alt="W3Schools.com" width="100" height="132">
</a>
Спробуйте самі »

Приклад

Як створити карту зображення з регіонами, які можна натиснути. Кожен регіон є гіперпосиланням:

<img src="../images/workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>
Спробуйте самі »

Пов’язані сторінки

HTML підручник: HTML Зображення

HTML DOM довідник: Об’єкт Image

CSS підручник: Стилізація зображень


CSS налаштування за замовчуванням

Більшість браузерів будуть відображати елемент <img> за допомогою наступних значень за замовчуванням:

Приклад

img {
  display: inline-block;
}
Спробуйте самі »