Nuxt picture doesn't load correct sources

[hjujah]

This is how we are using the nuxt-picture inside the vue file:

<nuxt-picture
:placeholder="[100, 50, 10]"
sizes="sm:768px md:1200px lg:1920px xl:2200px"
quality="80"
:src="image.url"
:alt="image.alt" />

This is what we have in the nuxt.config:

image: {
  provider: "prismic",
  screens: {
    xs: 320,
    sm: 640,
    md: 768,
    lg: 1024,
    xl: 1280,
    xxl: 1536
  }
}

The expected image to be loaded on the mobile should be 768px wide, but it seems to always load the biggest one. You can see the issue on this link basically on every image if you check the network tab.

Are we doing something wrong, or this is likely some bug?

EDIT: I believe this has to do something with the pixel density, but I don't understand how to overcome that issue and how this should be used then? Also it's not a cache issue since we are getting the same results in incognito window with the disabled cache.

Btw to compare you can check how the images are behaving on this website for example where we have a custom implementation and where everything is loading and behaving as expected.

[dreitzner]

If you make sure your cache is cleared, than it works as expected.

The browser decides which is the best image to show. If there is already a larger image in cache, it will take that one instead of loading a smaller one.