Responsive Web Design: Solutions For Responsive Images

Responsive Web Design: Solutions For Responsive Images

With the limitations that the <img> tag brings along, images have long been a major obstacle when wanting to create truly responsible, fast, responsive websites. Luckily, the upcoming <picture> element and srcset/sizes are about to finally change this. However, even in the meantime, while browser vendors are still busy implementing the new specification, you can already start to incorporate truly responsive images into your website. There are a number of smart solutions to close up the existing gaps: polyfills, fallbacks for legacy browsers, and clever approaches that were created on the fly due to missing alternatives.


To help you review and understand different methods of catering for responsive images, we’ve compiled a selection of the different techniques in this eBook. It features practical advice on every implementation, as well as tips on tackling the art direction and resolution-switching use cases that a growing device landscape has brought along. As you will notice, there is no reason to wait anymore; you can already cater for responsive images today!

  • Picturefill 2.0: Responsive Images And The Perfect Polyfill
    by Tim Wright
  • Responsive Images Done Right: A Guide To <picture> And srcset
    by Eric Portis
  • Automate Your Responsive Images With Mobify.js
    by Shawn Jansepar
  • One Solution To Responsive Images
    by Gavyn McKenzie
  • Addressing The Responsive Images Performance Problem: A Case Study
    by Anders Anders & Tobias Järlund
  • Clown Car Technique: Solving Adaptive Images In Responsive Web Design
    by Estelle Weyl
  • Simple Responsive Images With CSS Background Images
    by Stephen Thomas
  • Responsive Images With WordPress’ Featured Images
    by Rachel McCollin
  • Responsive Image Container: A Way Forward For Responsive Images?
    by Yoav Weiss
  • Rethinking Responsive SVG
    by Ilya Pukhalski

Technical Information

  • Formats: PDF, EPUB, Kindle (DRM-free)
  • Pages: 129
  • Language: English
  • Released: July 2014
  • Publisher: Smashing Magazine GmbH
  • ISBN (PDF): 978-3-94454073-3
  • ISBN (EPUB): 978-3-94454074-0
  • ISBN (KINDLE): 978-3-94454075-7

Excerpt From Chapter 1

Picturefill 2.0: Responsive Images And The Perfect Polyfill — by Tim Wright

Not since the early days of web standards have I seen our community rally around a seemingly small issue: responsive images.

Over the last four years (yeah, it’s been about four years), we’ve seen many permutations of images in responsive design. From the lazier days of setting max-width: 100% (the absolute minimum you should be doing) to more full-featured JavaScript implementations, such as Picturefill and Zurb’s data-interchange method, we’ve spent a lot of time spinning our wheels, banging our heads and screaming at the wall. I’m happy to say that our tireless journey is coming to a close. The W3C and browser makers got the hint.

Excerpt From Chapter 5

Addressing The Responsive Images Performance Problem: A Case Study — by Anders Andersen & Tobias Järlund

Five-inch mobile devices are on the market that have the same screen resolution as 50-inch TVs. We have users with unlimited high-speed broadband as well as users who pay money for each megabyte trans- ferred. Responsive design for images is about optimizing the process of serving images to users. In this chapter, we will share our responsive image technique, the “padding-bottom” technique, which we researched and implemented on the mobile version of the Swedish news website Aftonbladet.

Related Products

↑ Back to top