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