The Publishing Project

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);
      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 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