Nieman Foundation at Harvard
HOME
          
LATEST STORY
Why “Sorry, I don’t know” is sometimes the best answer: The Washington Post’s technology chief on its first AI chatbot
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.
Why “Sorry, I don’t know” is sometimes the best answer: The Washington Post’s technology chief on its first AI chatbot
“For Google, that might be failure mode…but for us, that is success,” says the Post’s Vineet Khosla
Browser cookies, as unkillable as cockroaches, won’t be leaving Google Chrome after all
Google — which planned to block third-party cookies in 2022, then 2023, then 2024, then 2025 — now says it won’t block them after all. A big win for adtech, but what about publishers?
Would you pay to be able to quit TikTok and Instagram? You’d be surprised how many would
“The relationship he has uncovered is more like the co-dependence seen in a destructive relationship, or the way we relate to addictive products such as tobacco that we know are doing us harm.”