There’s been quite a brouhaha over the past couple of days around the subject of standardising responsive images. There are two different matters here: the
process and the technical details. I’d like to address both of them.
Ill communication
First of all, there’s a number of very smart developers who feel that they’ve been sidelined by the WHATWG. Tim has put together a timeline of what happened:
- Developers got involved in trying to standardize a solution to a common and important problem.
- The WHATWG told them to move the discussion to a community group.
- The discussion was moved (back in February), a general consenus (not unanimous, but a majority) was reached about the picture element.
- Another (partial) solution was proposed directly on the WHATWG list by an Apple employee.
- A discussion ensued regarding the two methods, where they overlapped, and how the general opinions of each. The majority of developers favored the
picture element and the majority of implementors favored the srcset attribute.
- While the discussion was still taking place, and only 5 days after it was originally proposed, the srcset attribute (but not the picture element) was
added to the draft.
A few points in that timeline have since been clarified. That second step—“The WHATWG told them to move the discussion to a community group”—turns out to be
untrue. Some random person on the WHATWG mailing list (which is
open to everyone) suggested forming a Community Group at the W3C. Alas, nobody else on the WHATWG mailing list corrected that suggestion.
Then there’s apparent causality between step 4 and 6. Initially, I also assumed that this was what happened: that Ted had proposed the srcset solution without even being aware of the
picture solution that the Community Group had independently come up with it. It turns out that’s not the case. Ted had another email about the
picture proposal but he never ended up sending it. In fact, his email about srcset had been sitting in draft for quite a while and
he only sent it out when he saw that Hixie was finally collating feedback on responsive images.
So from the outside it looked like there was preferential treatment being given to Ted’s proposal because it came from within the WHATWG. That’s not the
case, but it must be said: the fact that srcset was so quickly added to the spec (albeit in a different form) doesn’t look good. It’s easy to
understand why the smart folks in the Responsive Images Community Group felt miffed.
But let’s be clear: this is exactly how the WHATWG is supposed to work. Use-cases are evaluated and whatever Hixie thinks is best solution gets put in the
spec, regardless of how popular or unpopular it is.
Now, if that sounds abhorrent to you, I completely understand. A dictatorship should cause us to recoil.
That’s where the W3C come in. Their model is completely different. Everything is done by committee there.
Steve Faulkner chimed in on Tim’s post with his take on the two groups:
It seems like the development of HTML has turned full circle, the WHATWG was formed to overthrow the hegemony of the W3C, now the W3C acts as a counter to
the hegemony of the WHATWG.
I think he’s right. The W3C keeps the rapid, sometimes anarchic approach of the WHATWG in check. But the opposite is also true. Without the impetus provided
by the WHATWG, I’m not sure that the W3C HTML Working Group would ever get anything done. There’s a balance that actually works quite well in practice.
Back to the situation with responsive images…
Unfortunately, it appears to people within the Responsive Images Community Group that all their effort was wasted because their proposed solution was
summarily rejected. In actuality all the use-cases they gathered were immensely valuable. But it’s certainly true that the WHATWG didn’t make it clearer how
and where developers could best contribute.
Community Groups are a W3C creation. They don’t have anything to do with the WHATWG, who do all their work on their own mailing list, their own wiki and
their own IRC channel.
I do think that the W3C Community Groups offer a good place to go bike-shedding on problems. That’s a term that’s usually used derisively but sometimes it’s
good to have a good ol’ bike-shedding without clogging up the mailing list for everyone. But it needs to be clear that there’s a big difference between a
Community Group and a Working Group.
I wish the WHATWG had done a better job of communicating to newcomers how best to contribute. It would have avoided a lot of the frustrations articulated by Wilto:
Unfortunately, we were laboring under the impression that Community Groups shared a deeper inherent connection with the standards bodies than it actually
does.
But in any case, as Doctor Bruce writes at least know there’s a proposed
solution for responsive images in HTML: The Living Standard:
I don’t really care which syntax makes the spec, as long as it addresses the majority of use cases and it is usable by authors. I’m just glad we’re
discussing the adaptive image problem at all.
So let’s take a look at the technical details.
src code
The Responsive Images came up with a proposal based off the idea of minting a new element, called say picture, that mimics the behaviour of
video
<picture alt="image description">
<source src="/path/to/image.png" media="(min-width: 600px)">
<source src="/path/to/otherimage.png" media="(min-width: 800px)">
<img src="/path/to/image.png" alt="image description">
</picture>
One of the reasons why a new element was chosen rather than extending the existing img element was due to a misunderstanding. The WHATWG had
explained that the parsing of img couldn’t be easily altered. That means that img must remain a self-closing element—any
solution that requires a closing /img tag wouldn’t work. Alas, that was taken to mean that extending the img element in any way was
off the cards.
The picture proposal has a number of things going for it. Its syntax is easily understandable for authors: if you know media queries, then you
know how to use picture. It also has a good fallback for older browsers : a regular img element. This fallback mechanism (and the
idea of multiple source elements with media queries) is exactly how the video element is specced.
Unfortunately using media queries on the sources of videos has proven to be very tricky for implementors, so they don’t want to see that pattern
repeated.
Another issue with multiple source elements is that parsers must wait until the closing /picture tag before they can even begin to
evaluate which image to show. That’s not good for performance.
So the alternate solution, based on Ted’s proposal, extends the img element using a new srcset attribute that takes a
comma-separated list of values:
<img alt="image description"
src="/path/to/fallbackimage.png"
srcset="/path/to/image.png 800w, /path/to/otherimage.png 600w">
Not nearly as pretty, I think you’ll agree. But it is actually nice and compact for the “retina display” use-case:
<img alt="image description" src="/path/to/image.png" srcset="/path/to/otherimage.png 2x">
Just to be clear, that does not mean that otherimage.png is twice the size of image.png (though it could be). What you’re actually
declaring is “Use image.png unless the device supports double-pixel density, in which case, use otherimage.png.”
Likewise, when I declare:
srcset="/path/to/image.png 600w 400h"
…it does not mean that image.png is 600 pixels wide by 400 pixels tall. Instead, it means that an action should be taken if the
viewport matches those dimensions.
It took me a while to wrap my head around that distinction: I’m used to attributes describing the element they’re attached to, not the viewport.
Now for the really tricky bit: what do those numbers—600w and 400h—mean? Currently the spec is giving conflicting information.
Each image that’s listed in the srcset comma-separated list can have up to three values associated with it: w, h, and
x. The x is pretty clear: that’s the pixel density of the device. The w and h values refer to the width and height of the viewport
…but it’s not clear if they mean min-width/height or max-width/height.
If I’m taking a “Mobile First” approach to development, then srcset will meet my needs if w and h refer to
min-width and min-height.
In this example, I’ll just use w to keep things simple:
<img src="small.png" srcset="medium.png 600w, large.png 800w">
(Expected behaviour: use small.png unless the viewport is wider than 600 pixels, in which case use medium.png unless the viewport is wider than 800 pixels,
in which case use large.png).
If, on the other hand, w and h refer to max-width and max-height, I have to take a “Desktop First” approach:
<img src="large.png" srcset="medium.png 800w, small.png 600w">
(Expected behaviour: use large.png unless the viewport is narrower than 800 pixels, in which case use medium.png unless the viewport is narrower than 600
pixels, in which case use small.png).
One of the advantages of media queries is that, because they support both min- and max- width, they can be used in either use-case: “Mobile First” or
“Desktop First”.
Because the srcset syntax will support either min- or max- width (but not both), it will therefore favour one case at the expense of
the either.
Both use-cases are valid. Personally, I happen to use the “Mobile First” approach, but that doesn’t mean that other developers shouldn’t be able to take a
“Desktop First” approach if they want. By the same logic, I don’t much like the idea of srcset forcing me to take a “Desktop First” approach.
My only alternative, if I want to take a “Mobile First” approach, is to duplicate image paths and declare ludicrous breakpoints:
<img src="small.png" srcset="small.png 600w, medium.png 800w, large.png 99999w">
I hope that this part of the spec offers a way out:
for the purposes of this requirement, omitted width descriptors and height descriptors are considered to have the value “Infinity”
I think that means I should be able to write this:
<img src="small.png" srcset="small.png 600w, medium.png 800w, large.png">
It’s all quite confusing and srcset doesn’t have anything approaching the extensibility of media queries, but I hope we can get it to work
somehow.
Tagged with responsive images standards browsers whatwg w3c process markup html adaptive
Posted 16 May 2012, 6:33 pm
