SvelteKit needs an image optimisation library

[shalawfatah]

I was building my portfolio with SvelteKit and everything was going smoothly, until I introduced some images fetched from the backend. Suddenly, there is a 25% decrease in Lighthouse performance score.
I looked for image optimisation libraries, but I found none with official SvelteKit.
I looked for community packages, one looks promising called SVImage, but it has an issue with ES Module breaking the project.
Any serious project needs a good image optimisation tool given that images could come from any source.
Any ideas how to solve that issue?
Thanks

[spiffyguy]

Have you seen this package that works with SvelteKit?

https://github.com/zerodevx/svelte-img

It utilizes Vite's powerful "imagetools" (https://github.com/JonasKruckenberg/imagetools)

Both are maintained and recently updated.

[shalawfatah]

@spiffyguy This package only works for local images. Images often come from external sources like a database or a bucket somewhere.

[spiffyguy]

Gotcha, I've mainly used it for local images so far in my projects but there is a part of the readme that mentions remote URLs. Have not tried that part yet in my projects but will soon so I can see how it works.

Have you looked at that?

https://github.com/zerodevx/svelte-img#remote-images-from-an-api

[shalawfatah]

@spiffyguy many thanks. I'll try this and let you know.
Best

[shalawfatah]

@spiffyguy Many thanks, it works perfectly and the performance is 98% again after using the library. I tested on my portfolio's homepage if you are curious: portfolio

And this is basically the code:

<script>
    export let image;
    export let title;
    export let live;
    export let github;
    import Img from '@zerodevx/svelte-img'

    const src = {
    img: { src: `${image}`, w: 400 , h: 300 },
    sources: {
        // Order is important; last format is fallback img
        webp: [
        { src: `${image}`, w: 400 },
        { src: 'path/to/img', w: 400 }
        ],
        jpeg: [
        { src: `${image}`, w: 400 },
        { src: `${image}`, w: 400 }
        ]
    }
    }
</script>

<div class="relative">
    <Img class="opacity-60 hover:opacity-100 duration-300 w-96 h-60 rounded-lg shadow-sm shadow-gray-300" {src} alt={title} />
    <h5 class="mb-1 text-xl font-medium text-white my-4 text-center">{title}</h5>
    <div class="flex justify-center items-center">
        <div class="absolute bottom-16 flex mt-4 space-x-3 md:mt-6">
            <a target="_blank" href={live} class="shadow-md shadow-black inline-flex items-center px-8 py-2 text-sm font-black text-center text-gray-900 bg-[#FF7B7B] rounded-lg hover:bg-blue-800 hover:text-white focus:ring-4 duration-300 focus:outline-none focus:ring-blue-300 ">Live</a>
            <a target="_blank" href={github} class="shadow-md shadow-black inline-flex items-center px-8 py-2 text-sm font-black text-center text-gray-900 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 hover:text-blue-800 durtion-300  focus:ring-4 focus:outline-none focus:ring-gray-200 ">Github</a>
        </div>
    </div>
</div>

[spiffyguy]

Awesome! Great to hear it works well, I am not affiliated with the project but also think it's great at what it does.

Thanks for giving me an update after trying it so I know it works well for remote images too!

PS: Nice fast loading portfolio! :)

[eltigerchino]

#10323 and #10788 are currently in progress to add dynamic / static image optimisation

[laszlo1337]

https://github.com/JonasKruckenberg/imagetools

I used this, it's very convenient as all you need to do is during image import just add a query like ?quality=90&format=webp. That's all.

[mandrasch]

Hi, does anyone know what the latest status of this is? Is there something similiar nowadays to Next Image or Nuxt Image which can also transform dynamic / external images (with something like sharp / on-the-fly image optimization)?

Would be cool for small projects to have a built-in solution I guess, where you can't to pay for an external CDN service like imgix, etc.

(Others pointed out that selfhosted https://github.com/unjs/ipx can be used in combination with https://unpic.pics/img/svelte/, but this requires selfhosting another service)

[brunnerh]

Have you seen @sveltejs/enhanced-img?
(Though that is for local files.)

[mandrasch]

that only works for build time, not remote / dynamic images

But I just found the issue where this is discussed, someone tried a sharp image lib already: #241 (comment)

Related issue: Image processing #241