@sveltejs/enhanced-img to support LQIPs.

Describe the problem

Even with WebP images, larger header files still take time to load. For these I would like to consider adding LQIP hash support.

Describe the proposed solution

vite-imagetools seems to have support for this withimport inlineImage from 'example.jpg?w=16&format=webp&inline';. So it would be a matter of adding this and transitioning to the larger image with the image load event.

Alternatives considered

As a workaround, I made a wrapper around <enhanced:img>:

<script module lang="ts">
    const images: any = import.meta.glob(
        ["../../assets/images/**/*.{avif,gif,heif,jpeg,jpg,png,tiff,webp}"],
        {
            eager: true,
            query: {
                enhanced: true,
                w: "1536;1280;1024;768;640;400;300;250",
            },
        },
    );

    const lqips: any = import.meta.glob(
        ["../../assets/images/**/*.{avif,gif,heif,jpeg,jpg,png,tiff,webp}"],
        {
            eager: true,
            query: {
                enhanced: true,
                w: "16",
                inline: true,
            },
        },
    );

    const getHighResImageSrc = (desired_image: string) => {
        return images[`../../assets${desired_image}`].default;
    };

    const getLqipSrc = (desired_image: string) => {
        return lqips[`../../assets${desired_image}`].default;
    };
</script>

<script lang="ts">
    let lqipElement: HTMLImageElement;
    let highResElement: HTMLImageElement;

    let highResImageLoaded: boolean = false;

    function handleOnHighResLoad() {
        highResImageLoaded = true;
    }

    let classes: string = "";
    export { classes as class };

    export let thumb: boolean | null = null;
    const thumbSizes =
        "(min-width: 1280px) 400px, (min-width: 768px) 300px, (min-width: 640px) 250px";
    export let sizes =
        "(min-width: 1536px) 1536px, (min-width: 1280px) 1280px, (min-width: 1024px) 1024px, (min-width: 768px) 768px, (min-width: 640px) 640px";

    $: imageSizes = thumb ? thumbSizes : sizes;
    export let src;
    export let alt = "";

    const lqipSrc = getLqipSrc(src);
    const fullSrc = getHighResImageSrc(src);
</script>

<div class={classes} {...$$props}>
    <div class="w-full h-full relative">
        <enhanced:img
            bind:this={lqipElement}
            class="w-full h-full object-cover"
            src={lqipSrc}
            sizes={imageSizes}
            {alt}
        />
        <enhanced:img
            loading="lazy"
            onload={handleOnHighResLoad}
            bind:this={highResElement}
            class="absolute top-0 left-0 right-0 bottom-0 h-full w-full object-cover {highResImageLoaded
                ? 'opacity-100'
                : 'opacity-0'}"
            src={fullSrc}
            sizes={imageSizes}
            {alt}
        />
    </div>
</div>

If there are any best practices to follow, please let me know!

Importance

nice to have

Additional Information

No response

Start at the @sveltejs/enhanced-img entry point and compare its image handling with the vite-imagetools query shown in the issue. Trace how the inline 16px image and the larger image could be exposed, then verify that the larger image transitions on its load event while preserving the existing image behavior.