Images hosted on Builder causing big drops in Lighthouse scores

Technical Questions
1

Please fill out as many of the following questions as possible so we can help you promptly! If you don’t know how to answer or it does not apply, feel free to remove it or leave it blank.

Builder content link

Builder public api key
c3e3257ff5594facbf478a68d37f766d

What are you trying to accomplish
We are migrating from Prismic to Builder as our primary CMS and upon switching our image host from Prismic to Builder, we’re seeing a BIG drop in Lighthouse scores. I don’t know if this is related to the fact that Prismic uses Imgix under the covers or not, but I do notice that images hosted on Prismic automatically use webp and avif formats whereas it appears Builder hosted images do not. We wrap all of our images in the NextImage component so the client side optimization should be the same between the two image hosts, it’s just what’s returned from the host.

Code stack you are integrating Builder with
Next.js v13 using new next/image component

I’m not sure if I need to be converting these images manually to use webp and avif, but this feels like the only thing we’ve found so far that we’re disappointed in with Builder. Has Builder looked at an integration with Imgix at any point?

2

Hi @chtbks-jason,

Currently, Builder hosted images are not converted automatically to webp or avif format, and as of now no integration is in the plan with Imgix but you can submit a feature request here Builder.io Ideas.

Converting images to the required webp or avif format might be the solution right now, you can read more about them at Guide to Image Optimization & High performance no-code image .

At a high level, Builder will not cause a performance hit and any content within Builder will be fully optimized. Builder.io generates all content with fully optimized images. The builder comes with advanced image optimization options, so instead of hard coding, you can simply automate it with Builder’s performance-obsessed, API-driven product. Builder saves your images as webp images when uploading and working with editor. If you right-click on your live page to save an image, it will be saved as webp.

Let us know if you have any further questions. Thank you!

3

Thank you for the extensive reply and explanation. I did add a request to investigate utilizing Imgix as suggested.

I’m seeing something a little odd and I want to make sure I understand what I’m seeing:

  • If I use an image hosted on Builder (coming from the Builder CDN) in a regular Builder Block, it appears to optimize it by handing back the client a .webp version of it and the various sizes per device using img srcset.
  • If I use an image hosted on Builder in a custom component, no such optimizations happen and the file comes down from the CDN in whatever file type it was uploaded in (i.e. png, jpg).

So, would it be fair to assume that Builder does special optimizations when using the Image component in the Visual Editor but doesn’t apply those same optimizations when calling an image by URL?

4

Hi @chtbks-jason,

The builder does the high-level image optimization when using them in a regular block within the editor, and also images hosted on our CDN are fully optimized when they are manually uploaded but file types remain in the same uploaded format, unlike when using them in a regular builder block. You can test this by uploading a high-quality image to our CDN and then downloading it using the image API.

Let us know if you have any further questions. Thank you!