Final pictures are blurring for transparent background images

[shamscorner]

Issue

As you can see the marked edges are blurred & it seems like the whole image got that blurry effect. I tried experimenting with different Vite query params but same issue.

Here are two images if you want to try this by yourself. Both are having the same issue. https://raw.githubusercontent.com/shamscorner/images/main/header-2.png https://raw.githubusercontent.com/shamscorner/images/main/header-2.webp

[shamscorner]

I believe the issue is with that style on the img tag. Basically, for transparent images, the blur shouldn't be there.

<img 
    src="/@imagetools/f9afa5929003ad70c3e3d0665276d5dac62e7e8e" 
    srcset="/@imagetools/a144d9582b7308d71e47aa5f8d9b564a27450bc6 
        480w,/@imagetools/4e8c026085263686034b0b41afe36fd22efbc313 
        1024w,/@imagetools/f9afa5929003ad70c3e3d0665276d5dac62e7e8e 1920w" 
    width="1920" 
    height="1440" 
    loading="eager" 
    decoding="async" 
    alt="need alt text" 
    style="" -> here if I remove the inline base64 image, the issue is no longer there
>

[zerodevx]

That's the LQIP - can you try importing the img with ?run&....&lqip=0 and see if it helps?

[shamscorner]

Sorry for this late reply. Yes, that is working for sure. However, is that possible to load LQIP with transparent images?

[zerodevx]

Not automatically, but something like this should work:

<script>
...
let ref
</script>

// listen to img `load` event then remove lqip
<Img src="..." bind:ref on:load={() => { ref.style.background = '' }} />

[JP-Ellis]

I have tried using the above snippet and it does not seem to work for me. The on:load does trigger (as tested with a simple console.log(...)) but the background remains for some reason.

[zerodevx]

What does console.log(ref.style.background) show? By right, ref should be bound to the HTMLImageElement.

[xxfogs]

Is fix for this issue planned to be implemented as a part of library?