Nieman Foundation at Harvard
HOME
          
LATEST STORY
There’s another reason the L.A. Times’ AI-generated opinion ratings are bad (this one doesn’t involve the Klan)
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.
There’s another reason the L.A. Times’ AI-generated opinion ratings are bad (this one doesn’t involve the Klan)
At a time of increasing polarization and rigid ideologies, the L.A. Times has decided it wants to make its opinion pieces less persuasive to readers by increasing the cost of changing your mind.
The NBA’s next big insider may be an outsider
While insiders typically work for established media companies like ESPN, Jake Fischer operates out of his Brooklyn apartment and publishes scoops behind a paywall on Substack. It’s not even his own Substack.
Wired’s un-paywalling of stories built on public data is a reminder of its role in the information ecosystem
Trump’s wholesale destruction of the information-generating sectors of the federal government will have implications that go far beyond .gov domains.