HTMLImageElement: свойство srcset

Свойство HTMLImageElement srcset представляет собой строку, которая идентифицирует одну или несколько строк кандидатов изображения, разделенных запятыми (,), каждая из которых определяет ресурсы изображения, которые следует использовать в заданных обстоятельствах.

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

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

Строка, содержащая список, разделенный запятыми, одной или нескольких строк кандидатов изображения, которые будут использоваться при определении того, какой ресурс изображения следует отобразить внутри элемента <img>, представленного свойством HTMLImageElement.

Каждая строка кандидата изображения должна начинаться с допустимого URL, ссылающегося на неинтерактивный графический ресурс. За этим следует пробел, а затем описание условия, указывающее обстоятельства, при которых указанное изображение должно использоваться. Пробельные символы, кроме пробела, разделяющего URL и соответствующее описание условия, игнорируются; это включает как начальные, так и конечные пробелы, а также пробелы до или после каждой запятой.

Описание условия может иметь одну из двух форм:

• Чтобы указать, что ресурс изображения, указанный строкой кандидата изображения, должен использоваться при отображении изображения с определенной шириной в пикселях, предоставьте описание ширины, состоящее из числа, задающего эту ширину в пикселях, за которым следует строчная буква «w». Например, чтобы предоставить ресурс изображения, который следует использовать, когда рендереру требуется изображение шириной 450 пикселей, используйте строку описания ширины 450w. Указанная ширина должна быть положительным, отличным от нуля целым числом и обязательно должна соответствовать внутренней ширине указанного изображения. Когда srcset содержит описания «w», браузер использует эти описания вместе с атрибутом sizes для выбора ресурса.
• В качестве альтернативы, вы можете использовать описание плотности пикселей, которое указывает условие, при котором соответствующий ресурс изображения должен использоваться в качестве плотности пикселей дисплея. Это записывается путем указания плотности пикселей как положительного, отличного от нуля, числа с плавающей точкой, за которым следует строчная буква «x». Например, чтобы указать, что соответствующее изображение должно использоваться при плотности пикселей в два раза больше стандартной плотности, вы можете указать описание плотности пикселей 2x или 2.0x.

Если описание условия не указано (т.е., кандидат изображения содержит только URL), кандидату присваивается значение по умолчанию «1x».

"images/team-photo.jpg, images/team-photo-retina.jpg 2x"

Эта строка предоставляет версии изображения, используемые при стандартной плотности пикселей (без описания, присвоенной значение по умолчанию 1x) и в два раза больше этой плотности пикселей (2x).

Когда атрибут srcset элемента изображения содержит описания «x», браузеры также рассматривают URL в атрибуте src (если он присутствует) как кандидата и присваивают ему значение по умолчанию 1x.

"header640.png 640w, header960.png 960w, header1024.png 1024w"

Эта строка предоставляет версии заголовка изображения, которые следует использовать, когда рендерер пользовательского агента нуждается в изображении шириной 640 пикселей, 960 пикселей или 1024 пикселей.

Обратите внимание, что если любой ресурс в srcset описан с помощью описания «w», все ресурсы в этом srcset также должны быть описаны с помощью описания «w», и атрибут элемента изображения src не рассматривается как кандидат.

HTML ниже указывает, что ресурс изображения по умолчанию, содержащийся в атрибуте src, должен использоваться для отображения с плотностью 1x, а версия размером 400 пикселей (содержащаяся в srcset, и присвоенное описание 2x ) должна использоваться для отображения с плотностью 2x.

<div class="box">
  <img
    src="/en-US/docs/Web/HTML/Element/img/clock-demo-200px.png"
    alt="Clock"
    srcset="/en-US/docs/Web/HTML/Element/img/clock-demo-400px.png 2x" />
</div>

CSS задаёт изображение и его окружающую область размером 200 пикселей на 200 пикселей и простым бордюром вокруг него. Также задаётся атрибут word-break со значением break-all, чтобы указать браузеру переносить строку по ширине независимо от того, где необходимо произвести перенос.

.box {
  width: 200px;
  border: 2px solid rgb(150 150 150);
  padding: 0.5em;
  word-break: break-all;
}

.box img {
  width: 200px;
}

Следующий код выполняется в обработчике события window 's load. Он использует свойство currentSrc изображения для получения и отображения URL, выбранного браузером из srcset.

window.addEventListener("load", () => {
  const box = document.querySelector(".box");
  const image = box.querySelector("img");

  const newElem = document.createElement("p");
  newElem.textContent = "Image: ";
  newElem.appendChild(document.createElement("code")).textContent =
    image.currentSrc;
  box.appendChild(newElem);
});

На выводе ниже выбранный URL будет соответствовать тому, выберет ли ваш дисплей версию изображения 1x или 2x. Если у вас есть и стандартные, и высокоплотные экраны, попробуйте перемещать это окно между ними и перезагружать страницу, чтобы увидеть изменения в результатах.

Дополнительные примеры см. в нашем руководстве по адаптивным изображениям.

• Изображения в HTML
• Адаптивные изображения
• Руководство по типам и форматам файлов изображений