В проект WebKit недавно была добавлена экспериментальная поддержка спецификации стилей для изображений стандарта CSS 4. Эта спецификация разработана с целью обеспечить возможность разработчикам веб-сайтов задействовать изображения с высоким разрешением и, тем самым, реализовать некоторые преимущества, доступные владельцам устройств Apple с дисплеем Retina display.
В браузерах Safari 6 и Chrome 21 уже реализована такая поддержка. Она позволяет при написании кода веб-сайтов задействовать новые правила и создавать, приблизительно, следующие конструкции:
#selector {
background-image: url(no-image-set.png);
background-image: -webkit-image-set(url(myimage.jpg) 1x, url(myimage-hires.jpg) 2x);
/* other prefixes for -moz, -o and -ms go here */
background-image: image-set(url(myimage.jpg) 1x, url(myimage-hires.jpg) 2x);
}
В данном случае проводится оценка плотности размещение пикселей на дисплее компьютерного устройства пользователя, которым в настоящий момент осуществляется просмотр веб-сайта. В случае, если плотность пикселей соответствует 1x, браузер будет демонстрировать пользователю стандартное изображение myimage.jpg. Если же плотность пикселей составляет 2x, то браузер будет использовать для демонстрации изображение myimage-hires.jpg с более высоким разрешением.
При этом отмечается, что такой способ вызова изображений имеет некоторые преимущества перед использованием медиа запросов, хотя они и позволяют получить такой же эффект. Однако предлагаемый способ не содержит жестких требований по отношению к браузеру использовать определенное изображение, а лишь предлагает опциональную возможность выбора. Таким образом, если браузер будет достаточно «умным», он сможет самостоятельно определить, что даже при высокой плотности пикселей экрана, но низкой скорости сетевого соединения, лучше использовать изображение с низким разрешением, которое занимает меньше дискового пространства и быстрее загружается.
Дополнительно следует отметить, что несмотря на реализованную поддержку спецификации стилей для изображений в браузерах Safari 6 и Chrome 21, она еще не является официальным стандартом в рамках спецификации CSS 4, а носит лишь предварительный характер и еще может быть изменена. Информация о сроках ее утверждения в качестве официального стандарта пока не сообщается.