With all the talk of new HTML5 standards such as the `srcset` attribute and
`<picture>` element, as well as server-side techniques such as Responsive Web
Design + Server Side Components (RESS), you'd be forgiven for concluding that
simple, static websites can’t support responsive images today. That conclusion
might be premature, however. In fact, there’s an easy, straightforward way to
deliver responsive images that’s supported by all of today’s Web browsers: CSS
However, the approach has some limitations, and it doesn’t work in all cases.
But if your requirements aren’t complicated, and if you’re willing to make an
extra effort to ensure your images are accessible, CSS background images may
be all you need.
**In this article we’ll look at the CSS background approach in several
1. First, we’ll review the goals and requirements for responsive images.
2. Then we’ll see how CSS media queries can help identify important
characteristics of our users' devices.
3. We’ll explore the key CSS `background-image` property that lets us
respond to those characteristics.
4. We’ll look at a strategy for optimizing the individual images that make
up a responsive set.
5. We'll ...