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,
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):
- A brief history of the picture element.
- Responsive images in practice.
- Srcset and sizes.
- If you’re just changing resolutions, use srcset.
- The new srcset and sizes explained.
- To Picturefill or not to Picturefill.
- Don’t use picture (most of the time).
- A complete guide to the picture element.
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_replaceto raw HTML. Yech. Browse the source code for the file marked
srcsetand 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
sizesattribute. (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!