A List Apart

Menu Issue № 351

Standard vs. standard: which way of creating responsive images is best for the web?

Responsive Images and Web Standards at the Turning Point

by Mat Marquis · 42 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.

More from A List Apart

Columnists

Rian van der Merwe on A View from a Different Valley

The Distance to Here

The people who determine product strategy move through a world of analysts, media, division leads, shareholders, stakeholders, monetization, and marketability. They seldom get a chance to come back to the corner where users and designers mingle. Rian van der Merwe suspects that increasing the communication distance between the decision makers and the product’s builders and users leads to a loss of perspective—and the results are products with marketable features that no one really needs.

From the Blog

On Our Radar: Faux-Naïve

On our radar these days: Google rebrands. A web animation expert refuses to speak at your conference if it doesn’t have a code of conduct. Preload hints can help you load your web fonts faster. A new site launches that hopes to bridge the gender gap in communication design. Your weekend reading awaits!

On Our Radar: Pretty Advanced Machine Learning

Between bots and blogging, newsrooms are getting into Slack in some very cool ways (take some inspiration and apply for a Knight-Mozilla Fellowship!). Plus more recommended reading: revisiting Cameron’s World; the joy of generalists; the finer points of faving; and one really excellent gif of cats.