image-set()

Базовая версия 2023

Новое поступление

С сентября 2023 года эта функция работает на последних версиях устройств и браузеров. Возможно, эта функция не будет работать на старых устройствах или браузерах.

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

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

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

Синтаксис

/* Select image based on resolution */
image-set(
  "image1.jpg" 1x,
  "image2.jpg" 2x
);

image-set(
  url("image1.jpg") 1x,
  url("image2.jpg") 2x
);

/* Select gradient based on resolution */
image-set(
  linear-gradient(blue, white) 1x,
  linear-gradient(blue, green) 2x
);

/* Select image based on supported formats */
image-set(
  url("image1.avif") type("image/avif"),
  url("image2.jpg") type("image/jpeg")
);

Значения

<image>: Изображение <image> может быть любого типа, кроме набора изображений. Функция image-set() не может быть вложена в другую функцию image-set().
<string>: URL изображения.
<resolution> Необязательно: <resolution> единицы включают x или dppx, для единицы точек на дюйм, dpi, для точек на дюйм, и dpcm для точек на сантиметр. Каждое изображение в наборе image-set() должно иметь уникальное разрешение.
type(<string>) Необязательно: Строка с допустимым MIME-типом, например "image/jpeg".

Формальный синтаксис

<image-set()> = 
  image-set( <image-set-option># )  

<image-set-option> = 
  [ <image> | <string> ] [ <resolution> || type( <string> ) ]?  

<image> = 
  <url>       |
  <gradient>  

<url> = 
  <url()>  |
  <src()>  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )

Доступность

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

Примеры

Использование image-set() для предоставления альтернативных вариантов фона изображения

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

<div class="box"></div>

.box {
  width: 400px;
  height: 200px;
  background-repeat: no-repeat;
  background-size: cover;

  background-image: image-set(
    url("https://mdn.github.io/shared-assets/images/examples/balloons-small.jpg")
      1x,
    url("https://mdn.github.io/shared-assets/images/examples/balloons-landscape.jpg")
      2x
  );
}

Использование image-set() для предоставления альтернативных форматов изображений

В следующем примере функция type() используется для предоставления изображения в форматах AVIF и JPEG. Если браузер поддерживает avif, он выберет эту версию. В противном случае он будет использовать версию jpeg.

<div class="box"></div>

.box {
  width: 400px;
  height: 200px;
  background-repeat: no-repeat;
  background-size: cover;

  background-image: image-set(
    "https://mdn.github.io/shared-assets/images/examples/balloons-landscape.avif"
      type("image/avif"),
    "https://mdn.github.io/shared-assets/images/examples/balloons-landscape.jpg"
      type("image/jpeg")
  );
}

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

Спецификация
CSS Images Module Level 4 # image-set-notation

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`image-set`	113113 20–113 Поддержка только изображений `url` и `x` — единственная поддерживаемая единица измерения разрешения.	113113 79–113 Поддержка только изображений `url` и `x` — единственная поддерживаемая единица измерения разрешения.	8990 88–89 Функция `type()` не поддерживается в качестве аргумента для `image-set()`.	9999 15–99 Поддержка только изображений `url` и `x` — единственная поддерживаемая единица измерения разрешения.	1717 14–17 Функция `type()` не поддерживается в качестве аргумента для `image-set()`. 14–17 Функция `type()` не поддерживается в качестве аргумента для `image-set()`. 10.1–14 Поддержка только изображений `url` и `x` — единственная поддерживаемая единица измерения разрешения. 6–14 Поддержка только изображений `url` и `x` — единственная поддерживаемая единица измерения разрешения.	113113 25–113 Поддержка только изображений `url` и `x` — единственная поддерживаемая единица измерения разрешения.	8990 88–89 Функция `type()` не поддерживается в качестве аргумента для `image-set()`.	7676 14–76 Поддержка только изображений `url` и `x` — единственная поддерживаемая единица измерения разрешения.	1717 14–17 Функция `type()` не поддерживается в качестве аргумента для `image-set()`. 14–17 Функция `type()` не поддерживается в качестве аргумента для `image-set()`. 10.3–14 Поддержка только изображений `url` и `x` — единственная поддерживаемая единица измерения разрешения. 6–14 Поддержка только изображений `url` и `x` — единственная поддерживаемая единица измерения разрешения.	23.023.0 1.5–23.0 Поддержка только изображений `url` и `x` — единственная поддерживаемая единица измерения разрешения.	113113 4.4–113 Поддержка только изображений `url` и `x` — единственная поддерживаемая единица измерения разрешения.

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/image/image-set