Responsive web images: What can we expect next?

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?

SHARE:

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?

Topic: Software Development

Jake Rayson

About Jake Rayson

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, and my working life reflects my commitment to open standards and accessible websites (ie accessible by everyone, regardless of browser, platform, ability or technology).

For web publishing platforms, I use WordPress for ease of use and Drupal for more complex solutions.

I am also learning about Ruby, Rails, Sinatra and CoffeeScript. I like the minimalist Ruby Way. To this end, my personal portfolio website is built with NestaCMS.

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

Talkback

2 comments
Log in or register to join the discussion
  • Who invented that phrase?

    The concept has been around since long before they called it "responsive web design." It's just a dynamic web page.

    In fact, I'd really love it if you called it dynamic, because it's far shorter than a clumsy three word phrase.

    Please tell me I'm not gonna be hearing it for years to come X(. Just call it dynamic.

    "A new image format. Not as scary as it sounds"

    The scary part is not the technology.

    The scary part is the inevitable patent war that will doubtless ensue when somebody decides that everybody has to pay for it.

    We could see the GIF fiasco all over again. Easily.
    CobraA1
    • I kinda like it

      Buzz words.. :)

      I actually find it suitable that it's a different term because 'Responsive web design' does seem to refer to 'changing design based on the viewable area of the device', which of course has become more relevant with smartphones and tablets. I also think it's a different way of thinking and more technically specific than the common understanding of 'dynamic web pages'.
      kjetil_h