On Using Images in Responsive Web Design

Responsive web design is taking the world wide web by storm. The ability to shape the user experience based on what device the user is viewing the application on is something that is nothing short of game changing. And although media queries have made it easier for developers to design responsively, one problem that still has no immediate overall cure is the handling of images.

Although there is still no perfect solution to optimize images for cross-device visual tone, performance, and development time, we can still approach the handling of images in a better way. When designing and developing images within responsive web sites, here are a few things to consider:

  1. Experience: The overall experience for a user is very different when viewing a large, beautiful, highly saturated image on a desktop wide screen monitor than an iPhone web browser. On which device would you rather see an image of Yellowstone? This sentiment will not be the case for all images, though. For instance, the general impression of a company logo on both a desktop and mobile phone screen may be treated similarly—the logo isn’t going to look anymore grand when viewed at 240px wide versus 120px wide. Use your better judgement as to what images should be viewed on which devices before you start developing. You may find out that not all images should be viewed cross-device.
  2. Development Time over Performance: Once you’ve established which images should be viewed cross-device, you’ll have to consider how the weight of the images affect the overall performance on a mobile device, and how much development time you’re willing to invest. As a rule of thumb, serving one image will limit development time, but lower overall performance. Serving multiple images will increase performance, but slow development time. One workaround is the Adaptive Image technique developed by Matt Wicox. The Adaptive Image method uses a single image and resizes it using a combination of the Fluid Image technique and screen size detection. If you’re looking for a fully responsive image, this is a great solution.
  3. Performance over Development Time: If you prefer a user’s performance over development time, you’ll want to do the opposite of the method described above. This work-around is the Filament Group’s method Responsive Images. Again, you’ll spend more time managing image editing and resizing, but the image weight will no longer be an issue.

In the end, there isn’t a perfect solution for ensuring an optimum user experience with images in responsive web site. But we can start by simply asking ourselves if an image truly belongs. After that, we can employ different workarounds to serve those images. Perhaps in the future—and Nicolas Gallagher has hypothesized how—we will be able to completely control responsive images via CSS.

Until next time, be responsible and always be responsive.


Written by James