Picturefill 2.0: Use the picture element today
April 2020 note: Hi! Just a quick note to say that this post is pretty old, and might contain outdated advice or links. We're keeping it online, but recommend that you check newer posts to see if there's a better approach.
We started the Picturefill project over 2 years ago to provide an easy, responsible, and immediately-usable approach to delivering appropriate images to every browser and device – a goal commonly called “responsive images.” Since then, the approach has been used widely, on sites like Microsoft.com, Dribbble.com, and more.
Until now, Picturefill supported
span-based HTML markup that mimicked a pattern we hoped would one day become a web standard: namely, the
picture element and its associated features. Following the hard work of the Responsive Images Community Group (chaired by Filament Group’s own Mat Marquis), we’re pleased to report that there are native
picture implementations in development for Chrome, Firefox, Opera, and potentially others!
With this news, this week we released a new version of Picturefill that will make the real
picture element work in existing browsers, which means you can start using
picture today. Picturefill is endorsed by the RICG as well, and we’re getting great help from the community to ensure that the implementation lines up with the spec.
There’s plenty to learn about using the new
This Picturefill release is an alpha, and we intend to have a beta release in the coming weeks as well. Stay tuned!