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 https://github.com/sveltejs/kit/issues/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)

[teemingc]

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 🍀

[ericlesslie]

I'm also experiencing this same bug, temporary fix being to explicitly define the src.

[Krisztiaan]

Not sure how relevant that is, but even if passed imgSizes in query, it seems to be straight up ignored in enhanced:img

[teemingc]

@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 🕵️‍♂️🐛

Yes, the ugly workaround is to specify the imgSizes query parameter along with the enhanced query param when importing it manually.

<script lang="ts">
  import bostonOverviewImage from '$lib/assets/images/boston-overview.jpg?enhanced&imgSizes=(width >= 700px) 500px, 100px';
</script>

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

This is because the image transform happens at the manual import and it has no information about the <enhanced:img> tag we're passing it to so there's no way it can know about the sizes attribute. Compare this to performing the import inline where the preprocessor has direct access to all the attributes on the enhanced img tag before it performs the image transform.

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

I'm not sure how we could resolve this issue aside from documenting it...