You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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 <picture> tag in the <Image /> 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.
Notably, we also had to update the actual tag that's also part of the component.
To Reproduce
Steps to reproduce the behavior:
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)
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
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.
The text was updated successfully, but these errors were encountered:
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 tohttps://cdn.builder.io/api/v1/image/IMAGEURL?format=webp
. This will be done in thesrcset
property of the<picture>
tag in the<Image />
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, thesrcset
propertyincludes 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.builder/packages/sdks/src/blocks/image/image.lite.tsx
Line 58 in ee58eb1
builder/packages/react/src/blocks/Image.tsx
Line 365 in ee58eb1
Our solution was something to the tune of:
Notably, we also had to update the actual tag that's also part of the component.
To Reproduce
Steps to reproduce the behavior:
builder.io-react
NPM package with a Gatsby project, but it should work in any React app (also, anything that usesImage.lite.tsx
)?format=webp
partExpected behavior
If any of the images in the srcset should be converted to WebP, then they should all be.
The text was updated successfully, but these errors were encountered: