fix(nuxt-img): set imagesrcset preload when densities are set w/o sizes

[vsergiu93]

🔗 Linked issue

no issue

📚 Description

We have a production issue where a preloaded image can be fetched twice.
When sizes is specified, the generated srcset uses width descriptors (w) instead of density descriptors (x), so hasMultipleDensities becomes false. As a result, Nuxt Image generates a <link rel="preload"> with imagesizes but without imagesrcset.

According to the web.dev article on preloading responsive images, responsive image preloads should mirror the attributes: src → href, srcset → imagesrcset, and sizes → imagesizes. The browser uses imagesrcset and imagesizes together for the same resource selection logic as srcset and sizes on <img>

This change ensures that whenever the preload represents a responsive image, we also emit imagesrcset, not only when the srcset contains density descriptors. That keeps the preload aligned with the eventual <img> request and avoids duplicate downloads.

I also added tests for this but not sure if they are added properly.

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/@nuxt/image@2176

commit: 1d40a63

[vsergiu93]

Not really sure why this test failed for me locally, or why even it changed.

[vsergiu93]

Just saw now that it fails now in github pipeline, I think I will just revert this change.

[vsergiu93]

Not sure if this is the best way to write this test, but I think it is important to have it.

[coderabbitai]

📝 Walkthrough

Walkthrough

This pull request introduces changes to image preloading behavior in a Nuxt image component library. A new playground page component (img-preload.vue) was added with multiple <nuxt-img> examples demonstrating preload functionality with varying configurations of densities, sizes, and preload props. The core logic in NuxtImg.vue was adjusted to determine preload imagesrcset attribute inclusion based on isResponsive rather than hasMultipleDensities. Corresponding end-to-end and bundle size tests were added and updated to validate the new behavior.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Context

The changes span four files with mixed scope: a new 40-line template component, a single-line conditional logic change in the core component, a 24-line e2e test case, and a 1-line bundle size snapshot update. The primary review focus should be on understanding the rationale for changing from hasMultipleDensities to isResponsive and verifying the e2e test correctly validates this new behavior across multiple preload configurations.

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description check	✅ Passed	The description is directly related to the changeset, explaining the production issue, root cause, and solution for the preload attribute problem.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Title check	✅ Passed	The title accurately summarizes the main change: fixing the conditional logic for setting the imagesrcset preload attribute based on responsiveness rather than density detection.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[codecov-commenter]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 32.52%. Comparing base (5be826f) to head (1d40a63).
⚠️ Report is 10 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #2176   +/-   ##
=======================================
  Coverage   32.52%   32.52%           
=======================================
  Files           7        7           
  Lines         372      372           
  Branches      131      131           
=======================================
  Hits          121      121           
  Misses        194      194           
  Partials       57       57           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[vsergiu93]

Hello @danielroe,

Please have a quick look over this one, curious if this PR makes sense for you and if it could be part of the next release.

Thanks