Builder.io Image compatibility with Gatsby Image Plugin

Technical Questions
1

Are there any guides for using Builder.io Gatsby and images? There seems to be a compatibility plugin but it hasn’t been updated in ~2 years and isn’t compatible beyond Gatsby v2 (crossposting this to Gatsby support as well)

2

Hi @edward-simpson,

There is no specific guide currently available for Builder.io Gatsby and images. But the Gatsby Image Plugin lets you add optimized images to your site while maintaining high performance, which is compatible with builder, you can check that out.

Let us know if you have any further questions. Thank you!

3

Hi Manish,

Thanks, we use that plugin already, in hindsight my query is more regarding image fields in custom components, and getting that data in a format that can be used with the image plugin, are there any guides around this?

4

Hi @edward-simpson!

You can refer to the below links that might help

5

Hi Manish,

I’m very familiar with both of those pages but neither of them really address my request, the former is for custom components with no reference to integrating with GIP, the latter is specifically for GIP with no reference to integrating with Builder.io.

Builder.io will provide a static image URL (I presume), with no responsive/srcset images, and not matching the IGatsbyImageData type

6

Hi @edward-simpson,

Can you please share the compatibility errors you are experiencing and what version of the gatbsy-image-plugin you are using?

Alternatively, you can use Builder’s responsive block to render optimized images. Here is an example in our gatsby starter. gatsby-starter-builder/Hero.jsx at master · BuilderIO/gatsby-starter-builder · GitHub " & The Definitive Guide to Image Optimization.

7

Hi Manish,

It’s not compatibility errors as such, it’s that, as I mentioned, Builder io will produce a single static URL for the image, rather than being able to get the image in a range of sizes for proper responsiveness, e.g. here’s one I just set up for testing, tweaked to allow me to post this comment:

imageTest: “…cdn.builder.io/api/v1/image/assets%2Ff289ad0b78d24bf1a66ff0c35d02572c%2Ffe32a150593043e5b0b8acf09b1c22f”

I know I can use the responsive block but that doesn’t help because I need to create custom components containing/using multiple images, and the final product will only allow use of custom components.

It looks like the Image API - Image API - Builder.io docs are going to be the most helpful, and we will need to build out responsive images manually

For some reason I can’t post the above link directly, which seems like an odd thing to block

8

Hey @edward-simpson / @manish-sharma
Did you ever get a solution on how to use builder with gatsby-image so one could use childImageSharp in Gatsby?
Or is there any plans to update the plugin GitHub - BuilderIO/gatsby-builder-transform-images