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 picture element and associated technologies, so we’d recommend heading over to the new Picturefill project site for examples, documentation, and support information. Also, it’s worth noting that the initial version of Picturefill (currently version 1.3) will continue to be maintained, as it may make sense to continue using it for a little while depending on your project support requirements (drawbacks to version 2 include a lack of fallback imagery in non-JavaScript environments, and an increased filesize).
This Picturefill release is an alpha, and we intend to have a beta release in the coming weeks as well. Stay tuned!