From 9c707b4c7e54de713c843ac2b6f58c8b6d337be6 Mon Sep 17 00:00:00 2001
From: blt_r <www.edav@gmail.com>
Date: Sun, 22 Feb 2026 00:37:47 +0400
Subject: [PATCH 1/3] don't use picture tag when there's only one format

---
 packages/enhanced-img/src/index.js            |  2 -
 packages/enhanced-img/src/vite-plugin.js      | 28 +++++++
 packages/enhanced-img/test/Input.svelte       |  9 ++-
 packages/enhanced-img/test/Output.svelte      | 76 ++++++++++++++-----
 .../enhanced-img/test/markup-plugin.spec.js   |  4 +-
 5 files changed, 94 insertions(+), 25 deletions(-)

diff --git a/packages/enhanced-img/src/index.js b/packages/enhanced-img/src/index.js
index 013b9405436d..4c2770d5ec1d 100644
--- a/packages/enhanced-img/src/index.js
+++ b/packages/enhanced-img/src/index.js
@@ -53,8 +53,6 @@ function imagetools_plugin() {
 	};
 
 	// TODO: should we make formats or sizes configurable besides just letting people override defaultDirectives?
-	// TODO: generate img rather than picture if only a single format is provided
-	//     by resolving the directives for the URL in the preprocessor
 	return imagetools(imagetools_opts);
 }
 
diff --git a/packages/enhanced-img/src/vite-plugin.js b/packages/enhanced-img/src/vite-plugin.js
index e226c71278b2..03aaf05783b0 100644
--- a/packages/enhanced-img/src/vite-plugin.js
+++ b/packages/enhanced-img/src/vite-plugin.js
@@ -251,6 +251,7 @@ function get_attr_value(node, attr) {
  * @param {import('../types/internal.js').Attribute[]} attributes
  * @param {{
  *   src: string,
+ *   srcset?: string,
  *   width?: string | number,
  *   height?: string | number
  * }} details
@@ -260,9 +261,19 @@ function serialize_img_attributes(content, attributes, details) {
 		if ('name' in attribute && attribute.name === 'src') {
 			return `src=${details.src}`;
 		}
+		if ('name' in attribute && attribute.name === 'srcset' && details.srcset) {
+			return `srcset=${details.srcset}`;
+		}
 		return content.substring(attribute.start, attribute.end);
 	});
 
+	if (
+		details.srcset &&
+		!attributes.some((attribute) => 'name' in attribute && attribute.name === 'srcset')
+	) {
+		attribute_strings.push(`srcset=${details.srcset}`);
+	}
+
 	/** @type {number | undefined} */
 	let user_width;
 	/** @type {number | undefined} */
@@ -322,6 +333,16 @@ function img_to_picture(content, node, image) {
 		attributes.splice(index, 1);
 	}
 
+	if (Object.keys(image.sources).length === 1) {
+		const srcset = Object.values(image.sources)[0];
+		return `<img ${serialize_img_attributes(content, attributes, {
+			src: to_value(image.img.src),
+			srcset: to_value(srcset),
+			width: image.img.w,
+			height: image.img.h
+		})}${sizes_string} />`;
+	}
+
 	let res = '<picture>';
 
 	for (const [format, srcset] of Object.entries(image.sources)) {
@@ -379,6 +400,13 @@ function dynamic_img_to_picture(content, node, src_var_name) {
 			src: `{${src_var_name}}`
 		})} />
 	{/if}
