Responsive images proposed by WHATWG

A post by Mathew Marquis on the W3C Responsive Images Community Group has outlined proposals to deal with responsive images on the web.

At present, most solutions require workarounds and scripts, and many ‘force’ users to download more data than should be necessary. However, with high-res displays likely to become commonplace over the next year and responsive web design increasingly popular among web designers, it’s clear standards need to keep up.

Marquis explained one proposal surrounds the existing 'img' element, adding syntax to deal with multiple sources by way of a new 'set' attribute. However, the community group proposes utilising the 'picture' element, with multiple 'source' elements to define images to be used for viewports of specific sizes and/or devices with specific pixel ratios.

Marquis said that the existing proposal wasn’t as developer-friendly as the one based around 'picture', and he asked for developer opinions, providing various means of making yourself heard at the end of the article.

The proposals have already sparked debate. Although developers appear broadly positive regarding the picture proposal, Adaptive Images creator Matt Wilcox argued 'set' was awful, with unclear syntax, an over-reliance on image dimensions and pixel density multipliers, and use of pixels “in an era where pixels are dying”. However, he also disliked the repetition within 'picture'. Others noted that the 'picture' syntax is at least consistent with that used in the 'video' element, although the term ‘picture’ isn’t as semantic as it should be.