QR Code contains TinyURL of this article.My U-turn On Responsive Images

Horseshoe Bend, Colorado River at Page, Arizona.
Horseshoe Bend, Colorado River at Page, Arizona.Credit: .
License: CC BY-SA 2.0

The Case for the Prosecution

In the not-too-distant past, I wrote an article in which I bemoaned the syntax of the proposed <picture> element, specifically the srcset attribute:

“I’m convinced that the <picture> element and srcset attribute is how we’ll ultimately deal with responsive and retina images but, urgh, that syntax, and all that file management! Really?”

I went on to describe one of the methods for handling high-PPI images that I’d seen in the wild:

“Serve a non-retina image by default, then use JavaScript to determine whether or not the client is using a retina display. If she is, then replace the standard image with its @2x counterpart.”

Which I criticised because:

“This solution works well enough, but is expensive as the client downloads two images instead of one on retina devices. There is also the possibility that the user will see the image switch, which could be somewhat jarring. Furthermore, if JavaScript isn’t available or fails, the browser will fall-back to the regular image on all devices.”

So I dismissed that as a possible solution because:

“I don’t consider this to be a worthwhile methodology. I am reluctant to have any kind of JavaScript dependency as I consider it to be inherently fragile.”

Guilty, Your Honour

So yeah, in a complete about-face, I am now using the srcset and sizes attributes in my img element markup. I am also using JavaScript to switch between a default image and the adaptive and/or high-PPI variant.

In My Defence

My hand was kind of forced here. When I switched to using the CloudFlare CDN, I noticed some odd things happening with the images on this website. I was using the Adaptive Images program to handle the resizing necessary for the variety of screen widths you might view the Perpetual βeta on. Sadly, Adaptive Images does not play nicely with a CDN:

“Adaptive Images relies on the server being able to intercept requests for images, do some logic, and then send one of a given number of responses. Content Delivery Networks are generally dumb-caches, and they won’t allow that to happen. Adaptive Images will not work if you’re using a CDN to deliver your website.” Matt Wilcox (the author of Adaptive Images)

That being the case, the srcset attribute seemed like the only reasonable way to go, since it is the responsive image solution that seems to have the most traction.

I am also using the Picturefill responsive image polyfill. Yes, this introduces the dreaded JavaScript dependency and also means that there is a strong likelihood that the web-browser will download two image files for each displayed image. I’d prefer that this wasn’t the case but I don’t see any other reasonable solution at this time.

I have tried to mitigate any potential ill-effects by using a low resolution default image and by making the file sizes of those images as small as possible.1

Polyfills aside then, my two main grievances with srcset are the additional markup and the file management of the image versions. I am the stereotypical lazy developer. I hate tedious, repetitive tasks and I always advocate automation of the same. To this end, I have written a PHP script that creates the versions of each image that this solution demands. That same script also generates the markup I now need for an image. I simply drop a single source image into a watched folder and the computer does the rest. It’s a great solution for my needs. I write more about this — and share the code — in the next article.

The Verdict

I really dislike the JavaScript dependency I have introduced and I’m unhappy with the additional request(s) to the server for each image. However, the Web does seem to be heading in the direction of srcset. Web-browsers will eventually select the appropriate image from the srcset of their own accord, negating the additional requests and the need for a polyfill. I’m just ahead of the curve at the moment. I can live with that.

Guilty as charged.

Case Closed
  1. The average file-size of the contents of the default image source folder is just 27KB at the time of writing. ↩︎