Sometimes a project requires a very pretty content page filled with overlapping background images and floating text blocks that is not particularly easy to implement responsively using HTML. The relatively new element is a great tool for this problem (having significantly taller mobile images so that the there is white space to for the content to go above the photo's subject) but it is not supported on all browsers (ref: 1,2,3).

Luckily there a great polyfill, picturefill so there is no need for weird hacks.

Including both picturefill.min.js plugins/mutation/pf.mutation.min.js on the page will allow last year’s browser to display your lovely mobile images.

doge pictures

References

1 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture#Browser_compatibility
2 https://responsiveimages.org/
3 http://caniuse.com/#feat=picture