<img>

Тег <img> добавляет изображение на страницу.

Растровые, векторные — любые, поддержка форматов уже зависит от браузера.

        
          
          <img src="logo.png" alt="Логотип: собака, бегущая за мячом, изображено схематично">
          <img src="logo.png" alt="Логотип: собака, бегущая за мячом, изображено схематично">

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Тег <img> одиночный, у него нет закрывающей пары, контент в него не положить.

Ссылка на картинку и другие параметры задаются с помощью атрибутов.

Обязательный атрибут. В качестве значения указывается адрес картинки. Абсолютная или относительная ссылка до файла в любом допустимом формате.

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

Если забыть добавить атрибут, то скринридер попытается прочесть название файла: в лучшем случае это будет logo-large, но может быть и b764b84c, что не очень информативно. Если оставить значение атрибута пустым, то скринридер посчитает это изображение декоративным, а не контентным. Если вы добиваетесь именно этого — отлично, но тогда, возможно, стоит вставить его как фоновую картинку с помощью CSS.

Когда картинка по какой-то причине не загружается, браузеры отображают вместо неё альтернативный текст. Его даже можно стилизовать, если задать текстовые стили тегу <img>.

Подробнее о том, что записывать в alt, узнаете из «Как описывать картинки».

При помощи атрибутов width и height размеры изображения задаются прямо в HTML. Вы можете спросить: зачем так, ведь стиль нужно задавать с помощью CSS? Это нужно, чтобы избежать прыжков контента при загрузке страницы. Частая ситуация, когда картинка очень тяжёлая, а скорость интернета пользователя невысокая.

Если размеры не заданы в атрибутах, то <img> займёт место как строка текста. После загрузки картинка встанет на страницу, подвинув остальной контент. Пользователей обычно очень раздражают такие скачки. Они теряют место, где читали, а браузеру приходится перерисовывать страницу заново.

• width — ширина изображения в пикселях.
• height — высота изображения в пикселях.

При этом сами единицы измерения px указывать не нужно, браузер поймёт.

Самый простой способ предложить браузеру версию картинки с повышенным разрешением — указать её в атрибуте srcset:

        
          
          <img  src="logo.png"  srcset="logo@2x.png 2x"  alt="Логотип: собака, бегущая за мячом, изображено схематично">
          <img
  src="logo.png"
  srcset="logo@2x.png 2x"
  alt="Логотип: собака, бегущая за мячом, изображено схематично">

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Для этого не нужен целый элемент <picture>, достаточно атрибута.

Также атрибут srcset можно использовать в сочетании с атрибутом sizes, чтобы подсказать браузеру, какие варианты картинок есть, и помочь ему выбрать подходящие ситуации.

HTML даёт возможность загружать разные изображения в зависимости от разных условий. Частая ситуация: разные картинки под разные ширины экранов.

Можно делать это при помощи тега <picture>, а можно задать атрибуты srcset и sizes прямо в теге <img>.

• srcset — атрибут, принимающий несколько строк, разделённых запятой. Каждая строка должна содержать ссылку на картинку и указание фактической ширины картинки, значения разделяются пробелом. При этом после ширины ставится единица измерения w, а не px.
• sizes — атрибут, в котором указывается одно или несколько условий через запятую. Каждая строка состоит из медиавыражения и ширины блока для картинки, разделённых пробелом. Ширину блока для картинки можно указывать в любых единицах измерения, кроме процентов.

        
          
          <img    src="logo-large.png"    srcset="      logo-small.png 320w,      logo-medium.png 480w,      logo-large.png 800w"    sizes="      (max-width: 320px) 280px,      (max-width: 480px) 440px,      800px"    alt="Логотип: собака, бегущая за мячом, изображено схематично">
          <img
    src="logo-large.png"
    srcset="
      logo-small.png 320w,
      logo-medium.png 480w,
      logo-large.png 800w"
    sizes="
      (max-width: 320px) 280px,
      (max-width: 480px) 440px,
      800px"
    alt="Логотип: собака, бегущая за мячом, изображено схематично">

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Как браузер читает эти атрибуты:

1. Смотрит на ширину экрана устройства.
2. Пытается определить подходящее условие из списка в атрибуте sizes.
3. Смотрит на размер блока для изображения к этому медиавыражению.
4. Загружает то изображение из списка в srcset, которое имеет тот же размер, что и выбранный слот. Если такого нет, то загрузится первое изображение, которое больше размера выбранного слота.

При чтении кода из примера выше:

• На экранах от 0 до 320 пикселей загрузится logo-small.png.
• На экранах от 321 до 480 пикселей загрузится logo-medium.png.
• На всех прочих ширинах (или если браузер не поддерживает эти атрибуты) загрузится logo-large.png.

Браузер остановит проверку и чтение атрибутов, как только найдёт совпадение с условием. Поэтому располагайте условия от меньших к большим.

По умолчанию браузеры читают HTML-код страницы и ставят в загрузку все картинки, которые найдут в тегах <img>. Это хорошо для пользователя, ведь это контент страницы, и его не нужно будет ждать.

Но бывает, что картинок на странице много, и нам нужно как-то подсказать браузеру: вот эти пока не загружай, дождись, пока пользователь до них прокрутит — и можно начать загрузку. В общем, сам разберись. Удобно, правда?

Для этого можно указать поведение картинки в атрибуте loading:

• eager, то есть немедленно (по умолчанию, как если вообще не указывать атрибут);
• lazy, то есть лениво.

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

Перед тем, как показать загруженную картинку, браузер декодирует её — превращает набор байтов в набор пикселей по подходящим алгоритмам. Для больших изображений декодирование может занимать сотни миллисекунд, во время которых страница блокируется.

Если изображения не настолько важны, как текст вокруг них, можно попросить браузер декодировать картинки асинхронно. Тогда браузер приступит к их декодированию попозже, когда самое важное уже будет нарисовано. Или наоборот, можно попросить браузер: «Вот эта картинка очень важная, её нужно декодировать прямо сейчас».

Подсказки задаются в атрибуте decoding:

• async — декодировать асинхронно (можно попозже, когда получится);
• sync — синхронно (нужно прямо сейчас);
• auto — автоматически (браузер, решай сам).

Как и атрибут loading, атрибут decoding можно добавлять как прогрессивное улучшение, потому что в старых браузерах ничего не сломается, а в понимающих этот атрибут — станет лучше.

💡 Картинка может быть ссылкой: для этого оберните <img> в <a>.

💡 Всегда прописывайте alt для изображения, которое является частью контента и важно для понимания содержимого страницы. Если пользователь открывает страницу в скринридере, или он отключил изображения, или использует озвучивание текста с экрана, то альтернативный текст подскажет, что изображено на картинке. Для декоративных изображений лучше оставить атрибут alt пустым.

💡 Прописывайте ширину width и высоту height изображения, чтобы страница загружалась быстрее. Задавая значения этим атрибутам, не пишите px, только числа.

💡 Используйте атрибуты sizes и srcset, чтобы ваша картинка адаптировалась к разным устройствам. Получается красиво, а страница загружается быстрее.

Мы указали картинке её реальные размеры в атрибутах width и height, а потом задали ей резиновую ширину 50%, и чтобы высота была корректной, добавили height: auto — браузер сам подберёт подходящую высоту, он уже загрузил картинку и всё знает.

        
          
          <img  src="dogs.png"  width="1504" height="541"  alt="Три собаки: одна смотрит влево, вторая закрыла глаза и спит, третья смотрит вправо">
          <img
  src="dogs.png"
  width="1504" height="541"
  alt="Три собаки: одна смотрит влево, вторая закрыла глаза и спит, третья смотрит вправо">

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          img {  width: 50%;  height: auto;}
          img {
  width: 50%;
  height: auto;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          <div class="parent">  <img class="child" src="some-image.jpg" alt="Три собаки, все закрыли глаза и спят"></div>
          <div class="parent">
  <img class="child" src="some-image.jpg" alt="Три собаки, все закрыли глаза и спят">
</div>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          .parent {  position: relative;  width: 50%;}.parent::after {  content: "";  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;  background-color: rgb(255 134 48 / 20%);}.child {  display: block;  width: 100%;}
          .parent {
  position: relative;
  width: 50%;
}

.parent::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(255 134 48 / 20%);
}

.child {
  display: block;
  width: 100%;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

<img src="image.jpg" srcset="image-1x.jpg 1x, image-2x.jpg 2x, image-3x.jpg 3x" alt="Изображение">