-webkit-image-set как экспериментальное решение для дисплеев высокого разрешения
В последние версии движка WebKit была включена экспериментальная поддержка функции image-set(), предлагаемой в рабочем проекте спецификации CSS Image Values and Replaced Content Module Level 4. С помощью данной функции появилась возможность задавать в css-свойствах изображения в зависимости от разрешения экрана, или другого устройства воспроизведения. Поведение данной функции можно опробовать в браузерах Safari (начиная с 6 версии) и Google Chrome (начиная с 21 версии).
Предлагаемый синтаксис выглядит следующим образом:
.class { /* задаем фоновое изображение, если браузер не поддерживает image-set */ background-image: url(image-set-not-supported.png); /* задаем фоновые изображения, для различных разрешений */ background-image: -webkit-image-set(url(low-res-image.jpg) 1x, url(high-res-image.jpg) 2x); }