Gatsby: [gatsby-image] Art direction

[Yurickh]

Description

I needed a way to set up gatsby-image to work alongside _art direction_. That is, use different image sources for different display sizes.

Currently gatsby-image only renders an img element with some div wrappers with a beautiful srcset created from different resolutions from a given image.

My suggestion is to open up to receive more than one image and wrap it up in a picture tag, with different sources.

I don't know if this is in line with the purpose of the plugin, but would surely be nice to have all the capabilities of the plugin with the possibility of the art direction.

Expected result

I should be able to render from a list of different images depending on screen size/resolution.

Actual result

But I'm currently able to choose only one image to render. In order to achieve a similar result, I need to render multiple images and display: none based on media queries, which is sub-optimal since I don't want platforms downloading images that they won't even show up.

[KyleAMathews]

This would be excellent!

I'm totally open to adding this to gatsby-image. I wonder if it might be simpler in a separate component? I'm not sure — I haven't used art direction ideas on websites before — but it's not a bad thing to have more than one component.

BTW, do browsers really download images that have display: none? I thought they didn't.

[Yurickh]

BTW, do browsers really download images that have display: none? I thought they didn't.

AFAIK, they still do it yeah.
From what I've searched, it's not common behaviour to stop downloading images with display: none. This site is a great way to check if your does.
_(Edit: Looks like Opera is the only one that actually is smart enough to not download them)_

I wonder if it might be simpler in a separate component?

It would probably be a fork, or something, since I loved the svg pre-render and the imagesharp api, and really wanted to have that added to the art direction as well.

[skube]

Tools like http://www.responsivebreakpoints.com/ are handy for generating the appropriate code and images.

It would be the holy grail if gatsby-image could handle art-direction on top on what it already amazingly does.

[KyleAMathews]

Due to the high volume of issues, we're closing out older ones without recent activity. Please open a new issue if you need help!