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

Rachel Andrew on the Business of Web Dev

Software Audits for the Tiny Business

Routine software audits sound like just about the most boring thing in the world. But losing access to a DNS server, missing important alerts from a developer, or paying for a forgotten service are adventures nobody needs. Often, a contractor or an employee sets up an account or buys software for company use. When that person moves to another role, important license or login information can get lost in the shuffle. Rachel Andrew wants you to love the drab old software audit. It’s your best ally for preventing nasty surprises.

From the Blog

Feedback Phases and Personas

You want feedback in the early stages of any project, but how can you make sure you're getting the most out of it? Anthony Colangelo recommends a five-stage feedback process to gather input from unique feedback personas every step of the way.

On Our Radar: Precious Humans

There are plenty of links and a minimum of one (1) gif awaiting you, as always, in this week's On Our Radar. But first, we want to talk about someone who has inspired all of us: Molly Holzschlag, an influential web standards champion and dear friend.