enhanced:img doesn't generate multiple sizes when using dynamically imported image
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
According to the documentation:
If you have a large image, such as a hero image taking the width of the design, you should specify sizes so that smaller versions are requested on smaller devices. E.g. if you have a 1280px image you may want to specify something like:
<enhanced:img src="./image.png" sizes="min(1280px, 100vw)"/>
If sizes is specified, <enhanced:img> will generate small images for smaller devices and populate the srcset attribute.
This doesn't appear to work when the image is loaded dynamically:
Reproduction
Create a component (trimmed):
<script>
let { bgSrc } = $props()
</script>
<enhanced:img src={bgSrc}
sizes="min(800px, 1900px)" />
From a page:
import heroBgSrc from "$static/stock/bg.jpg?enhanced"
...
<Hero bgSrc={heroBgSrc} />
Result:
<picture>
<source srcset="/@imagetools/f4bde5cce2511ff9615b0db6e65acb41672eed99 4142w, /@imagetools/6edc3aef7c7ad5b939438aade22388525cd27d51 8284w" sizes="min(800px, 1900px)" type="image/avif">
<source srcset="/@imagetools/9b20960ece0d072aff909ed0412b8c27d4ffbf28 4142w, /@imagetools/32e33bfd0bb5ffb8887de23921ee4bf760582417 8284w" sizes="min(800px, 1900px)" type="image/webp">
<source srcset="/@imagetools/07b72a21665d5252b5c52ebbfcb19943d299f76d 4142w, /@imagetools/e82c9351d6bba21db8d71d462b3359bb5d447320 8284w" sizes="min(800px, 1900px)" type="image/jpeg">
<img src="/@imagetools/e82c9351d6bba21db8d71d462b3359bb5d447320" svelte-vleyz1" width="8284" height="4955">
</picture>
Logs
None
System Info
System:
OS: Linux 6.10 Fedora Linux 40 (KDE Plasma)
CPU: (24) x64 AMD Ryzen 9 5900X 12-Core Processor
Memory: 42.03 GB / 62.68 GB
Container: Yes
Shell: 5.2.26 - /bin/bash
Binaries:
Node: 20.12.2 - /usr/bin/node
Yarn: 1.22.22 - /usr/bin/yarn
npm: 10.5.0 - /usr/bin/npm
bun: 1.1.20 - ~/.bun/bin/bun
npmPackages:
svelte: ^5.0.0-next.1 => 5.0.0-next.192
Severity
annoyance
Additional Information
I hope this is how it is intended to be used, the docs seem to say so, but I'm quite a beginner at this.
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 reproduced component using <enhanced:img src={bgSrc}> and the page importing bg.jpg?enhanced, then compare this dynamic case with a statically referenced image. Trace the enhanced image handling and verify that sizes produces smaller device variants in srcset rather than only the original widths.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100