Функция image-set в CSS. Полное руководство с примерами

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

Основы image-set()

Функция 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 — удвоенное разрешение и т.д.).

Пример простого использования image-set()

.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')
    );
}

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

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

Фоновое изображение для кнопки

button {
    background-image: image-set(
      url('button-bg-1x.png') 1x,
      url('button-bg-2x.png') 2x
    );
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
}

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

Фоновое изображение для блока

div.gradient-box {
    background-image: image-set(
      url('background-1x.jpg') 1x,
      url('background-2x.jpg') 2x,
      url('background-1x.webp') 1x type('image/webp'),
      url('background-2x.webp') 2x type('image/webp')
    );
    padding: 20px;
    border-radius: 5px;
    color: white;
}

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

Заключение

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