@sveltejs/enhanced-img to support LQIPs.

[Zundrium]

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