# Lazy loading and image **URL:** \ **Category:** General\ **Created:** [October 17, 2023, 3:27pm UTC](https://forum.builder.io/t/lazy-loading-and-image/4335 "2023-10-17T15:27:21Z")\ **Posts on this page:** 10\ **Page:** 1
**Author:** ![jasperkooij](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/jasperkooij/32/2991_2.png) [@jasperkooij](https://forum.builder.io/u/jasperkooij)\ **Post date:** [October 17, 2023, 3:27pm UTC](https://forum.builder.io/t/lazy-loading-and-image/4335/1 "2023-10-17T15:27:21Z")
Hello, I’m diving into Builder with Nextjs. After an initial build of a project using pages in Builder, I noticed all images were lazy loaded. My question is: How can I set priority loading vs lazy loading? I’ve seen references about the space setting but that does not seem to be available for me ![Screenshot 2023-10-17 at 10.20.14](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/5/597347fa5ec875e2edcabecf0fc0c900c43f9106.png). Is there a way to set a `fetchpriority` ? How do I avoid CLS with images out of the page builder? Can an image be configured with blur up or placeholder? Is there a way to have `Nextjs Image` handle images out of Builder or does that require building a custom component that needs to be registered in Builder? ---
**Author:** ![JuliusGD](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/juliusgd/32/2523_2.png) [@JuliusGD](https://forum.builder.io/u/JuliusGD)\ **Post date:** [October 17, 2023, 5:41pm UTC](https://forum.builder.io/t/lazy-loading-and-image/4335/2 "2023-10-17T17:41:38Z")
Hello jasperkooij, All Builder Components are json objects you would be free to access. By right clicking on the image layer and selecting `JSON View` , you can specify which images are lazy loaded as pictured, below: ![ED433258-B0D2-448B-B1EF-7D648309F469_4_5005_c](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/5/5a9b7951b8681f9b570c686c161c03cf7ea7ec7a.jpeg) Regarding Image optimization and Content Layout Shifts, I was able to locate the following article written by our Director of Technology which addresses both of your concerns: > **[How To Improve Lighthouse Scores by Avoiding Layout Shifts](https://www.builder.io/blog/how-to-improve-lighthouse-scores-by-avoiding-img-layout-shifts)** > > The correct aspect ratio will improve your Lighthouse scores. Layout shifts can happen for many reasons, dive into how images can have a negative effect. As for image hosting, Builder can serve images hosted by 3rd parties. Please let me know if there is any more information I may be able to provide. ---
**Author:** ![jasperkooij](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/jasperkooij/32/2991_2.png) [@jasperkooij](https://forum.builder.io/u/jasperkooij)\ **Post date:** [October 17, 2023, 6:26pm UTC](https://forum.builder.io/t/lazy-loading-and-image/4335/3 "2023-10-17T18:26:20Z")
Aha, I did see the code option before but changed the JSX, not the JSON. Let me give that a try > [@JuliusGD](#): > > `JSON View` , you can specify which images are lazy lo ---
**Author:** ![jasperkooij](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/jasperkooij/32/2991_2.png) [@jasperkooij](https://forum.builder.io/u/jasperkooij)\ **Post date:** [October 17, 2023, 7:58pm UTC](https://forum.builder.io/t/lazy-loading-and-image/4335/4 "2023-10-17T19:58:57Z")
No luck so far ![Screenshot 2023-10-17 at 14.41.06](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/d/d5f841f8f98f54a97b99a95861314ec2a539eb02.png) I’ve changed the alt tag a few times just to make sure I’m getting the update but it still stays lazy loaded ![Screenshot 2023-10-17 at 14.58.43](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/f/f6f7095e2cc27195a92503ca7db35464e2469eb3.png) ---
**Author:** ![JuliusGD](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/juliusgd/32/2523_2.png) [@JuliusGD](https://forum.builder.io/u/JuliusGD)\ **Post date:** [October 20, 2023, 4:33pm UTC](https://forum.builder.io/t/lazy-loading-and-image/4335/5 "2023-10-20T16:33:37Z")
Hello jasperkooij, I have been able to reproduce the experience of JSON View lazy boolean value not affecting the Published or Draft Content as expected. Please look forward to more information from me, soon. ---
**Author:** ![jasperkooij](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/jasperkooij/32/2991_2.png) [@jasperkooij](https://forum.builder.io/u/jasperkooij)\ **Post date:** [October 20, 2023, 7:35pm UTC](https://forum.builder.io/t/lazy-loading-and-image/4335/6 "2023-10-20T19:35:22Z")
Thank you for looking into this! ---
**Author:** ![JuliusGD](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/juliusgd/32/2523_2.png) [@JuliusGD](https://forum.builder.io/u/JuliusGD)\ **Post date:** [October 31, 2023, 7:58pm UTC](https://forum.builder.io/t/lazy-loading-and-image/4335/7 "2023-10-31T19:58:18Z")
Hello jasperkooij, I’ve been informed that our React Gen 2 SDK at this time will always lazy load. It’s important to note that our React Gen 2 SDK is also in Beta. I’ve been made aware that there are plans to make lazy loading toggle-able, soon. I’d suggest moving to our more stable Gen 1 SDK. Relevant Documentation: [SDK Comparison - Builder.io](https://www.builder.io/c/docs/sdk-comparison) ---
**Author:** ![jasperkooij](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/jasperkooij/32/2991_2.png) [@jasperkooij](https://forum.builder.io/u/jasperkooij)\ **Post date:** [November 6, 2023, 4:38pm UTC](https://forum.builder.io/t/lazy-loading-and-image/4335/8 "2023-11-06T16:38:34Z")
Thanks for the update! ---
**Author:** ![darthmallcop](https://avatars.discourse-cdn.com/v4/letter/d/c67d28/32.png) [@darthmallcop](https://forum.builder.io/u/darthmallcop)\ **Post date:** [November 16, 2023, 4:36pm UTC](https://forum.builder.io/t/lazy-loading-and-image/4335/9 "2023-11-16T16:36:39Z")
It’s very important for CWV performance to eagerly load our hero image to have a good LCP score. How can I force an image in the visual editor to eagerly load? I see from prior discussion the suggestion is to use the V1 sdk. Are there instructions on how to use the V1 SDK within the builder editor? In my Remix app, I’m using the V1 sdk ( @builder.io/react) . But in the visual editor, when viewing the JSON of an image, it appears it’s using V2 which doesn’t appear to support eager loading. And if I try to update the import in the JSON view to use `"@type": "@builder.io/react:Element",` it doesn’t appear to save. I can change “@version” to “1”, but that doesn’t appear to make the `lazy: false` attribute do anything either. How can I update the visual editor to use V1 so I can eagerly load an image within the visual editor? ![Screenshot 2023-11-16 at 11.33.51 AM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/f/f30441d2896127b2e3a93af4f0fce893a7c47e1f.jpeg) ---
**Author:** ![jasperkooij](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/jasperkooij/32/2991_2.png) [@jasperkooij](https://forum.builder.io/u/jasperkooij)\ **Post date:** [November 21, 2023, 5:18pm UTC](https://forum.builder.io/t/lazy-loading-and-image/4335/10 "2023-11-21T17:18:01Z")
> [@JuliusGD](#): > > I’d suggest moving to our more stable Gen 1 SDK. @JuliusGD Since I’m using Nextjs, I’m having Next Image doing the image handling and passing the lazy loading prop as mentioned in the documentation > **[Overriding Built-in Components - Builder.io](https://www.builder.io/c/docs/custom-components-overriding)** > > Drag and drop with your components, right within your existing site or app. Build and optimize digital experiences for any tech stack, visually. And that works great! ![Screenshot 2023-11-21 at 11.08.55](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/b/bca91e760e6a074baa6af86953d20ca8bfbc60d3.png) My image component is called Builder image and that does the trick. One thing that I noticed in my editor in [Builder.io](http://Builder.io) now is that every image that I now add, has ``` "lazy": false, ``` Where is the setting for every image to be ``` "lazy": true ``` I tested this by uploading a new image and it is set as false by default ![Screenshot 2023-11-21 at 11.17.10](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/9/9507104986e07bca600a2ebb193a43a96071c8e6.png) Should this not lazy load by default?