Функция image-set

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

.block {
background-image: image-set(«some-image.png» 1x, «some-image-2x.png» 2x);
}
У функции image-set()есть несколько особенностей:

Браузеры на webkit требуют наличия префикса -webkit-image-set()

В Safari префикс указывать не нужно, но синтаксис функции немного другой, с использованием функции url (): background-image: (url(«platypus.png» 1x));

Пока что не во всех браузерах есть полная поддержка этой функции. Поэтому перед использованием проверьте, поддерживают ли её нужные вам браузеры с помощью сервиса Caniuse.com.