Add media query support to Image

[tomgenoni]

This allows for different aspect ratios and/or images at different breakpoints. Couple use cases:

1. Design calls for square image of cat at mobile, landscape version of same cat image above the small breakpoint
2. Design calls for square image of cat at mobile, landscape image of dog above the small breakpoint

Possible API

1. No aspect ratio

<ImageService image="321">
    ...
</ImageService>

2. With aspect ratio

<ImageService image={{id: '321', aspectRatio: '1-1'}}>
    ...
</ImageService>

3. With aspect ratio and media-query

<ImageService 
        image={{id: '321', aspectRatio: '1-1'}}
        imageAboveSmall={{id: '789', aspectRatio: '8-3'}}
    >
    ...
</ImageService>

Note that in #3 the HTML output must go from largest to smallest media query.

<picture>
    <source srcset="321.jpg..." media="(min-width: 701px)">
    <source srcset="321.jpg..." media="(min-width: 482px)">
    <source srcset="321.jpg...">
    <img srcset="default.jpg" alt="My default image">
</picture>```

[danoc]

Related: gatsbyjs/gatsby#13164

[wardpeet]

We just published gatsbyjs/gatsby#13164

Successfully published:
 - [email protected]

You should be able to add an array of fluid/fixed objects to gatsby image with a media property.

To see it in action you can visit https://github.com/gatsbyjs/gatsby/blob/c9ea948f068c3ba0be11adae4570900445be0922/examples/using-gatsby-image/src/components/floating-image.js#L43-L53

[danoc]

Sweet, thanks @wardpeet! We'll definitely be looking at that API for inspiration.

[danoc]

We decided not do to this in favor of letting the consumer handle it.