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.
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-imageonly renders animgelement 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
picturetag, with differentsources.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: nonebased on media queries, which is sub-optimal since I don't want platforms downloading images that they won't even show up.