Dynamically enhanced images have srcset with only 2 variants

[vladshcherbin]

Describe the bug

Hey 👋

I can't figure out how to dynamically enhance images properly. I've added ?enhanced part and images are processed into different formats. However, srcset has only 2 variants:

<script lang="ts">
  import bostonOverviewImage from '$lib/assets/images/boston-overview.jpg?enhanced'
</script>

<enhanced:img
  src={bostonOverviewImage}
  class="image"
  alt="boston overview"
  sizes="(width >= 700px) 500px, 100px"
/>

Images have different formats but srcset with 2 variants:

When importing same file directly with a path, images with multiple srcset are created:

<enhanced:img
  src="$lib/assets/images/boston-overview.jpg"
  class="image"
  alt="boston overview"
  sizes="(width >= 700px) 500px, 100px"
/>

Same image a lot more srcset variants:

What can be the reason?

I'd love to have the second variant but for ?enhanced images.
Tried importing using various variants from #11535 with no luck.

Reproduction

https://github.com/vladshcherbin/svelte-lab

Can be run with standard pnpm dev (or other package manager)

Logs

No response

System Info

System:
  OS: macOS 14.4.1
  CPU: (8) arm64 Apple M2
  Memory: 73.22 MB / 8.00 GB
  Shell: 5.9 - /bin/zsh
Binaries:
  Node: 20.10.0 - /opt/homebrew/opt/node@20/bin/node
  pnpm: 8.15.6 - /opt/homebrew/opt/node@20/bin/pnpm
Browsers:
  Chrome: 123.0.6312.107
npmPackages:
  @sveltejs/adapter-vercel: ^5.2.0 => 5.2.0 
  @sveltejs/enhanced-img: ^0.2.0 => 0.2.0 
  @sveltejs/kit: ^2.5.5 => 2.5.5 
  @sveltejs/vite-plugin-svelte: ^3.0.2 => 3.0.2 
  svelte: ^4.2.12 => 4.2.12 
  vite: ^5.2.8 => 5.2.8

Severity

blocking an upgrade

Additional Information

No response

[vladshcherbin]

Reproduction created - https://github.com/vladshcherbin/svelte-lab

Can be run with standard pnpm dev (or other package manager)

[eltigerchino]

You may have to add a w query parameter for sizes smaller than 540px.

The smallest picture generated automatically will have a width of 540px. If you'd like smaller images or would otherwise like to specify custom widths, you can do that with the w query parameter:

see https://kit.svelte.dev/docs/images#sveltejs-enhanced-img-srcset-and-sizes

It does seem like a bug if the srcset is different between an inline src and an imported src

[vladshcherbin]

@eltigerchino yes, but sizes like 540px are never generated

I've debugged to directives, on line 76

qs.get('imgSizes') is supposed to have sizes from img tag but it's empty for ?enhanced imports.

Imports:

'$lib/assets/images/boston-overview.jpg?enhanced' - qs.get('imgSizes') is empty, even though <enhanced:img ... sizes /> has it

'$lib/assets/images/boston-overview.jpg?enhanced&imgSizes="(width >= 700px) 500px, 100px"' - qs.get('imgSizes') is populated correctly and 540px and other sizes are generated

The remaining part is to find why imgSizes is not populated from img tag 🕵️‍♂️🐛

[vladshcherbin]

@benmccann can you please take a quick look, maybe there is a quick fix? I've tried to figure out with no luck 🍀