Dynamically enhanced images have srcset with only 2 variants

vladshcherbin commented 7 months ago

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 commented 7 months ago

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

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

eltigerchino commented 7 months ago

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 commented 7 months ago

@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 commented 6 months ago

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

ericlesslie commented 5 months ago

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

Krisztiaan commented 1 month ago

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

sveltejs / kit