Nieman Foundation at Harvard
HOME
          
LATEST STORY
After criticism over “viewpoint diversity,” NPR adds new layers of editorial oversight
ABOUT                    SUBSCRIBE
May 5, 2014, 9:20 a.m.
LINK: scottjehl.github.io  ➚   |   Posted by: Joshua Benton   |   May 5, 2014

For the devs in the house: Picturefill, the polyfill that enables responsive images in modern browsers today, hit 2.0 late last week, which means it now brings most of the features of the native <picture> tag — coming soon to a browser near you — to today’s web.

picturefillIf you’ve been paying attention to the growth of responsive web design — the idea that the same web page should efficiently and beautifully reshape itself, depending on the size of device it’s being viewed on — you know that one of its biggest outstanding issues is what to do about images. Responsive design in its rawest state sends the same big beautiful image you’d see on a 27″ desktop to a 3.5″ iPhone 3GS. That can mean a big, bandwidth-heavy file getting shoved down to the smallest device, even though all those extra pixels won’t be visible. Given that big images are a big part of what makes today’s web so bandwidth intensive, it’s a real issue.

The new, native <picture> html tag aims to fix this, even though it hasn’t been implemented in most major browsers yet. (Picturefill lets you write code as if the <picture> tag existed today and makes up the difference with JavaScript.) It lets you send a small image to that iPhone 3GS and a big one to the desktop. It even lets you send different images altogether if you’d like — the Picturefill demo shows a photo of President Obama and a group of soldiers cropped differently at different browser widths.

It’s not a perfect solution, unfortunately. Screen sizes are an imperfect proxy for bandwidth; your iPhone might be on wifi, after all, while your laptop might be connected to a tenuous 3G cellular link. (The native <picture> implementation should work around that limit, allowing the browser to request lower quality images over a bad connection.) And the fact that smartphones and tablets have such pixel-dense screens — “Retina displays,” in Apple parlance — can mean your smartphone has nearly as many display pixels as a screen that’s physically several times larger. (Picturefill allows different images for different resolutions, yes, but the rise of Retina screens makes the potential bandwidth savings smaller.) Still, it’s a start, and Picturefill 2.0 lets you get going on it today.

If you want to geek out on responsive images, I’d recommend the recent episode of Jeffrey Zeldman’s The Big Web Show podcast with Scott Jehl, project lead on Picturefill (and familiar in news circles as one of the people behind the 2012 BostonGlobe.com responsive design).

Show tags
 
Join the 60,000 who get the freshest future-of-journalism news in our daily email.
After criticism over “viewpoint diversity,” NPR adds new layers of editorial oversight
“We will all have to adjust to a new workflow. If it is a bottleneck, it will be a failure.”
“Impossible to approach the reporting the way I normally would”: How Rachel Aviv wrote that New Yorker story on Lucy Letby
“So much of the media coverage — and the trial itself — started at the point at which we’ve determined that [Lucy] Letby is an evil murderer; all her texts, notes, and movements are then viewed through that lens.”
Increasingly stress-inducing subject lines helped The Intercept surpass its fundraising goal
“We feel like we really owe it to our readers to be honest about the stakes and to let them know that we truly cannot do this work without them.”