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
The sizes attribute is working weirdly. When I use a device-width of 320px, it should use the 180w version of the image. But a quick inspection of network tab in dev tools shows the 200w version was downloaded.
This wrong behavior is so weird I couldn't tell what is actually happening. When I change the first width (180px) in sizes and widths attributes to 20px, a 20px image (correct) gets downloaded. But when I use anything above 50px, the next image size (200px) gets downloaded, even if I didn't change the media query at all.
What's the expected result?
It should download the correct image taking into account the viewport width.
Maybe this is not an astro bug, but I can't believe nobody has this problem. Maybe I'm not using this component the right way. Would appreciate some help.
sizes is a very weird attribute and it's quite hard to test it locally because of it interacts with the DPR, especially in the dev tools in Chrome. As far as I can tell, Astro is generating the right code though, so it's really unlikely that there is an Astro issue here.
Astro Info
If this issue only occurs in one browser, which browser is a problem?
Chrome
Describe the Bug
When I use Image component's sizes attribute I get a correct output, but when I check which image gets downloaded I get the wrong one.
I've made an stackblitz demo. In it there is an MyImage component with a sizes attribute that looks like this:
The
sizes
attribute is working weirdly. When I use a device-width of 320px, it should use the180w
version of the image. But a quick inspection of network tab in dev tools shows the200w
version was downloaded.This wrong behavior is so weird I couldn't tell what is actually happening. When I change the first width (
180px
) insizes
andwidths
attributes to20px
, a20px
image (correct) gets downloaded. But when I use anything above50px
, the next image size (200px
) gets downloaded, even if I didn't change the media query at all.What's the expected result?
It should download the correct image taking into account the viewport width.
The output of the example above is:
Maybe this is not an astro bug, but I can't believe nobody has this problem. Maybe I'm not using this component the right way. Would appreciate some help.
Link to Minimal Reproducible Example
https://stackblitz.com/edit/withastro-astro-ebpoea?file=src%2Fcomponents%2FMyImage.astro
Participation
The text was updated successfully, but these errors were encountered: