Функция image-set в CSS

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

Основы

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

background-image: image-set(
  url('image-1x.png') 1x,
  url('image-2x.png') 2x,
  url('image-3x.png') 3x
);

• url('image.png') путь к изображению
• 1x, 2x, 3x множители разрешения изображения, где 1x — стандартное разрешение, 2x — удвоенное разрешение

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

В этом примере задаётся фоновое изображение с двумя разрешениями: стандартным и удвоенным. Браузер автоматически выберет наиболее подходящее изображение в зависимости от разрешения экрана устройства пользователя:

.element {
    background-image: image-set(
      url('image-low-res.png') 1x,
      url('image-high-res.png') 2x
    );
}

Указание различных форматов изображений

Функция image-set() также позволяет указывать изображения в различных форматах. Это может быть полезно для обеспечения поддержки разных браузеров и устройств:

.element {
    background-image: image-set(
      url('image.webp') type('image/webp'),
      url('image.png') type('image/png')
    );
}

В этом примере задаются два изображения в разных форматах: WebP и PNG. Браузер выберет формат, который он поддерживает.

Совмещение разрешений и форматов

Можно комбинировать различные разрешения и форматы для обеспечения максимально качественного отображения изображений.

.element {
    background-image: image-set(
      url('image-1x.webp') 1x type('image/webp'),
      url('image-2x.webp') 2x type('image/webp'),
      url('image-1x.png') 1x type('image/png'),
      url('image-2x.png') 2x type('image/png')
    );
}

В этом примере задаются изображения с различными разрешениями и форматами. Браузер выберет наилучшее изображение в зависимости от поддерживаемого формата и разрешения экрана устройства.