# Image Incorrectly Lazy loading

**URL:** <https://forum.builder.io/t/image-incorrectly-lazy-loading/3682>\
**Category:** Bugs\
**Created:** [June 6, 2023, 1:43am UTC](https://forum.builder.io/t/image-incorrectly-lazy-loading/3682 "2023-06-06T01:43:59Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Simon](https://avatars.discourse-cdn.com/v4/letter/s/f07891/32.png) [@Simon](https://forum.builder.io/u/Simon)\
**Post date:** [June 6, 2023, 1:43am UTC](https://forum.builder.io/t/image-incorrectly-lazy-loading/3682/1 "2023-06-06T01:43:59Z")

</div>

Hi,

I’ve been trying to get images above the fold (eg Hero image) to NOT be lazy loaded. It always is.

What I’ve tried:

1. Setting Lazy load images to Never in Advanced Settings-\> Performance.
2. Setting lazy: false in the component json (cmd+e)
3. Setting the lazy prop to false for the Image component in data-\>code-\>json
4. Created a custom component that takes image as an an input parameter and manually using the Image component from @builder/react and setting lazy=false.

Another quirk that is annoying is that if the image is in a Symbol (i.e. a Page Hero symbol) it takes even longer to load. It’s like the symbol is loaded dynamically after hydration that then causes a significant layout shift ☹

**Builder content link**

> **[Builder.io: Drag & Drop Headless CMS](https://builder.io/content/af13918f85034834b37a50b722a8d99c)**
>
> Drag and drop with your components, right within your existing site or app. Build and optimize digital experiences for any tech stack, visually..

**Builder public api key**  
83f2d95e39d4456aa87de5837f1ad558

**Detailed steps to reproduce the bug**  
Using gatsby as the stack put any image on a builder page and try to make it NOT lazy loaded.

**Code stack you are integrating Builder with**  
Gatsby

---

<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:** [June 6, 2023, 2:30am UTC](https://forum.builder.io/t/image-incorrectly-lazy-loading/3682/2 "2023-06-06T02:30:46Z")

</div>

Hi @Simon,

For lazy loading issues, you may find help at our forum post[Speed issues with Builder/Shopify](https://forum.builder.io/t/speed-issues-with-builder-shopify/2498)

If you have turned on lazy loading for images in your space settings, Builder’s SDK will observe the element and wait until it’s inside the viewport before loading that image.

Using negative margin values on image containers will affect their normal position and could cause lazy loading to not pick up when placed inside a carousel or a scroller.

> [@Images are not lazy loaded when used in a box with negative margins inside a scroller](https://forum.builder.io/t/images-are-not-lazy-loaded-when-used-in-a-box-with-negative-margins-inside-a-scroller/492):
>
> If you have turned on lazy loading for images in your space settings, Builder’s SDK will observe the element and wait until it’s inside the viewport before loading that image. Using negative margin values on image containers will affect its normal position and could cause lazy loading to not pick up when placed inside a carousel or a scroller.

---

<div class="post-metadata">

**Author:** ![Simon](https://avatars.discourse-cdn.com/v4/letter/s/f07891/32.png) [@Simon](https://forum.builder.io/u/Simon)\
**Post date:** [June 6, 2023, 2:43am UTC](https://forum.builder.io/t/image-incorrectly-lazy-loading/3682/3 "2023-06-06T02:43:33Z")

</div>

Hi Manish,

I guess that’s the issue. I’ve tuned lazy loading off but it is still being loaded as Lazy. I’m away from my keyboard at the moment but will try and provide more concrete examples other than those already given.

---

<div class="post-metadata">

**Author:** ![Simon](https://avatars.discourse-cdn.com/v4/letter/s/f07891/32.png) [@Simon](https://forum.builder.io/u/Simon)\
**Post date:** [June 8, 2023, 6:48am UTC](https://forum.builder.io/t/image-incorrectly-lazy-loading/3682/4 "2023-06-08T06:48:42Z")

</div>

Hi @manish-sharma,

Just wanted to follow up here. In the end I couldn’t resolve this in Gatsby, I ended up switching to NextJS for this project and the problem no longer existed.

Thanks,

Simon
