For the devs in the house: Picturefill [1] , the polyfill that enables responsive images in modern browsers today, hit 2.0 [2] 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.
If you’ve been paying attention to the growth of responsive web design [3] â€" 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 ba ndwidth intensive, it’s a real issue.
The new, native [4] <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 [5] shows a photo of President Obama and a grou p 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 [6] of Jeffrey Zeldman’s [7] The Big Web Show [8] podcast with Scott Jehl [9] , project lead on Picturefill (and familiar in news circles as one of the people behind the 2012 BostonGlobe.com responsive design).
â€" Joshua Benton
Links
- ^ Picturefill (scottjehl.github.io)
- ^ hit 2.0 (github.com)
- ^ responsive web design (en.wikipedia.org)
- ^ new, native (www.w3.org)
- ^ Picturefill demo (scottjehl.github.io)
- ^ recent episode (www.muleradio.net)
- ^ Jeffrey Zeldma n’s (www.zeldman.com)
- ^ The Big Web Show (www.muleradio.net)
- ^ Scott Jehl (scottjehl.com)
No comments:
Post a Comment