Use @svelte/enhanced-img to generate image-set css atributte

[justino-gustavo]

Describe the problem

Esvelte has become my favorite framework both in terms of performance and ease. And the fact that the style tag doesn't integrate with the script is a little frustrating... but ok! I've been trying out new features of the tool and came across enhanced-img, very good! I know it's in the experimental phase, but the suggestion has come to implement some way of optimizing media imports in the style tag.

Describe the proposed solution

Increase the performance and optimization of imported media through the style tag.

Alternatives considered

This is a quick solution I use:

export function createImageSet(sources: { [format: string]: string }) {
		let imageSet = '';
		const entries = Object.entries(sources);
		const countEntries = entries.length - 1;

		for (let i = 0; i <= countEntries; i++) {
			const [format, source] = entries[i];
			const paths = source.split(', ');
			const countPaths = paths.length - 1;

			for (let j = 0; j <= countPaths; j++) {
				const [src, size] = paths[j].split(' ');

				if (!size.endsWith('w' || 'h'))
					imageSet += `url('${src}') type('image/${format}') ${size}`;
				else imageSet += `url('${src}') type('image/${format}') ${j + 1}x`;

				if (i !== countEntries || j !== countPaths) imageSet += ', ';
			}
		}

		return `image-set(${imageSet})`;
	}

and in the components I define a css variable:

<script>
    import anyImage from "path/to/image.jpg?enhanced";
    import { createImageSet } from "$lib/utils/css"
</script>

<div style="--backgroud-img: {createImageSet(anyImage.sources)};" />

<style>
    div {
        background-image: var(--background-img);
    }
</style>

Importance

would make my life easier

Additional Information

enhaced-img returns:

{
  sources: {
    avif: "/@imagetools/70afb68653a7d82f719d97599f1edc0ca35c6b24 1200w, /@imagetools/cfc4eabdf74d20923606e629c544a54952364256 2x",
    webp: "/@imagetools/39ed55771452ec7dae97a68c05893b4d6e0ce067 1200w, /@imagetools/8a4164dae60d3811063b71196ac8eed060d11cfd 2400w",
    jpeg: "/@imagetools/0a063c4b78bbd35d7ad334eda0c7fb967ef0429c 1200w, /@imagetools/683d456515f582aa56dccf7ea6cf4be5ac9278b5 2400w",
  },
  img: {
    src: "/@imagetools/683d456515f582aa56dccf7ea6cf4be5ac9278b5",
    w: 2400,
    h: 1558,
  },
}

generated image-set:

image-set(url('/@imagetools/70afb68653a7d82f719d97599f1edc0ca35c6b24') type('image/avif') 1x, url('/@imagetools/cfc4eabdf74d20923606e629c544a54952364256') type('image/avif') 2x, url('/@imagetools/39ed55771452ec7dae97a68c05893b4d6e0ce067') type('image/webp') 1x, url('/@imagetools/8a4164dae60d3811063b71196ac8eed060d11cfd') type('image/webp') 2x, url('/@imagetools/0a063c4b78bbd35d7ad334eda0c7fb967ef0429c') type('image/jpeg') 1x, url('/@imagetools/683d456515f582aa56dccf7ea6cf4be5ac9278b5') type('image/jpeg') 2x)