Implement Picture polyfill 2.1

Follow-up from #1883526: Decide on the picture polyfill to use.

The <picture>; element is officially coming to both Blink (Chrome + Opera) and WebKit (Safari & others). See picture element implementation in blink. <picture> is also being implemented for Firefox.

To fill the gap in the mean time, Picturefill 2.0 has been released.

I wasn't involved in this issue, so I'm not sure if this is accurate, but it sounds to me like we should close this issue, create a new one to upgrade to Picturefill 2.0, which seems to incorporate fixes for most if not all of the issues we filed? Together with #2207629: Update matchMedia library to latest release, that should address all our concerns?

Since picture has changed a lot in the mean time, we need to add support for both media queries and sizes, see http://picture.responsiveimages.org/

Steps NOT done:

1. Switch output to img tag if possible (nice to have)
2. Add alternative field formatter with support for sizes without needing a mapping (nice to have)
3. Discuss UI of breakpoint in #1701112: Advanced responsive images UI/UX for breakpoints

Steps done:

1. Update picturefill library to latest version
2. Make sure picture and source tags are correct
3. We need to remove the setting of width and height on source elements
4. Add type support for source tag (code, not UI), can now use transformMimeType
5. Allow source tag without a media attribute (code, not UI)
6. Add support for sizes on source tag
7. Update UI of responsive images mapping
8. Add work around for IE9, http://scottjehl.github.io/picturefill/#ie9