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

Why?

Little kids have an endless supply of Why! Why is everything the way it is? Why do people do the things they do? We grownups don’t pester each other with a relentless stream of why?, and that’s mostly good. But kids could teach us to ask why when it needs to be asked: why are only some people able to build lives they love and find fulfilling work? Does everyone truly have the same chance, or do some of us start the game already a few rolls of the dice ahead? In order to grow, we have to ask the hard questions.

From the Blog

Content-First Design

Video game designers start with the story. What would our work look like if we did too? Steph Hay advocates for a content-first approach to design and walks through how to start prototyping your content.