Responsive web images: What can we expect next?

Summary:Images for responsive web design are a big issue. We want high-resolution images but we also want to preserve bandwidth. So what's the way forward?

With great power comes great responsibility, as Spiderman said — or was it Voltaire?

Responsive web design is indeed a very powerful tool. Through the use of a flexible grid, flexible images and media queries, it enables one website to be built for all web devices.

Staffanstorp — Responsive Web Design
The Staffanstorp website in all its responsive glory — the only one on Flickr with a Creative Commons License.

But RWD, as it has become initialised, has opened a Pandora's can of worms, most notably with images. Matt Wilcox has written a thorough and thoroughly enjoyable analysis of the problems with responsive images. Namely:

  1. An image for a big screen may not be viewable on a small screen, so a subject in a group photo may need to be cropped to a headshot.
  2. Downloading hi-res images will waste bandwidth on a small screen.

To tackle this issue, we can use:

  1. A server-side approach, such as Wilcox's Adaptive Images, which works by creating images of various resolutions depending on the user's screen size.
  2. The announced but yet to be implemented picture element, which provides a way to include different resolution images in the markup.
  3. A new image format. Not as scary as it sounds, as JPEG can be adapted to work, and I'm sure that PNG files can be extended equally as well.

Obviously, there are pros and cons to each of the solutions. As a jobbing front-end web developer, the thing that keeps me awake at night — apart from Internet Explorer 7 — is the fear of bloat and redundant markup. This is the path that the picture element could take us down: putting references to multiple different images is surely stylistic and not do with semantics?

I think that for everyday web folk too much complexity in the HTML will be ignored or at best poorly implemented.

For those of us who are concerned with responsive images, would we not be best served by a server-side solution for now, and then a new image format for later?

Topics: Software Development

About

A web designer since the 20th century, I am a pragmatic advocate of Free Software and I use proprietary software when appropriate. I made the full-time switch to Linux back in 2007, and my desktop tools of choice are Linux Mint, Inkscape, GIMP and Sublime Text. As a Front End Developer, my core skills are HTML5, CSS3 and jQuery, an... Full Bio

Kick off your day with ZDNet's daily email newsletter. It's the freshest tech news and opinion, served hot. Get it.

Related Stories

The best of ZDNet, delivered

You have been successfully signed up. To sign up for more newsletters or to manage your account, visit the Newsletter Subscription Center.
Subscription failed.