Nieman Foundation at Harvard
HOME
          
LATEST STORY
Leaked code, blocked journalists, and billions gone: It’s just another few days in late Twitter
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.
Leaked code, blocked journalists, and billions gone: It’s just another few days in late Twitter
Or how to lose $24 billion without even trying.
The corrections dilemma: Admitting your mistakes increases accuracy but reduces audience trust, a new study finds
“If posting corrections means a hit to their credibility in the short term, that is a risk they should be willing to take.”
Why journalism schools won’t quit Fox News
“In interviews for this story, the harshest position against Fox News among journalism deans seemed to be a sort of double-secret probation.”