API documentation help: How to use generateImageData from gatsby-plugin-image 🤷🏼‍♂️

[JPrisk]

Hey,

I'm looking to update gatsby-storyblok-image to use the new and improved gatsby-plugin-image.

I've found the information on the adding gatsby image support to be helpful and for this use case the images will be referencing a URL-based image API.

Although the getImageData function is sufficient for most - i'd also like to art direct images and have a bit more control over how the srcset gets generated. I looked at the list of source plugins to see how other source plugins handle images served from CDNs and saw that Sanity is using the generateImageData function under the hood (reference).

Is there any information about using generateImageData outside of the resolvers step? Will it be possible to switch between two images in the srcset using this approach?

[ascorbic]

Hey! Could you explain a bit about what you mean "outside the resolvers step"? Are you referring to using it at runtime? It would be helpful to know a bit more about exactly what you're trying to achieve. We do have an example of art direction, so maybe that can help?

[JPrisk]

Hey @ascorbic thanks for the reply - yea, was looking at using generateImageData at runtime, is that possible? the art direction example looks like it might be exactly what I need, how did I miss that 🙃

[ascorbic]

Yes, getImageData is just a wrapper around generateImageData so you can use it at runtime. I would strongly discourage trying to change srcsets on the fly though (unless it's a different image): you're working against the browser and making it harder to optimise. The best is if you can generate the correct set of sources before with media properties so that the browser can handle it. The art direction helper might work there.

[pragmaticpat]

@JPrisk - did @ascorbic 's answer get you what you need?

[JPrisk]

Hey @pragmaticpat, yea @ascorbic's answer was very helpful - thanks!

[pragmaticpat]

Excellent!