Always loads largest image

[thomaskvael]

Hi

I am trying to figure out if this is expected or not.
When I use lazysizes with lqip image and data-sizes="auto" the visual load is as follows (see image for network load)

1. Shows lqip image.
2. Shows image with width 1024
3. Shows lqip image
4. Shows image with width 1920

My question is basically, will the largest image for my screen always be loaded?

If I remove data-sizes="auto" it loads the 1920 image twice.

The img element will be shown like this when rendered

  class="absolute top-0 left-0 w-full h-full s-WHS1Q6NbsMta lazyautosizes lazyloaded"
  src="https://url.com/image.jpg"
  srcset="
    https://url.com/image.jpg?w=640   640w,
    https://url.com/image.jpg?w=768   768w,
    https://url.com/image.jpg?w=1024 1024w,
    https://url.com/image.jpg?w=1366 1366w,
    https://url.com/image.jpg?w=1600 1600w,
    https://url.com/image.jpg?w=1920 1920w,
    https://url.com/image.jpg?w=2560 2560w
  "
  data-srcset="https://url.com/image.jpg?w=640 640w,https://url.com/image.jpg?w=768 768w,https://url.com/image.jpg?w=1024 1024w,https://url.com/image.jpg?w=1366 1366w,https://url.com/image.jpg?w=1600 1600w,https://url.com/image.jpg?w=1920 1920w,https://url.com/image.jpg?w=2560 2560w"
  data-sizes="auto"
/>


![image](https://user-images.githubusercontent.com/25540089/139530656-3918c13a-521b-4018-9e16-d44f0c611adf.png)