I’ve noticed that using the html api, the sizes attribute is missing for the webp version of the image when multiple images are in a grid, while the sizes attribute is present in the non-webp version of the image. This results in a bigger image being loaded than necessary.
Builder content link
Link to the html being injected using a dangerouslySetInnerHTML in Nextjs
Detailed steps to reproduce the bug
- Go to SACHINI | Test on Chrome (fullHD screen or smaller) and note the three images on the screen
- Right click on first out of 3 pictures > inspect element
- Note that picture > source element contains a srcset as expected, but no sizes attribute
- The sizes attribute is only present under picture > img
- Go to the properties tab, the currentSrc is as follows. Notice that a very large image is loaded
- The expected behaviour is that if the sizes attribute would be present under picture> source, a smaller image could be loaded to improve the page speed
Screenshots or video link
Code stack you are integrating Builder with
I tried using the content API instead of the html api, but the behaviour is the same.