Лежит девушка в тоге, в античном стиле и показывает рукой на браузер, где открыта картинка с девушкой в абстракции
Иллюстрация: Кира Кустова

<img>

Все любят картинки! Тег для вставки изображений на страницу.

Время чтения: 7 мин

Кратко

Секция статьи "Кратко"

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

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

Пример

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

        
        
          
        
      

Как пишется

Секция статьи "Как пишется"

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

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

Атрибуты

Секция статьи "Атрибуты"

src

Секция статьи "src"

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

alt

Секция статьи "alt"

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

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

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

width и height

Секция статьи "width и height"

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

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

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

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

srcset

Секция статьи "srcset"

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

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

        
        
          
        
      

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

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

sizes

Секция статьи "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.

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

loading

Секция статьи "loading"

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

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

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

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

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

decoding

Секция статьи "decoding"

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

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

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

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

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

Подсказки

Секция статьи "Подсказки"

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

💡 Всегда прописывайте 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;
}

        
        
          
        
      
Открыть демо в новой вкладке

На практике

Секция статьи "На практике"

Алёна Батицкая

Секция статьи "Алёна Батицкая"

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

Всё просто! Измени поведение картинки со строчного на блочное (block) или строчно-блочное (inline-block).

🛠 Частый дизайнерский приём — наложение поверх картинки цветного оверлея. И если для фоновой картинки это можно сделать при помощи псевдоэлемента, то с тегом <img> этот приём не сработает. Для этого элемента невозможно задать псевдоэлемент, так уж устроены замещаемые элементы, вроде <iframe>, <video>, <img> и других.

Чтобы реализовать оверлей, нужно будет завернуть картинку в дополнительный блок-обёртку и уже ей задать псевдоэлемент.

        
          
          <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%;
}

        
        
          
        
      
Открыть демо в новой вкладке