image-set()

Позволяет установить несколько разрешений и типов фонового изображения.

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

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

Похож по принципу работы на тег <picture>.

Пример

Секция статьи "Пример"
        
          
          div {  background-image: image-set(    url("puppy@1x.webp") type("image/webp") 1x,    url("puppy@2x.webp") type("image/webp") 2x,    url("puppy@1x.png") type("image/png") 1x,    url("puppy@2x.png") type("image/png") 2x  );}
          div {
  background-image: image-set(
    url("puppy@1x.webp") type("image/webp") 1x,
    url("puppy@2x.webp") type("image/webp") 2x,
    url("puppy@1x.png") type("image/png") 1x,
    url("puppy@2x.png") type("image/png") 2x
  );
}

        
        
          
        
      

Как понять

Секция статьи "Как понять"

На сайт могут заходить с разных устройств. У многих дисплеи с повышенной плотностью пикселей и им нужно показывать картинку хорошего качества. А на телефонах лучше показывать небольшие файлы ради ускорения загрузки страницы. Нужно как-то давать разным клиентам разные версии изображений. Раньше для этого использовали медиавыражения, а теперь есть простые и удобные решения, которые позволяют через запятую указать все версии изображений. Конечно, есть тег <picture>, но если изображение декоративное, будет правильнее установить его как фон элемента.

Как пишется

Секция статьи "Как пишется"

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

В качестве условия можно использовать коэффициент плотности пикселей: 1x, 2x и так далее. Или указываем тип изображения в формате MIME. Картинка будет загружена, если формат поддерживается браузером. Можно комбинировать условия.

Как и в случае с <picture>, важен порядок перечисления форматов картинок: сначала более предпочтительные (AVIF, WebP), потом — менее (PNG, JPEG). Так браузер поймёт, какой из форматов ему выбрать, если он поддерживает все. Порядок перечисления картинок разной плотности не важен, браузер сам выберет подходящую.

Поддержка

Секция статьи "Поддержка"

Firefox поддерживает свойство полностью. Поддержку в остальных браузерах можно уточнить на Can I use.

Особенности поддержки в Chrome и Safari в данный момент:

  • отображение ломается при указании типов изображений в формате MIME;
  • работает только с вендорным префиксом -webkit-;
  • в Safari не отображается AVIF.

Таким образом для полной поддержки код можно писать так:

        
          
          div {  /* Фолбэк */  background-image: url("puppy.png");  /* Для Chrome и Safari */  background-image: -webkit-image-set(      url("puppy@2x.png") 2x,      url("puppy@1x.png") 1x    );  /* Для Firefox */  background-image: image-set(      url("puppy@2x.avif") type("image/avif") 2x,      url("puppy@1x.avif") type("image/avif") 1x,      url("puppy@2x.webp") type("image/webp") 2x,      url("puppy@1x.webp") type("image/webp") 1x,      url("puppy@2x.png") 2x,      url("puppy@1x.png") 1x    );}
          div {
  /* Фолбэк */
  background-image: url("puppy.png");

  /* Для Chrome и Safari */
  background-image: -webkit-image-set(
      url("puppy@2x.png") 2x,
      url("puppy@1x.png") 1x
    );

  /* Для Firefox */
  background-image: image-set(
      url("puppy@2x.avif") type("image/avif") 2x,
      url("puppy@1x.avif") type("image/avif") 1x,
      url("puppy@2x.webp") type("image/webp") 2x,
      url("puppy@1x.webp") type("image/webp") 1x,
      url("puppy@2x.png") 2x,
      url("puppy@1x.png") 1x
    );
}

        
        
          
        
      

Проверить поддержку на данный момент вы можете в демке.

Открыть демо в новой вкладке