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
densities to just x1.
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.2 Replies
Hi @Boog. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
I understand your confusion with the
sizes attribute in NuxtImg. Let me explain how it works and what might be happening in your case.
How the sizes attribute works in NuxtImg
The sizes attribute in NuxtImg is a space-separated list of screen size/width pairs that follows a specific pattern. According to the documentation:
- If you omit a screen size prefix (like sm:), that size becomes the 'default' size
- Otherwise, Nuxt picks the smallest size as the default
- Each specified size applies upward - so md:400px means the image will be 400px on medium screens and larger
- The default size is used until the next specified screen width is reached
NuxtImg documentation explains that this is a "responsive-first" sizing approach.
The issue with your implementation
In your example:
You're specifying widths in pixels, but you're missing the units (like px or vw). This is likely causing the unexpected behavior.
Additionally, the way you've structured your sizes doesn't match how the browser interprets the sizes attribute. The browser needs to know when to use each size, not just the size values.
Correct implementation
For a full-width responsive image, try something like:
This tells the browser:
- Default size is 100vw (100% of viewport width)
- On small screens and up, use 50vw
- On medium screens and up, use 400px
For your specific case, you might want:
This simply tells the browser that the image will always be 100% of the viewport width, and NuxtImg will generate appropriate srcset values based on your configured screen sizes.
The output you're seeing with all those different widths in the srcset is actually correct - NuxtImg is generating multiple image sizes to let the browser choose the most appropriate one. The issue is with how you're specifying which size should be used when.
NuxtImg documentation provides more examples of how to properly use the sizes attribute.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@384545733061378060> Kapa.ai is still learning and improving, please let me know how I did by reacting below.