Responsive Images With The picture Element and Picturefill 2
24 April, 2014
Just want the good stuff? Get straight to the Picturefill 2 polyfill →
Back in February of this year, at An Event Apart in Atlanta, Mat Marqis confirmed that browser vendors have finally agreed to support the
picture element. You can read Luke Wroblewski’s notes on the talk here.
This is fantastic news as we can finally stop asking what we’re going to do about the problem of ‘responsive images’ and start implementing them!
What are my options?
These two options finally give us a huge amount of control over how we can work with images across resolutions, pixel densities and so on.
What about browser support?
So how do I use the new spec and polyfill?
Details on using the polyfill and the
picture element can be found on Scott Jehl’s Filament Group Github page.
For more information on using the
srcset attributes on
img tags checkout this excellent article by Eric Portis.