Справочники

HTML Элементы HTML Атрибуты Глобальные Атрибуты HTML События HTML MIME-типы HTML Коды языков HTMLТаблица цветов HTML ASCII HTML ISO-8859-1 HTML Windows-1251 HTML UTF-8 кирилица HTML URL для UTF-8 HTML URL для ISO-8859


 


HTML Атрибут srcset

Атрибут srcset (от англ. "source set" — «источник комплекта») указывает список из одного или нескольких значений, разделённых запятыми, указывающих набор возможных изображений для отображения в браузере.

Синтаксис

<element srcset="[значение]">

Значения

В качестве значения данного атрибута указывается одна или более строк допустимых непустых URL-адресов, каждый из которых отделен от следующего с помощью символа «,» ЗАПЯТАЯ. Каждая строка может состоять их следующих частей:

  • URL файла с изображением;
  • дескриптор ширины, который представляет собой целое положительное число, за которым следует символ «w» (например: 600w);
  • дескриптор плотности пикселей, представляет собой положительное десятичное число, за которым следует символ «x».

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

Если браузер не поддерживает атрибут srcset, по умолчанию файл с изображением импортируется с помощью атрибута src. Вот почему так важно включать изображение 1x, которое может отображаться на любых устройствах, независимо от их свойств. Если браузер поддерживает атрибут srcset, вы можете определять список источников изображений и условий (через запятую) до поступления запроса. В результате загружаются и выводятся на экран только те изображения, которые соответствуют параметрам устройства.

Значение по умолчанию

Нет.

Применяется к тегам

Элементы Атрибут
<source> srcset
<img> srcset

Отличия HTML 4.01 от HTML 5

Атрибут был добавлен в HTML5.

Пример использования:

Атрибут srcset (Элемент <img>)

Пример HTML:

Попробуй сам
<img src="/../images/ship320.jpg"
  srcset="
    /../images/ship320.jpg 320w,
    /../images/ship@wide-mobile.jpg 480w,
    /../images/ship@tablet.jpg 768w,
    /../images/ship@desktop.jpg 1024w,
    /../images/ship@hires.jpg 1280w"
  sizes="
    (max-width: 20em) 30vw,
    (max-width: 30em) 60vw,
    (max-width: 40em) 90vw"
  alt="Корабль">

В приведенном выше примере атрибут sizes определяет размеры изображения с помощью различных медиазапросов. Если размер окна браузера не превышает 20em, изображение будет занимать 30% области просмотра. При размере браузера от 20em до 30em это значение увеличивается до 60%, а при размере от 20em до 30em изображение будет занимать 90% области просмотра.

Атрибут srcset (Элемент <source>)

Пример HTML:

Попробуй сам
<picture>
  <source media="(max-width: 25em)"
          srcset="iphone.png">

  <source media="(max-width: 48em)"
          srcset="iphone@tablet.png">

  <img src="iphone.png"
      alt="iPhone">

</picture>

Веб-разработчикам часто нужно использовать различные версии одного и того же изображения, чтобы эффективно предоставлять их в соответствии с широким спектром разрешений экрана и плотности пикселей, доступных на современных устройствах. Если экран маленький и изображение масштабируется вниз, то его часть может оказаться не видимой. Решить эту проблему помогает использование art direction как в примере выше.

Поддержка браузерами

Спецификации

Спецификация Статус
HTML 5.1 (W3C) Рекомендация

Учебник HTML

HTML уроки: HTML Атрибуты

HTML Изображения