From 651d5b8330cde1f740004073abe2ea64410032ad Mon Sep 17 00:00:00 2001
From: vsergiu93 <vsergiu93@gmail.com>
Date: Fri, 20 Mar 2026 14:25:27 +0200
Subject: [PATCH 1/2] fix: Update `NuxtImg` to correctly set `imagesrcset` for
 responsive images and add tests for image preload attributes

---
 playground/app/pages/img-preload.vue | 40 ++++++++++++++++++++++++++++
 src/runtime/components/NuxtImg.vue   |  2 +-
 test/e2e/ssr.test.ts                 | 24 +++++++++++++++++
 test/unit/bundle.test.ts             |  2 +-
 4 files changed, 66 insertions(+), 2 deletions(-)
 create mode 100644 playground/app/pages/img-preload.vue

diff --git a/playground/app/pages/img-preload.vue b/playground/app/pages/img-preload.vue
new file mode 100644
index 000000000..bfe7b66a3
--- /dev/null
+++ b/playground/app/pages/img-preload.vue
@@ -0,0 +1,40 @@
+<template>
+  <div>
+    <h1>Preload no densities or sizes prop</h1>
+    <nuxt-img
+      src="/images/colors-no-densities-or-sizes-prop.jpg"
+      width="500"
+      height="500"
+      densities="x1"
+      preload
+    />
+    <h1>Preload with densities and no sizes prop</h1>
+    <nuxt-img
+      src="/images/colors-with-densities-and-no-sizes-prop.jpg"
+      width="500"
+      height="500"
+      densities="x1 x2"
+      preload
+    />
+
+    <h1>Preload with densities and sizes prop</h1>
+    <nuxt-img
+      src="/images/colors-with-densities-and-sizes-prop.jpg"
+      width="500"
+      height="500"
+      sizes="100vw md:500px"
+      densities="x1 x2"
+      preload
+    />
+
+    <h1>Preload with densities, sizes prop and default fetch priority high</h1>
+    <nuxt-img
+      src="/images/colors-with-densities-sizes-and-fetchprio-prop.jpg"
+      width="500"
+      height="500"
+      sizes="100vw md:500px"
+      densities="x1 x2"
+      :preload="{ fetchPriority: 'high' }"
+    />
+  </div>
+</template>
diff --git a/src/runtime/components/NuxtImg.vue b/src/runtime/components/NuxtImg.vue
index 53ecad0eb..d498adbe2 100644
--- a/src/runtime/components/NuxtImg.vue
+++ b/src/runtime/components/NuxtImg.vue
@@ -115,7 +115,7 @@ if (import.meta.server && props.preload) {
       crossorigin: normalizedAttrs.value.crossorigin,
       href: isResponsive ? sizes.value.src : src.value,
       ...(sizes.value.sizes && { imagesizes: sizes.value.sizes }),
-      ...(hasMultipleDensities && { imagesrcset: sizes.value.srcset }),
+      ...(isResponsive && { imagesrcset: sizes.value.srcset }),
       ...(typeof props.preload !== 'boolean' && props.preload.fetchPriority
         ? { fetchpriority: props.preload.fetchPriority }
         : {}),
diff --git a/test/e2e/ssr.test.ts b/test/e2e/ssr.test.ts
index cab6c08de..f409c7721 100644
--- a/test/e2e/ssr.test.ts
+++ b/test/e2e/ssr.test.ts
@@ -55,6 +55,30 @@ describe('browser (ssr: true)', () => {
     })
   }
 
+  it('preloads image with correct attributes', async () => {
+    const page = await createPage()
+    await page.goto(url('/img-preload'))
+
+    const link1 = page.locator('head link[rel="preload"][as="image"][href="/_ipx/s_500x500/images/colors-no-densities-or-sizes-prop.jpg"]')
+    expect(await link1.getAttribute('imagesizes')).toBeNull()
+    expect(await link1.getAttribute('imagesrcset')).toBeNull()
+
+    const link2 = page.locator('head link[rel="preload"][as="image"][href="/_ipx/s_1000x1000/images/colors-with-densities-and-no-sizes-prop.jpg"]')
+    expect(await link2.getAttribute('imagesizes')).toBeNull()
+    expect(await link2.getAttribute('imagesrcset')).not.toBeNull()
+
+    const link3 = page.locator('head link[rel="preload"][as="image"][href="/_ipx/s_1000x1000/images/colors-with-densities-and-sizes-prop.jpg"]')
+    expect(await link3.getAttribute('imagesizes')).not.toBeNull()
+    expect(await link3.getAttribute('imagesrcset')).not.toBeNull()
+
+    const link4 = page.locator('head link[rel="preload"][as="image"][href="/_ipx/s_1000x1000/images/colors-with-densities-sizes-and-fetchprio-prop.jpg"]')
+    expect(await link4.getAttribute('imagesizes')).not.toBeNull()
+    expect(await link4.getAttribute('imagesrcset')).not.toBeNull()
+    expect(await link4.getAttribute('fetchpriority')).toBe('high')
+
+    await page.close()
+  })
+
   it('should emit load and error events', async () => {
     const page = await createPage()
     const logs: string[] = []
diff --git a/test/unit/bundle.test.ts b/test/unit/bundle.test.ts
index eea4df32d..f47201b59 100644
--- a/test/unit/bundle.test.ts
+++ b/test/unit/bundle.test.ts
@@ -21,7 +21,7 @@ describe.skipIf(process.env.ECOSYSTEM_CI || isWindows)('nuxt image bundle size',
       image: { provider: 'ipx' },
     })
 
-    expect(roundToKilobytes(withImage.totalBytes - withoutImage.totalBytes)).toMatchInlineSnapshot(`"12.6k"`)
+    expect(roundToKilobytes(withImage.totalBytes - withoutImage.totalBytes)).toMatchInlineSnapshot(`"12.2k"`)
   })
 })
 

From 1d40a6368f96bb7f3de6ea11ff27ea327a65aee0 Mon Sep 17 00:00:00 2001
From: vsergiu93 <vsergiu93@gmail.com>
Date: Fri, 20 Mar 2026 15:00:27 +0200
Subject: [PATCH 2/2] test: revert change to bundle size

---
 test/unit/bundle.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/unit/bundle.test.ts b/test/unit/bundle.test.ts
index f47201b59..eea4df32d 100644
--- a/test/unit/bundle.test.ts
+++ b/test/unit/bundle.test.ts
@@ -21,7 +21,7 @@ describe.skipIf(process.env.ECOSYSTEM_CI || isWindows)('nuxt image bundle size',
       image: { provider: 'ipx' },
     })
 
-    expect(roundToKilobytes(withImage.totalBytes - withoutImage.totalBytes)).toMatchInlineSnapshot(`"12.2k"`)
+    expect(roundToKilobytes(withImage.totalBytes - withoutImage.totalBytes)).toMatchInlineSnapshot(`"12.6k"`)
   })
 })