Dynamically enhanced images have srcset with only 2 variants
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 20.8k
- Forks
- 2.3k
- Avg merge
- 1d 16h
- Merged PRs (30d)
- 156
Description
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
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked svelte-lab reproduction and run it with pnpm dev. Compare the srcset generated by enhanced:img for the ?enhanced import with the direct image-path import, then trace the @sveltejs/enhanced-img and Vite integration. Done means dynamically enhanced images produce the expected range of srcset variants.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, vite
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 28/100