BuilderIO / BuilderIO/builder

The conversion to WebP on the `Image` component does not apply to the last image in the srcset

Open
#2,899 0 comments 0 reactions 0 assignees View on GitHub
Stale
Dominant language
TypeScript
Stars
8.8k
Forks
1.2k
Avg merge
1d 6h
Merged PRs (30d)
17

Description

**Describe the bug**
The Builder.IO image component automatically changes any builder.io image URL to be converted to WebP.
For example, if the image is at `https://cdn.builder.io/api/v1/image/IMAGEURL`, the URL will be updated to `https://cdn.builder.io/api/v1/image/IMAGEURL?format=webp`. This will be done in the `srcset` property of the `` tag in the `` component.

At least, that is the theroy. This update is done by replacing the `?` character in the URL. However, due to the way images are used in Builder.IO, the `srcset` property `includes one url without a '?' in it`. Ironically, this is the largest image in the srcset, and it's also the one that gets loaded when Google evaluates the PageSpeed of the page. This ruins PageSpeed scores for absolutely no reason.

https://github.com/BuilderIO/builder/blob/ee58eb1553853f28595c8f390a7cc376ee9fbbf0/packages/sdks/src/blocks/image/image.lite.tsx#L58
https://github.com/BuilderIO/builder/blob/ee58eb1553853f28595c8f390a7cc376ee9fbbf0/packages/react/src/blocks/Image.tsx#L365

Our solution was something to the tune of:

```
srcset = srcset.replace(/(\?|$)/g, "?format=webp&").replace(/&$/, "")
```

Notably, we also had to update the actual tag that's also part of the component.

**To Reproduce**
Steps to reproduce the behavior:
1. Just use any Builder.IO component. In our setup, we use it through the `builder.io-react` NPM package with a Gatsby project, but it should work in any React app (also, anything that uses `Image.lite.tsx`)
2. Look at the srcset - it will look something like this (simplified): "image.png?format=webp&width=100 100w, [...] image.png" - the last image won't have the `?format=webp` part
3. Test the published page in Google PageSpeed - it will show a bad PS score and say something like "Convert PNG images to WebP"

**Expected behavior**
If any of the images in the srcset should be converted to WebP, then they should all be.

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.