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

<img>

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

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

Кратко

Скопировано

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

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

Пример

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

        
        
          
        
      

Как пишется

Скопировано

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

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

Атрибуты

Скопировано

src

Скопировано

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

alt

Скопировано

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

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

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

width и height

Скопировано

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

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

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

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

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

Скопировано

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

Скопировано

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

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

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

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

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

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

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

На собеседовании

Скопировано

Это партнёрская рубрика, мы выпускаем её совместно с сервисом онлайн-образования Яндекс Практикум. Приносите вопрос, на который не знаете ответа, в задачи, мы разложим всё по полочкам и опубликуем. Если знаете ответ, присылайте пулреквест на GitHub.

Это вопрос без ответа. Вы можете помочь! Почитайте о том, как контрибьютить в Доку.