Responsive Images and Web Standards at the Turning Point

by Mat Marquis ∙ 41 Comments

Responsible responsive design demands responsive images, images whose dimensions and file size suit the viewport and bandwidth of the receiving device. As HTML provides no standard element to achieve this purpose, serving responsive images has meant using JavaScript trickery, and accepting that your solution will fail for some users. Then a few months ago, in response to an article here, a W3C Responsive Images Community Group formed, and proposed a simple-to-understand HTML picture element capable of serving responsive images. The group even delivered picture functionality to older browsers via two polyfills: namely, Scott Jehl's Picturefill and Abban Dunne's jQuery Picture. The WHATWG has responded by ignoring the community's work on the picture element, and proposing a more complicated img set element. Which proposed standard is better, and for whom? Which will win? And what can you do to help avert an "us versus them" crisis that could hurt end-users and turn developers off to the standards process? ALA's own Mat Marquis explains the ins and outs of responsive images and web standards at the turning point.

Columnists

Karen McGrane on Content

The Alternative is Nothing

We’re witnessing one of the latest waves of technological disruption, as mobile devices put access to the internet in the hands of people who previously never had that power.

From the Blog

Ughck. Images.

In a follow-up to his ALA article Mo’ Pixels, Mo’ Problems, Dave Rupert talks about all the progress we've made toward responsive image solutions — by which he means no progress has been made.

Google Changes Rankings of Smartphone Search Results

Google has started decreasing the ranking of sites with misconfigured mobile content redirects and errors. Highly recommended for any developer who cares about site rankings in Google (i.e. all of them).