Home App Docs Github

How to use the React Image Component

How to use the React Image Component
I’m doing this:

import { Image as BuilderImage } from '@builder.io/react';
<BuilderImage image={url} />

But I am not having the images loaded with lazy loading, am I doing something wrong? have extra props required?
This has been a problem for me, because when running the ligthhouse to check the performance he complains about the size of the images coming from the builder

Thanks for reaching out, Igor! To optimize images, you can start by setting the lazy prop: <BuilderImage image={url} lazy /> . To further optimize, you can also set the sizes prop as well. For instance, if the image is half the screen width, you could use <BuilderImage image={url} lazy sizes="50vw" /> (Using sizes here is the same as the image sizes attribute in plain html img tags)