Update images to meet requirements for responsive image spec

[CSergienko]

We need to update the way we handle images to provide the necessary data to work well with the new responsive images spec, primarily the <picture> tag as per the MDN doc and HTML spec.

Currently, we may upload multiple images to content in our CMS, and ideally we would extend that existing functionality in order to enable the following:

1. Uploading multiple images, each of which may be translated into a <source>
2. Providing a field on the model for each image which may be mapped to the media= attribute.
3. Related to point 2 above; the ability, possibly via fixtures, to create reusable media queries, and obfuscate the complexity of media queries from the content manager, thus allowing greater flexibility if required and at the same time enforcing a standardised set.

Thus, given the following data in the CMS:

image1.png | No media query fixture
image2.png | Desktop media query fixture
image3.png | Mobile media query fixture
image4.png | Tablet media query fixture

...the data would be mapped in the markup as such:

<picture>
    <source srcset="image1_<size>.png <size>" />
    <source srcset="image2_<size>.png <size>" media="(min-width: 1280px)" />
    <source srcset="image3_<size>.png <size>" media="(max-width: 480px)" />
    <source srcset="image4_<size>.png <size>" media="(min-width: 481px) and (max-width: 768px)" />

    <img src="image1_<size>.png" />
</picture>

In the above example, <size> refers to the photologue generated size variation. Each srcset would have a range of sizes as defined in the photologue fixtures, and were omitted from this example for brevity.