# JPG images out of Builder when overriding and effect on Core Web Vitals

**URL:** <https://forum.builder.io/t/jpg-images-out-of-builder-when-overriding-and-effect-on-core-web-vitals/5185>\
**Category:** Technical Questions\
**Created:** [March 19, 2024, 1:57pm UTC](https://forum.builder.io/t/jpg-images-out-of-builder-when-overriding-and-effect-on-core-web-vitals/5185 "2024-03-19T13:57:18Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**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:** [March 19, 2024, 1:57pm UTC](https://forum.builder.io/t/jpg-images-out-of-builder-when-overriding-and-effect-on-core-web-vitals/5185/1 "2024-03-19T13:57:18Z")

</div>

As always, I’m working on making a faster website like everyone is with reusable components. I’ve been having trouble with how images are coming into my Nextjs project from [Builder.IO](http://Builder.IO). The ability to set loading=“lazy” and/or fetchpriority=“high” makes a big impact on CWV. WebP images are great, AVIF is better. To make this happen using what I can get out of Builder, I’m overriding the images out of Builder and running them through Next Image. I made a simple project to test how well this is working.

> **[Create Next App](https://builder-next-next-ui.vercel.app/)**
>
> Generated by create next app

from:

> **[GitHub - jasperkooij/Builder-Next-NextUI](https://github.com/jasperkooij/Builder-Next-NextUI)**
>
> Contribute to jasperkooij/Builder-Next-NextUI development by creating an account on GitHub.

```auto
// components/BuilderImage.tsx
import { Image } from "@nextui-org/image";
import { ImageProps } from "@nextui-org/image";
import NextImage from "next/image";

interface BuilderImageProps extends ImageProps {
  // Add any additional custom props if needed
  image: string;
  backgroundSize: string;
  backgroundPosition: string;
  lazy: boolean;
  fitContent: boolean;
  aspectRatio: number;
  lockAspectRatio: boolean;
  height: number;
  width: number;
  srcset: string;
  sizes: string;
  altText: string;
}

const BuilderImage: React.FC<BuilderImageProps> = ({
  image,
  lazy,
  height,
  width,
  srcset,
  sizes,
  altText,
}) => {
  return (
    <Image
      as={NextImage}
      src={image}
      srcSet={srcset}
      sizes={sizes}
      alt={altText}
      width={width}
      height={height}
      loading={lazy ? "lazy" : "eager"}
    />
  );
};

export default BuilderImage;

```

I’m using Next and NextUI to bring the image forward using all the props I can get out of Builder.

 ![Screenshot 2024-03-19 at 08.47.15](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/1/18d2810ed9fd9366fae38f924dbb396b1c3cb23f.png)

Imagine my surprise to see images loaded directly from Builder: Here you can see this in action. Large images are being loaded next to the ones that are coming from Next:

 ![Screenshot 2024-03-19 at 08.16.20](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/d/d3093342a00c7bf58c930b674aa42862beb5d503.jpeg)

When I test the page, [https://pagespeed.web.dev/analysis/https-builder-next-next-ui-vercel-app/vq4u9i8kyn?form\_factor=mobile](https://pagespeed.web.dev/analysis/https-builder-next-next-ui-vercel-app/vq4u9i8kyn?form_factor=mobile), I’m getting dinged for loading JPG’s

 ![](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/b/bf42bc411dab572f900c3633a09ba6b92714ee51.jpeg)  
 ![Screenshot 2024-03-19 at 08.43.40](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/a/a4e415e6c2d51e740f9142c19b176fdf5094f90c.png)

Same in webpage test:

 ![Screenshot 2024-03-19 at 08.56.28](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/6/6fd45ee3941e7027ca5a92712982c47a92146e46.png)

So here is my question, will Builder have a feature that will allow setting lazy/priority in the very near future? Or should I update my own?  
And how do I avoid loading JPG images out Builder separate from the ones that Nextjs is creating?

---

<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:** [March 22, 2024, 2:03pm UTC](https://forum.builder.io/t/jpg-images-out-of-builder-when-overriding-and-effect-on-core-web-vitals/5185/2 "2024-03-22T14:03:46Z")

</div>

Hello @jasperkooij,

Upon reviewing the Home content, we’ve noticed similar behavior. We’re currently delving deeper into potential solutions to circumvent loading JPG images. Rest assured, I’ll keep you updated on our progress in this regard.

Additionally, it’s worth noting that Builder might incorporate a feature to enable setting lazy loading or setting priority in the near future. In the meantime, I suggest submitting a feature request through our ideas board at [https://ideas.builder.io/ideas/](https://ideas.builder.io/ideas/)

Thank you for your patience and understanding.

---

<div class="post-metadata">

**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:** [March 22, 2024, 4:13pm UTC](https://forum.builder.io/t/jpg-images-out-of-builder-when-overriding-and-effect-on-core-web-vitals/5185/3 "2024-03-22T16:13:58Z")

</div>

Thanks for looking into this!