Nieman Foundation at Harvard
HOME
          
LATEST STORY
Five years in, Scalawag is reframing who gets included in “the South” (and how to build a business off it)
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 Show comments / Leave a comment
 
Join the 50,000 who get the freshest future-of-journalism news in our daily email.
Five years in, Scalawag is reframing who gets included in “the South” (and how to build a business off it)
“What does it mean for a diverse group of young Southerners to be producing content that is read by mostly white folks — and white folks that are older than them?”
Galaxy brain: The neuroscience of how fake news grabs our attention, produces false memories, and appeals to our emotions
“Highly emotionally provocative information stands a stronger chance of lingering in our minds and being incorporated into long-term memory banks.”
Newsonomics: By selling to America’s worst newspaper owners, Michael Ferro ushers the vultures into Tribune
Astonishingly, history might argue that Sam Zell was only the third-worst owner in recent Tribune history.