Responsive images polyfill and why IE9 still sort of… sucks…

With the release of Chrome 38 stable, responsive images are here. Now of course if the browser being used to view your site isn’t Chrome 38 then you’ll need a polyfill to add the missing functionality to the less functional browser.

Enter; http://scottjehl.github.io/picturefill/

From the site they describe picturefill as:

…allowing web developers to deliver an appropriate image to every user depending on a variety of conditions like screen size, viewport size, screen resolution, and more. Picturefill is a JavaScript file (or a polyfill to be more specific) that enables support for the picture element and associated features in browsers that do not yet support them, so you can start using them today!

I just wanted to highlight this polyfill as I believe it to be important in the willingness of developers to adopt responsive image, and adopting responsive images is increasingly essential as more and more people use more and more devices to access more and more content (phew!).

I do want to pull out one fact from the documentation for developers who don’t like to RTFM as they may misinterpret the hack requirement for the polyfill not working.

In IE9 (ah lovely IE9) there is a strange requirement of wrapping the <source> tags of the <picture> element within a <video> element! Because that makes sense to IE9! It looks like this

If you do actually want to know why we need to do this for IE9 you can read the browser support section of the picture-fill site. Id highly suggest reading it as it’s short and means you’ll be ready for any of the known pitfalls.

 

Leave a Reply

Your email address will not be published. Required fields are marked *