Does anyone know how NuxtImage and it's 'sizes' attribute works?
Let's say we want something that is full width as a simple example. But we don't want a 2500px wide image downloading on mobile.
First, for testing purposes, we can set
To handle the sizes, one would think you could do something like this sizes attribute:
Full image snippet:
To test this, I emulate an iPhone. Which should be the size of XS. I check the network tab in devtools and low and behold, the size generated is 1280(xl). I have no idea why.
If I emulate a browser in the small region (say 700px wide) and clear the network tab, refresh, the 1920 version comes in. The markup it produces is:
I must be doing something wrong to get this wonky of a result.
First, for testing purposes, we can set
densitiesx1To handle the sizes, one would think you could do something like this sizes attribute:
Full image snippet:
To test this, I emulate an iPhone. Which should be the size of XS. I check the network tab in devtools and low and behold, the size generated is 1280(xl). I have no idea why.
If I emulate a browser in the small region (say 700px wide) and clear the network tab, refresh, the 1920 version comes in. The markup it produces is:
I must be doing something wrong to get this wonky of a result.
