image-set()

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, например type("image/webp");
• работает только с вендорным префиксом -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
    );
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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