Last Updated: May 31, 2021
· mauryaratan

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:

    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.

4 Responses
Add your response

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 ·

Unfortunately not, but you can do this.

    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 ·

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 ·

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 ·