High Resolution Images in -webkit using image-set() function
High resolution displays such as iPhone's Retina display and MacBook Pro with Retina display are already in web race. I personally feel that we should start making websites compatible for Retina displays as well.
Till now I knew the best way to optimise website graphics for high resolutions display as follows:
(min-device-pixel-ratio : 1.5)With browsers prefixes of course. But I bet there are very few people who knows about image-set() function proposed in CSS4 specs and already supported in -webkit based browsers. It works as follows:
body{
background: -webkit-image-set( url('path/to/image') 1x, url('path/to/high-res-image') 2x );
}This syntax surely gives the hassle free code, now I am just waiting for this syntax to get in action across all browsers.
Written by Ram Ratan Maurya
Related protips
4 Responses
Will this fallback to just the first url in older browsers? Or do we need to add a version for them as well?
Unfortunately not, but you can do this.
body{
background-image: url('path/to/image');
background-image: -webkit-image-set( url('path/to/image') 1x, url('path/to/high-res-image') 2x );
}And then use @media syntax to define @2x image.
This syntax is future proof, works in current versions of Safari and Chrome. Waiting for the day when other browser implements it as well.
mauryaratan- that works beautifully in mobile Safari and Chrome... but unfortunately not the default Android browser. :( Was so hoping to use this solution instead of multiple DIVs and playing hide & seek with each one.
It’s available only above Safari 6 and Chrome 21. As of now, it’s still a CSS4 spec I guess. So there isn’t going to be any cross browser solution anytime soon.
