Раз в неделю мы отправляем дайджест с самыми популярными статьями.

# img

Определяет картинку, вставленную на веб-страницу.

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

Picture of a Ha Long Bay sunset
<img src="https://atomcss.ru/htmlref/images/sunset.jpg" alt="Picture of a Ha Long Bay sunset">

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

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

<img src="https://atomcss.ru/htmlref/images/sunset-360.jpg"
  alt="Закат на заливе Халонг-Бей"
  srcset="/htmlref/images/sunset-360.jpg 360w,
          /htmlref/images/sunset-720.jpg 720w,
          /htmlref/images/sunset-1440.jpg 1440w>"
  sizes="(min-width: 800px) 720px, 360px">

src

URL-адрес картинки.

Обязательный аттрибут.

"/htmlref/images/tiramisu.jpg"

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

"https://atomcss.ru/htmlref/images/traffic.jpg"

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

alt

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

Обязательный аттрибут.

"Изображение человека, стоящего перед лодкой Дракона"

Описывает картинку если её нет.

srcset

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

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

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

<img src="https://atomcss.ru/htmlref/images/sunset.jpg"
     srcset="/htmlref/images/sunset-@2x.jpg 2x"
     alt="Закат на заливе Халонг-Бей">

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

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

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

<img src="https://atomcss.ru/htmlref/images/sunset-360.jpg"
  alt="Закат на заливе Халонг-Бей"
  srcset="/htmlref/images/sunset-360.jpg 360w,
          /htmlref/images/sunset-720.jpg 720w,
          /htmlref/images/sunset-1440.jpg 1440w>"
  sizes="(min-width: 800px) 720px, 360px">

sizes

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

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

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

<img src="https://atomcss.ru/htmlref/images/sunset-360.jpg"
  alt="Закат на заливе Халонг-Бей"
  srcset="/htmlref/images/sunset-360.jpg 360w,
          /htmlref/images/sunset-720.jpg 720w,
          /htmlref/images/sunset-1440.jpg 1440w>"
  sizes="(min-width: 800px) 720px, 360px">

height

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

"240"

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

width

Определяет ширину картинки.

"120"

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