Getting up to speed with responsive images and Picturefill

This week I have challenged myself to get up to speed with responsive images and Picturefill, a polyfill for the upcoming HTML5 picture element as well as two new attributes for the img element. It wasn’t easy—there’s a surprising amount of reading and processing that needs to be done to understand the many problems and proposed solutions to responsive images on the web. Along the way I realized that I am not yet hugely interested in the art direction use case—which means I have focused more of my time on two less hyped img element attributes, srcset and sizes. Together these provide for most of what I am interested in: swapping source imagery at different resolutions.

Here are some of the articles I found most useful for getting up to speed (and I’ll add more as I encounter them):

One thing you may notice in a lot of these articles is a strong bias in favour of the picture element. To me this sounds like way more trouble than its worth—at least for now.

In case you’re curious about my working implementation for WordPress, there are two parts:

  • Ubik Imagery: my handy image layout and management plugin for WordPress. I usage an image shortcode to display images on this blog. Without such a thing I’d have to indiscriminately apply preg_replace to raw HTML. Yech. Browse the source code for the file marked srcset and read the comments. It’s nothing too complicated if you know WordPress.
  • Pendrell’s responsive images module: an adapter for the aforementioned plugin. This complicated mess of code properly provisions the sizes attribute. (Warning: the path to this file might change as development proceeds!)

If you read any of the articles I linked to at the top of this post you may notice that none of them go into any detail about how to provision the sizes attribute. It sounds simple on paper: sizes contains a series of media queries and a default with an associated size. This tells the browsers “when the viewport is this wide this image probably displays at this size”. Easy, right?

Now consider one of the features of my blog: a responsive gallery that can contain either one, two, or three columns of images depending on the viewport width. There are margins between those windows and the overall margins of the page itself also change depending on the viewport width. And, oh, I also have a full-width mode that allows content to sprawl.

With regular CSS this is handled by calculating various percentages and letting the browser figure things out. The browser is told: at this viewport width the page margins are 30 pixels, images in this two column grid take up 49% of the available space, and there is a 2% margin between them—figure it out! But with sizes we need to specify what the rendered width of an image should be. We need to do those calculations ourselves.

If you browse the code (above) you’ll see that my solution is inelegant yet functional. The first media query in any set specifies the minimum width at which an image will be displayed at its target size. Below that everything is handled by calc() with respect to shifting page margins. Most difficult to implement were the image layout features I regularly use here on my blog. I would provide a walkthrough of the code but it won’t be hugely useful—every implementation will be specific to whatever design is being used. Best to just read the source and follow along!

Related posts

Respond

Markdown and HTML enabled in comments.
Your email address will not be published. Required fields are marked *