New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
The image size isn't changing when viewport changes (Image/Picture built-in component) #10920
Comments
How do you believe this should be instead? The current markup is in line with the recommendation regarding avoiding CLS on responsive images, ex https://web.dev/articles/optimize-cls#responsive-images Other sources I'm finding also mention adding the dimensions even when using |
I do believe there is no need to set width and height when working with srcset, as you can see here https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#resolution_switching_different_sizes When I removed those attributes through devtools > inspect, it worked as expected. |
The example in that section has CLS. Ideally we have a solution without CLS, which |
The point of this issue is that the Image and Picture built-in component does not work as expected, even following the example on the docs -> https://docs.astro.build/en/guides/images/#widths The rendered image does not changes its size when viewport changes. I fixed this removing both width and height attributes. I still believe that when working with "srcset" and "sizes" there is no need to provide those attributes (width/height). |
I understand that, but I don't know how to fix it in a way that doesn't create CLS. I can't just remove the attributes and let every Astro website lose 20 points on Lighthouse every time they use an image with multiple sizes. My suggestion right now would be to use CSS to do this, using |
Astro Info
If this issue only occurs in one browser, which browser is a problem?
No response
Describe the Bug
Both Image and Picture built-in components are generating the img tag with static width and height, which unables the browser to render the intrinsic size of the image when using "widths" and "sizes" properties
What's the expected result?
The rendered image size should be the same as the intrinsic size and should switch sizes as normally does when viewport's width changes
Link to Minimal Reproducible Example
https://stackblitz.com/edit/github-ote2fp-dm1slu?file=src%2Fpages%2Findex.astro
Participation
The text was updated successfully, but these errors were encountered: