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 Нет поддержки Нет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-

Легенда

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

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