Matt Bailey
Designer & Developer

Responsive Images With The picture Element and Picturefill 2

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?

  1. The img tag with sizes and srcset attributes
  2. The picture element

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?

Browser vendors are only just starting to implement the new spec, but this shouldn’t stop you using it. In a recent blog post Filament Group released an updated version of their Picturefill polyfill.

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 sizes and srcset attributes on img tags checkout this excellent article by Eric Portis.

Get the Picturefill 2 polyfill and start using responsive images now →