# Builder.io Image compatibility with Gatsby Image Plugin

**URL:** <https://forum.builder.io/t/builder-io-image-compatibility-with-gatsby-image-plugin/2616>\
**Category:** Technical Questions\
**Tags:** gatsby\
**Created:** [September 16, 2022, 11:31am UTC](https://forum.builder.io/t/builder-io-image-compatibility-with-gatsby-image-plugin/2616 "2022-09-16T11:31:19Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![edward-simpson](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/edward-simpson/32/1894_2.png) [@edward-simpson](https://forum.builder.io/u/edward-simpson)\
**Post date:** [September 16, 2022, 11:31am UTC](https://forum.builder.io/t/builder-io-image-compatibility-with-gatsby-image-plugin/2616/1 "2022-09-16T11:31:19Z")

</div>

Are there any guides for using [Builder.io](http://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)

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [September 16, 2022, 1:03pm UTC](https://forum.builder.io/t/builder-io-image-compatibility-with-gatsby-image-plugin/2616/2 "2022-09-16T13:03:43Z")

</div>

Hi @edward-simpson,

There is no specific guide currently available for [Builder.io](http://Builder.io) Gatsby and images. But the [Gatsby Image Plugin](https://www.gatsbyjs.com/plugins/gatsby-plugin-image/) 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!

---

<div class="post-metadata">

**Author:** ![edward-simpson](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/edward-simpson/32/1894_2.png) [@edward-simpson](https://forum.builder.io/u/edward-simpson)\
**Post date:** [September 16, 2022, 1:27pm UTC](https://forum.builder.io/t/builder-io-image-compatibility-with-gatsby-image-plugin/2616/3 "2022-09-16T13:27:31Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [September 16, 2022, 6:00pm UTC](https://forum.builder.io/t/builder-io-image-compatibility-with-gatsby-image-plugin/2616/4 "2022-09-16T18:00:03Z")

</div>

Hi @edward-simpson!

You can refer to the below links that might help

> **[Intro to Integrating Custom Components - Builder.io](https://www.builder.io/c/docs/custom-components-intro)**
>
> Build and optimize digital experiences for any tech stack, visually.

> **[Gatsby Image plugin | Gatsby](https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image/)**
>
> This guide will show you how to configure your images, including choosing layouts, placeholders and image processing options. While most of…

---

<div class="post-metadata">

**Author:** ![edward-simpson](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/edward-simpson/32/1894_2.png) [@edward-simpson](https://forum.builder.io/u/edward-simpson)\
**Post date:** [September 16, 2022, 7:37pm UTC](https://forum.builder.io/t/builder-io-image-compatibility-with-gatsby-image-plugin/2616/5 "2022-09-16T19:37:54Z")

</div>

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](http://Builder.io).

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

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [September 19, 2022, 3:45pm UTC](https://forum.builder.io/t/builder-io-image-compatibility-with-gatsby-image-plugin/2616/6 "2022-09-19T15:45:35Z")

</div>

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](https://github.com/BuilderIO/gatsby-starter-builder/blob/master/src/components/Hero/Hero.jsx#L41-L42) " & [The Definitive Guide to Image Optimization](https://www.builder.io/blog/the-definitive-guide-to-image-optimization).

---

<div class="post-metadata">

**Author:** ![edward-simpson](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/edward-simpson/32/1894_2.png) [@edward-simpson](https://forum.builder.io/u/edward-simpson)\
**Post date:** [September 19, 2022, 5:41pm UTC](https://forum.builder.io/t/builder-io-image-compatibility-with-gatsby-image-plugin/2616/7 "2022-09-19T17:41:25Z")

</div>

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](https://www.builder.io/c/docs/image-api) 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

---

<div class="post-metadata">

**Author:** ![fred](https://avatars.discourse-cdn.com/v4/letter/f/db5fbb/32.png) [@fred](https://forum.builder.io/u/fred)\
**Post date:** [May 8, 2023, 2:59pm UTC](https://forum.builder.io/t/builder-io-image-compatibility-with-gatsby-image-plugin/2616/8 "2023-05-08T14:59:13Z")

</div>

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](https://github.com/BuilderIO/gatsby-builder-transform-images)
