6ltcnw
Last Updated: February 25, 2016
·
11.81K
· mauryaratan
Me

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.

Say Thanks
Respond

4 Responses
Add your response

4486
C8feb28847d8f335a05a233cbd490536

Will this fallback to just the first url in older browsers? Or do we need to add a version for them as well?

over 1 year ago ·
4487
Me

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.

over 1 year ago ·
10391
Google chrome icon normal

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.

over 1 year ago ·
10393
Me

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.

over 1 year ago ·
Awesome Job

B6c77ad0 c95b 11e7 8263 8f89080b8db6
Ruby Developer Backend
·
Austria (Vienna or Linz)
·
Full Time