Handling Responsive Images in CSS
When researching material for another post I came across an image-set attribute in CSS. I thought it would be interesting to take a look at how it works and whether it has any limitations we should be aware of.
Using image-set as the value of the background-image attribute we can add a set of images that use rules similar to what the HTML responsive images would use.
.img {
background-image: url(examples/images/image-regular.jpg);
background-image:
-webkit-image-set(
url(examples/images/image-regular.jpg) 1x,
url(examples/images/image-large.jpg) 2x,
);
}The idea is that, if the browser supports the image-set attribute (unprefixed or not), it will then take the appropriate image based on the display density indicated with the x attribute (1x for regular density screen and 2x for high-density screens). If the browser doesn't support the property it will ignore the rule.
As of right now only Safari and Chromium-based browsers support the -webkit prefixed version of image-set. According to caniuse.com there's no browser, yet, that supports the unprefixed property.
For other ways in which CSS can handle responsive images, see CSS Trick's Responsive Images in CSS and for a discussion on how it works see https://cloudfour.com/thinks/safari-6-and-chrome-21-add-image-set-to-support-retina-images/