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
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 `
`;
+ }
+
let res = '';
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}
+
{:else}
{#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 @@