JonasKruckenberg / imagetools

Load and transform images using a toolbox :toolbox: of custom import directives!
MIT License
931 stars 59 forks source link

PNG to WEBP loses alpha channel #756

Open clintandrewhall opened 3 days ago

clintandrewhall commented 3 days ago

I have a PNG file I'm resizing and converting to WEBP:

const images = import.meta.glob<{ default: ImageOutputMetadata }>('logos/*.png', {
  query: { w: '40', as: 'metadata', format: 'webp' },
  eager: true,
});

So this PNG with transparency:

elastic

Results in a WEBP file that renders with no alpha channel:

image

Even though the metadata claims it does:

channels: 3
depth: "uchar"
format: "webp"
hasAlpha: true
hasProfile: false
height: 40
isProgressive: false
space: "srgb"
src: "/@imagetools/2ea211769af126686faeadb5c2b675b88f439323"
width: 40

Any ideas what I'm doing wrong here?

clintandrewhall commented 2 days ago

Just tried with a GIF with the same result:

Screenshot 2024-10-28 at 10 33 08 AM

elastic