+{:else if Object.keys(${src_var_name}.sources).length === 1}
+	<img ${serialize_img_attributes(content, attributes, {
+		src: `{${src_var_name}.img.src}`,
+		srcset: `{Object.values(${src_var_name}.sources)[0]}`,
+		width: `{${src_var_name}.img.w}`,
+		height: `{${src_var_name}.img.h}`
+	})}${sizes_string} />
 {:else}
 	<picture>
 		{#each Object.entries(${src_var_name}.sources) as [format, srcset]}
diff --git a/packages/enhanced-img/test/Input.svelte b/packages/enhanced-img/test/Input.svelte
index 35fd9c59901d..1d56691a7da4 100644
--- a/packages/enhanced-img/test/Input.svelte
+++ b/packages/enhanced-img/test/Input.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
-	import manual_image1 from './no.png';
-	import manual_image2 from './no.svg';
+	import manual_image1 from './no.png?enhanced';
+	import manual_image2 from './no.svg?enhanced';
+	import webp_image from './dev.png?format=webp&enhanced';
 
 	const src = manual_image1;
 	const images = [manual_image1, manual_image2];
@@ -15,6 +16,8 @@
 
 <enhanced:img src="./dev.png" alt="dev test" />
 
+<enhanced:img src="./dev.png?format=webp" alt="single format static test" />
+
 <div>
 	<enhanced:img src="./dev.png" alt="nested test" />
 </div>
@@ -45,6 +48,8 @@
 
 <enhanced:img {src} alt="attribute shorthand test" />
 
+<enhanced:img src={webp_image} alt="single format dynamic test" />
+
 {#each images as image}
 	<enhanced:img src={image} alt="opt-in test" />
 {/each}
diff --git a/packages/enhanced-img/test/Output.svelte b/packages/enhanced-img/test/Output.svelte
index 28ef97e47d56..0892abb18108 100644
--- a/packages/enhanced-img/test/Output.svelte
+++ b/packages/enhanced-img/test/Output.svelte
@@ -1,8 +1,10 @@
 <script lang="ts">
 	
-	import manual_image1 from './no.png';
+	import manual_image1 from './no.png?enhanced';
 	
-	import manual_image2 from './no.svg';
+	import manual_image2 from './no.svg?enhanced';
+	
+	import webp_image from './dev.png?format=webp&enhanced';
 
 	const src = manual_image1;
 	const images = [manual_image1, manual_image2];
@@ -17,6 +19,8 @@
 
 <picture><source srcset="/1 1440w, /2 960w" type="image/avif" /><source srcset="/3 1440w, /4 960w" type="image/webp" /><source srcset="5 1440w, /6 960w" type="image/png" /><img src="/7" alt="dev test" width=1440 height=1440 /></picture>
 
+<img src="/7" alt="single format static test" srcset="/3 1440w, /4 960w" width=1440 height=1440 />
+
 <div>
 	<picture><source srcset="/1 1440w, /2 960w" type="image/avif" /><source srcset="/3 1440w, /4 960w" type="image/webp" /><source srcset="5 1440w, /6 960w" type="image/png" /><img src="/7" alt="nested test" width=1440 height=1440 /></picture>
 </div>
@@ -45,12 +49,36 @@
 		<img src={src} alt="attribute shorthand test" />
 	{/if}
 {:else}
-	<picture>
-		{#each Object.entries(src.sources) as [format, srcset]}
-			<source {srcset} type={'image/' + format} />
-		{/each}
-		<img src={src.img.src} alt="attribute shorthand test" width={src.img.w} height={src.img.h} />
-	</picture>
+	{#if Object.keys(src.sources).length === 1}
+		<img src={src.img.src} alt="attribute shorthand test" srcset={Object.values(src.sources)[0]} width={src.img.w} height={src.img.h} />
+	{:else}
+		<picture>
+			{#each Object.entries(src.sources) as [format, srcset]}
+				<source {srcset} type={'image/' + format} />
+			{/each}
+			<img src={src.img.src} alt="attribute shorthand test" width={src.img.w} height={src.img.h} />
+		</picture>
+	{/if}
+{/if}
+
+{#if typeof webp_image === 'string'}
+	{#if 
+	import.meta.env.DEV && false}
+		{webp_image} was not enhanced. Cannot determine dimensions.
+	{:else}
+		<img src={webp_image} alt="single format dynamic test" />
+	{/if}
+{:else}
+	{#if Object.keys(webp_image.sources).length === 1}
+		<img src={webp_image.img.src} alt="single format dynamic test" srcset={Object.values(webp_image.sources)[0]} width={webp_image.img.w} height={webp_image.img.h} />
+	{:else}
+		<picture>
+			{#each Object.entries(webp_image.sources) as [format, srcset]}
+				<source {srcset} type={'image/' + format} />
+			{/each}
+			<img src={webp_image.img.src} alt="single format dynamic test" width={webp_image.img.w} height={webp_image.img.h} />
+		</picture>
+	{/if}
 {/if}
 
 {#each images as image}
@@ -62,12 +90,16 @@
 		<img src={image} alt="opt-in test" />
 	{/if}
 {:else}
-	<picture>
-		{#each Object.entries(image.sources) as [format, srcset]}
-			<source {srcset} type={'image/' + format} />
-		{/each}
-		<img src={image.img.src} alt="opt-in test" width={image.img.w} height={image.img.h} />
-	</picture>
+	{#if Object.keys(image.sources).length === 1}
+		<img src={image.img.src} alt="opt-in test" srcset={Object.values(image.sources)[0]} width={image.img.w} height={image.img.h} />
+	{:else}
+		<picture>
+			{#each Object.entries(image.sources) as [format, srcset]}
+				<source {srcset} type={'image/' + format} />
+			{/each}
+			<img src={image.img.src} alt="opt-in test" width={image.img.w} height={image.img.h} />
+		</picture>
+	{/if}
 {/if}
 {/each}
 
@@ -80,12 +112,16 @@
 		<img src={get_image(i)} alt="opt-in test" />
 	{/if}
 {:else}
-	<picture>
-		{#each Object.entries(get_image(i).sources) as [format, srcset]}
-			<source {srcset} type={'image/' + format} />
-		{/each}
-		<img src={get_image(i).img.src} alt="opt-in test" width={get_image(i).img.w} height={get_image(i).img.h} />
-	</picture>
+	{#if Object.keys(get_image(i).sources).length === 1}
+		<img src={get_image(i).img.src} alt="opt-in test" srcset={Object.values(get_image(i).sources)[0]} width={get_image(i).img.w} height={get_image(i).img.h} />
+	{:else}
+		<picture>
+			{#each Object.entries(get_image(i).sources) as [format, srcset]}
+				<source {srcset} type={'image/' + format} />
+			{/each}
+			<img src={get_image(i).img.src} alt="opt-in test" width={get_image(i).img.w} height={get_image(i).img.h} />
+		</picture>
+	{/if}
 {/if}
 {/each}
 
diff --git a/packages/enhanced-img/test/markup-plugin.spec.js b/packages/enhanced-img/test/markup-plugin.spec.js
index 1da359e91cff..8358b4c603fc 100644
--- a/packages/enhanced-img/test/markup-plugin.spec.js
+++ b/packages/enhanced-img/test/markup-plugin.spec.js
@@ -10,7 +10,9 @@ it('Image preprocess snapshot test', async () => {
 	const vite_plugin = image_plugin({
 		name: 'vite-imagetools-mock',
 		load(id) {
-			if (id.includes('dev')) {
+			if (id.includes('format=webp')) {
+				return 'export default {sources:{webp:"/3 1440w, /4 960w"},img:{src:"/7",w:1440,h:1440}};';
+			} else if (id.includes('dev')) {
 				return 'export default {sources:{avif:"/1 1440w, /2 960w",webp:"/3 1440w, /4 960w",png:"5 1440w, /6 960w"},img:{src:"/7",w:1440,h:1440}};';
 			} else if (id.includes('prod')) {
 				return 'export default {sources:{avif:"__VITE_ASSET__2AM7_y_a__ 1440w, __VITE_ASSET__2AM7_y_b__ 960w",webp:"__VITE_ASSET__2AM7_y_c__ 1440w, __VITE_ASSET__2AM7_y_d__ 960w",png:"__VITE_ASSET__2AM7_y_e__ 1440w, __VITE_ASSET__2AM7_y_f__ 960w"},img:{src:"__VITE_ASSET__2AM7_y_g__",w:1440,h:1440}};';

From 9e1abd675d47aff07fb6d82749d1898a88933c92 Mon Sep 17 00:00:00 2001
From: blt_r <www.edav@gmail.com>
Date: Sun, 22 Feb 2026 00:40:22 +0400
Subject: [PATCH 2/3] add changeset

---
 .changeset/shaky-bats-shake.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/shaky-bats-shake.md

diff --git a/.changeset/shaky-bats-shake.md b/.changeset/shaky-bats-shake.md
new file mode 100644
index 000000000000..59ef80277267
--- /dev/null
+++ b/.changeset/shaky-bats-shake.md
@@ -0,0 +1,5 @@
+---
+'@sveltejs/enhanced-img': minor
+---
+
+feat: use simple `img` tag instead of `picture` when only one format is specified

From 8633c2a82fa3f581135c866d42761126c1ce803c Mon Sep 17 00:00:00 2001
From: blt_r <www.edav@gmail.com>
Date: Sun, 22 Feb 2026 01:56:21 +0400
Subject: [PATCH 3/3] update Output.svelte

---
 packages/enhanced-img/test/Output.svelte | 72 +++++++++++-------------
 1 file changed, 32 insertions(+), 40 deletions(-)

diff --git a/packages/enhanced-img/test/Output.svelte b/packages/enhanced-img/test/Output.svelte
index 0892abb18108..acfaced3a34c 100644
--- a/packages/enhanced-img/test/Output.svelte
+++ b/packages/enhanced-img/test/Output.svelte
@@ -48,17 +48,15 @@
 	{:else}
 		<img src={src} alt="attribute shorthand test" />
 	{/if}
+{:else if Object.keys(src.sources).length === 1}
+	<img src={src.img.src} alt="attribute shorthand test" srcset={Object.values(src.sources)[0]} width={src.img.w} height={src.img.h} />
 {:else}
-	{#if Object.keys(src.sources).length === 1}
-		<img src={src.img.src} alt="attribute shorthand test" srcset={Object.values(src.sources)[0]} width={src.img.w} height={src.img.h} />
-	{:else}
-		<picture>
-			{#each Object.entries(src.sources) as [format, srcset]}
-				<source {srcset} type={'image/' + format} />
-			{/each}
-			<img src={src.img.src} alt="attribute shorthand test" width={src.img.w} height={src.img.h} />
-		</picture>
-	{/if}
+	<picture>
+		{#each Object.entries(src.sources) as [format, srcset]}
+			<source {srcset} type={'image/' + format} />
+		{/each}
+		<img src={src.img.src} alt="attribute shorthand test" width={src.img.w} height={src.img.h} />
+	</picture>
 {/if}
 
 {#if typeof webp_image === 'string'}
@@ -68,17 +66,15 @@
 	{:else}
 		<img src={webp_image} alt="single format dynamic test" />
 	{/if}
+{:else if Object.keys(webp_image.sources).length === 1}
+	<img src={webp_image.img.src} alt="single format dynamic test" srcset={Object.values(webp_image.sources)[0]} width={webp_image.img.w} height={webp_image.img.h} />
 {:else}
-	{#if Object.keys(webp_image.sources).length === 1}
-		<img src={webp_image.img.src} alt="single format dynamic test" srcset={Object.values(webp_image.sources)[0]} width={webp_image.img.w} height={webp_image.img.h} />
-	{:else}
-		<picture>
-			{#each Object.entries(webp_image.sources) as [format, srcset]}
-				<source {srcset} type={'image/' + format} />
-			{/each}
-			<img src={webp_image.img.src} alt="single format dynamic test" width={webp_image.img.w} height={webp_image.img.h} />
-		</picture>
-	{/if}
+	<picture>
+		{#each Object.entries(webp_image.sources) as [format, srcset]}
+			<source {srcset} type={'image/' + format} />
+		{/each}
+		<img src={webp_image.img.src} alt="single format dynamic test" width={webp_image.img.w} height={webp_image.img.h} />
+	</picture>
 {/if}
 
 {#each images as image}
@@ -89,17 +85,15 @@
 	{:else}
 		<img src={image} alt="opt-in test" />
 	{/if}
+{:else if Object.keys(image.sources).length === 1}
+	<img src={image.img.src} alt="opt-in test" srcset={Object.values(image.sources)[0]} width={image.img.w} height={image.img.h} />
 {:else}
-	{#if Object.keys(image.sources).length === 1}
-		<img src={image.img.src} alt="opt-in test" srcset={Object.values(image.sources)[0]} width={image.img.w} height={image.img.h} />
-	{:else}
-		<picture>
-			{#each Object.entries(image.sources) as [format, srcset]}
-				<source {srcset} type={'image/' + format} />
-			{/each}
-			<img src={image.img.src} alt="opt-in test" width={image.img.w} height={image.img.h} />
-		</picture>
-	{/if}
+	<picture>
+		{#each Object.entries(image.sources) as [format, srcset]}
+			<source {srcset} type={'image/' + format} />
+		{/each}
+		<img src={image.img.src} alt="opt-in test" width={image.img.w} height={image.img.h} />
+	</picture>
 {/if}
 {/each}
 
@@ -111,17 +105,15 @@
 	{:else}
 		<img src={get_image(i)} alt="opt-in test" />
 	{/if}
+{:else if Object.keys(get_image(i).sources).length === 1}
+	<img src={get_image(i).img.src} alt="opt-in test" srcset={Object.values(get_image(i).sources)[0]} width={get_image(i).img.w} height={get_image(i).img.h} />
 {:else}
-	{#if Object.keys(get_image(i).sources).length === 1}
-		<img src={get_image(i).img.src} alt="opt-in test" srcset={Object.values(get_image(i).sources)[0]} width={get_image(i).img.w} height={get_image(i).img.h} />
-	{:else}
-		<picture>
-			{#each Object.entries(get_image(i).sources) as [format, srcset]}
-				<source {srcset} type={'image/' + format} />
-			{/each}
-			<img src={get_image(i).img.src} alt="opt-in test" width={get_image(i).img.w} height={get_image(i).img.h} />
-		</picture>
-	{/if}
+	<picture>
+		{#each Object.entries(get_image(i).sources) as [format, srcset]}
+			<source {srcset} type={'image/' + format} />
+		{/each}
+		<img src={get_image(i).img.src} alt="opt-in test" width={get_image(i).img.w} height={get_image(i).img.h} />
+	</picture>
 {/if}
 {/each}