The <picture> vs srcset argument

The responsive images argument has been going for over 12 months now and there’s no sign of it ending soon.  It’s an issue that most of us face on a daily basis yet we’re no closer to being given a suitable solution.

Unsurprisingly when you 10 chefs in a kitchen you end up with bickering, in fighting, and several solutions to prepare the meals when you only need one.

In these cases one group is sure to become despondent and upset with the other.  That is the way of the kitchen, that is the way of the world.

If you take those few chefs and multiply it into the hundreds, remove them from the kitchen and into the wide world across multiple timezones and provide them several different ways to communicate with each other… then you’ve probably arrived at the <picture> vs srcset argument.

While I would love to explain in details what has happened, far more smarter people that I have already walked this ground so I will simply provide you access to what they have to say. 

HTML5 Adaptive Images, end of round one – In this post Bruce Lawson takes a look at the decision on HTML5 Doctor.  While he was the person that came up with the <picture> element at the beginning (other’s also came up with the same idea independently) it was good to see him happy that a decision was made and that the issue was being looked at in the first place. 

Secret SRC – Jeremey Keith takes the sting out of the debate by offering an informative overview of the scenarios that lead to the inclusion of the srcset over the picture element before going into details about exactly what the srcset actually does, how it does it and how that affects our implementations. 

WTFWG – This has the award for the best blog post title.  Tim Kadlec (awesome organiser of the BD Conference) is a little pissed off with how everything has gone down with regards to the decision.  From this blog post it appears as though the community group followed everything that WHATWG asked of them before an Apple employee submitted a less favoured solution that was immediately added to the spec.  I like Tim, but don’t let it be the only article that you read as Bruce and Jeremey (articles below) provide yet another view on the situation.  Remember it’s not so much the decision that has annoyed Tim, but the way in which that decision was reached.

Responsive Images and Web Standards at the turning point – Matt Wilcox, the creator of the W3C Responsive Image Community Group, goes into enormous detail about how he believes that the community has been ignored in favour of WHATWG and what is easier for browsers.

I encourage you to read all four of these articles above in detail to get an idea about what the situation is today.  I also encourage you to join the mailing lists, IRC channels or community working groups and put your two cents in as developers and web authors.  If you don’t speak up, you will not be heard and will have no place to complain if the implementation you wanted is thrown out.

Other articles…

You guys are still all headliners to me, but I just can’t put everyone up there.  This is a list of replies, retorts, suggestions and other AMAZING ideas that the web community has come up with.

Screwing the srcset – Here Stu Robertson takes a look at the first pollyfill that has been created for the srcset attribute and some possible fixes to make it a little better and more future friendly.

Media Queries Can’t Be Used for Resolution Negotiation – an explanation about why media queries can not alone decide what media to use (kind of ironic).  This looks at download speeds, latency, and all the issues that go along with the current solution.

The Egotistical Puppet King & I – If any good came out of this issue it’s the fact that the CSS Squirrel is drawing again.

Responsive Images using CSS3 – Nicolas Gallagher is far to smart for his own good, and he’s at it again with another brilliant suggestion.  He takes a look at another possible solution that relies on CSS3 rather than the srcset solution.  Nicolas also points out the flaws in his approach… what a nice chap!

Some early thoughts on img@srcset in the real world – Scott Jehl says…. Syntax aside… if srcset was here to stay regardless of what we want, is there any way we could make it work in existing browsers without introducing unnecessary overhead or potentially buggy markup? At a glance, it looks shaky to me.

Subscribe to our Newsletter

Add your email address and receive an email every Friday covering off everything worth knowing about building your websites responsively.