CSS4 Image Set: A Promising Solution For Serving Images in High-Resolution Display

0 Flares Twitter 0 Facebook 0 Google+ 0 StumbleUpon 0 Pin It Share 0 0 Flares ×

The evolving trend on HD screens for laptop or computer devices has transformed the way we design and develop websites, comprising how we add images. In the past, we can basically use background-image and set the snapshot URL.

Today, this is no extended significant, as we also have to provide an image that is enhanced for higher resolution spectacles or the image will look pixelated or distorted. So, precisely we require two sets of image, one in steady size and one more of twice the size.


CSS Image Set Function

CSS Image Set function, image-set(), is categorized as CSS Image Level 4. By making use of this function, we can supplement several images which will be set for standard and high-resolution display.

Apart from that, this function is also demanding to distribute the most suitable image resolution grounded on the connection swiftness. So, irrespective of the screen resolution, if the user accesses the image via a slow Internet connection, the smaller-sized image will be provided.

At the time of this texting, CSS Image Set is new. It is only supported in Google Chrome 21 along with Safari 6 and is prefaced — –webkit-image-set().

This function is declared within the background-image property, whereas the background URL is included inside the function followed by the resolution parameter (1x for usual display and 2x is for high-resolution display).

.selector {
background-image: -webkit-image-set(url(‘../img/image-1x.jpg’) 1x, url(‘../img/image-2x.jpg’) 2x);

As said, since it is tentative, we have to deliver a fallback for the web browser that does not support image-set() function. So, we supplement one background-image at the top.

.selector {
background-image: url(‘../img/image-1x.jpg’;
background-image: -webkit-image-set(url(‘../img/image-1x.jpg’) 1x, url(‘../img/image-2x.jpg’) 2x);

We have made a demo page for this code, which you can perceive from the subsequent links.

For more reference on this function, you can view the documentation page at W3C.

About author View all posts

Andrew Johnson

Andrew Johnson is founder of BestPSDtoHTML. He loves creative designs, photography, paintings and everything about innovation. As an Internet entrepreneur, he constantly tries to develop new ways to bring content faster and closer to the end users in a more streamlined way. His main focus lies in inspiring all the designers and developers with all new ideas through his blogs.

Leave a Reply

Your email address will not be published. Required fields are marked *