# img

Определяет изображение, вставляемое на веб-страницу..

Пример: Скопировать

Изображение заката в бухте Халонг
<img src="/images/sunset.jpg" alt="Изображение заката в бухте Халонг">

Пример: Скопировать

Изображение заката в бухте Халонг
<!-- Для адаптивных изображений используйте srcset и sizes -->

<img src="/images/sunset-360.jpg"
  alt="Изображение заката в бухте Халонг"
  srcset="/images/sunset-360.jpg 360w,
          /images/sunset-720.jpg 720w,
          /images/sunset-1440.jpg 1440w>"
  sizes="(min-width: 800px) 720px, 360px">

src

URL-адрес, по которому размещено изображение.

Обязателен.

"/images/tiramisu.jpg"

Вы можете использовать относительный адрес URL.

"https://htmlwiki.ru/images/traffic.jpg"

Вы можете использовать абсолютный адрес URL.

alt

Альтернативный текст для описания изображения, если оно недоступно. Используется программами чтения с экрана.

Обязателен.

"Изображение человека, стоящего перед лодкой «Жемчужина дракона»."

Опишите картинку так, чтобы ее легко было представить.

srcset

Определяет список разных источников для одного и того же изображения. Браузер выберет наиболее подходящий для использования.

"/images/sunset-@2x.jpg 2x"

Вы можете определить дескриптор плотности пикселей, например 2x. В этом случае sunset-@2x.jpg имеет ширину 720px.

<img src="/images/sunset.jpg"
     srcset="/images/sunset-@2x.jpg 2x"
     alt="Изображение заката в бухте Халонг">

Браузер будет использовать либо sunset.jpg, либо sunset-@2x.jpg в зависимости от доступного места, плотности пикселей и т.д.

"/images/sunset-360.jpg 360w,
/images/sunset-720.jpg 720w,
/images/sunset-1440.jpg 1440w"

Вы можете использовать дескриптор ширины, например 360w. Это значение делится на один из исходных размеров (определяется в атрибуте sizes), чтобы получить плотность пикселей.

<img src="/images/sunset-360.jpg"
  alt="Изображение заката в бухте Халонг"
  srcset="/images/sunset-360.jpg 360w,
          /images/sunset-720.jpg 720w,
          /images/sunset-1440.jpg 1440w>"
  sizes="(min-width: 800px) 720px, 360px">

sizes

Определяет список различных источников размеров. Вы можете комбинировать каждый из них с медиа-запросом.

"(min-width: 800px) 1440px, 720px"

Браузер будет использовать изображение 1440px (определено в srcset), если область просмотра больше 800px.
В ином случае браузер будет использовать 720px.

<img src="/images/sunset-360.jpg"
  alt="Изображение заката в бухте Халонг"
  srcset="/images/sunset-360.jpg 360w,
          /images/sunset-720.jpg 720w,
          /images/sunset-1440.jpg 1440w>"
  sizes="(min-width: 800px) 720px, 360px">

height

Определяет высоту изображения.

"240"

Высота в пикселях.

width

Определяет ширину изображения.

"120"

Ширина в пикселях.