sveltejs / sveltejs/kit

Dynamically enhanced images have srcset with only 2 variants

Open
#12,099 7 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

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

image

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:

image

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

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 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.