sveltejs / sveltejs/kit

enhanced:img doesn't generate multiple sizes when using dynamically imported image

Open
#12,609 2 comments 4 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

pkg:enhanced-img
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.