image-set()

CSS функция image-set() это способ позволить браузеру выбрать наиболее подходящее изображение CSS из заданного набора, в первую очередь для экранов с высокой плотностью пикселей.

Разрешение экрана и пропускная способность могут отличаться в зависимости от устройства и доступа к сети. Функция image-set()  обеспечивает наиболее подходящее разрешение изображения для устройства пользователя, предоставляя набор параметров изображения — каждый с соответствующим объявлением разрешения — из которых браузер выбирает наиболее подходящее для устройства и настроек. Разрешение может использоваться в качестве прокси для размера файла — клиент на медленном мобильном соединении с экраном высокого разрешения может предпочесть получать изображения с более низким разрешением, а не ждать загрузки изображения с более высоким разрешением.

image-set() позволяет автору предоставлять параметры, а не определять, что нужно каждому отдельному пользователю.

Синтаксис

image-set() = image-set( <image-set-option># ) 
где <image-set-option> = [ <image> | <string> ] <resolution> и
      <string> в качестве <url>

Значения

Чаще всего вы можете увидеть значение url() как <string>, но <image> может быть любым типом изображения, кроме набора изображений. Функция image-set() не может быть вложена в другую функцию image-set().

Блоки <resolution> включают в себя x или ddpx, для точек на пиксель, dpi для точек на дюйм, и dpcm для точек на сантиметр. Каждое изображение в наборе image-set() должно иметь уникальное разрешение.

Примеры

background-image: image-set( "cat.png" 1x,
                             "cat-2x.png" 2x,
                             "cat-print.png" 600dpi);

Этот пример демонстрирует использование image-set() для обеспечения двух альтернативных background-image свойств, из которых будет выбрано более подходящее по разрешению: обычная версия и версия с высоким разрешением.

Вопросы доступности

Браузеры не предоставляют никакой специальной информации о фоновых изображениях для вспомогательных технологий. Это важно прежде всего для экранных считывающих технологий, так как они не объявят о своем присутствии и поэтому ничего не передадут своим пользователям. Если изображение содержит информацию, критически важную для понимания общего назначения страницы, лучше описать ее семантически в документе.

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

Спецификация Статус Комментарий
CSS Images Module Level 4
Определение 'The image-set() notation' в этой спецификации.
Рабочий черновик  

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
image-set()Chrome Полная поддержка 21
С префиксом
Полная поддержка 21
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Edge Полная поддержка 79
С префиксом
Полная поддержка 79
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Firefox Нет поддержки Нет
Замечания
Нет поддержки Нет
Замечания
Замечания See bug 1107646.
IE Нет поддержки НетOpera Полная поддержка 15
С префиксом
Полная поддержка 15
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Safari Частичная поддержка 6
С префиксом Замечания
Частичная поддержка 6
С префиксом Замечания
С префиксом Требует вендорный префикс: -webkit-
Замечания Support for url images only and x is the only supported resolution unit. See bug 160934.
WebView Android Полная поддержка 4.4
С префиксом
Полная поддержка 4.4
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Chrome Android Полная поддержка 25
С префиксом
Полная поддержка 25
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Firefox Android Нет поддержки Нет
Замечания
Нет поддержки Нет
Замечания
Замечания See bug 1107646.
Opera Android Полная поддержка 14
С префиксом
Полная поддержка 14
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Safari iOS Частичная поддержка 6
С префиксом Замечания
Частичная поддержка 6
С префиксом Замечания
С префиксом Требует вендорный префикс: -webkit-
Замечания Support for url images only and x is the only supported resolution unit. See bug 160934.
Samsung Internet Android Полная поддержка 1.5
С префиксом
Полная поддержка 1.5
С префиксом
С префиксом Требует вендорный префикс: -webkit-

Легенда

Полная поддержка  
Полная поддержка
Частичная поддержка  
Частичная поддержка
Нет поддержки  
Нет поддержки
Смотрите замечания реализации.
Смотрите замечания реализации.
Требует вендорный префикс или другое имя для использования.
Требует вендорный префикс или другое имя для использования.

Смотрите также