Image srcset skipping a size

[north parrot]

Hey,

Resizing the window and I can only ever get 700px or 1000px images, the 400 never works?

<Image
    src={images.primary.image}
    widths={[400, 700, 1000]}
    sizes={`(max-width: 400px) 400px, (max-width: 700px) 700px, 1000px`}

widths={[300, 400, 700, 1000]}
sizes={`(max-width: 300px) 300px, (max-width: 400px) 400px, (max-width: 700px) 700px, 1000px`}

Adding this one and having the window 200px wide still only generates the 700px image

[pliant sapphire]

mm strange

maybe something funky with the container?

[north parrot]

like what?

[pliant sapphire]

honestly idk, maybe the container forces a width of some kind, have you tried adding more breakpoints to the image and see if it changes from 700?

[north parrot]

yeah 800 works

[pliant sapphire]

nothing lower?

[north parrot]

nope

[pliant sapphire]

damn, im out of ideas lol

[north parrot]

me too tbh

[pliant sapphire]

have you tried asking to the AI, maybe it has some suggestions

[north parrot]

Oh no, it would hallucinate

[pliant sapphire]

mm trying doesnt hurt

[warped light]

Is the DPI on the browser set to 1?

[north parrot]

I honestly don’t know, it’s not a setting I’ve thought about before. What does a DPI of 1 even mean though?

Sounds like you’d have to stand a mile away to see anything at all

[dull pelican]

I recall having similar issue and I had to set max-width to be higher than resolution to work

[cinder meteor]

Yeah so, the DPI setting is quite important, and in general this can be quite hard to verify, because the browser decides what's best. To explain what usually happens is that phones have very high DPI screens, but to make websites not look super tiny, they report a different pixel size to the browser. My phone, for example is 1080 real pixels wide, but imagine your phone would use the 1080px media queries, that would look awful. The pixel device ratio for my phone is 2.625, so the actual viewport width is just over 400px. Now, with images, the browser has to handle things a bit differently, because an image with a real width of 400px probably doesn't look good if it gets scaled up to the actual 1080px, so the browser actually takes the device density into account and downloads the larger image.
You can set the device density by clicking on the little arrow in the top right of the chrome dev tools (just next to the rotate screen button).

Other things to keep in mind:

• starting with a large width and reducing it won't cause the browser to download a smaller image, because the larger one can just be downscaled
• if the browser has a large enough image in its cache it also won't download a smaller image again
• I've heard people having issues with reducing the window size inside chrome dev tools instead of changing the size of the entire browser window. It seems that sometimes the browser doesn't really take the set width into account when set this way (only heard anecdotes)

I've spent way to much time trying to debug this, so here's what I normally do now: I just check that Astro generated the correct srcset and widths attributes on the img tags and then I let the browser do what it does best.