<img> element - HTML Справочник

# 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"`

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