webp rendering support

[mpeyfuss]

Topic

GIFs play just fine when using loadImage but webp images do not. Is this something that is planned for the future? Webp format is becoming more prevalent and is a great GIF alternative for smaller & faster files.

[welcome]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, please make sure to fill out the inputs in the issue forms. Thank you!

[davepagurek]

One option for right now is to use createImg to create a DOM element instead of loadImage (aside: we need to fix the reference example for that 😬) You can either display the element on top of the canvas, or call .hide() on it and draw it to the canvas using image(yourElement, x, y) like any other image and I believe that should work.

The main thing you lose out on is the ability to manually control the playback of the animation, as that requires parsing the frames out of the image file. If someone has made a webp parsing library we could leverage, then adding support for animated webp could be feasible.

[mpeyfuss]

Yeah, taking a closer look at all the gif code now. Would be good to be able to reuse the code for gifs if possible. Will do some more research!

[SDprogramer]

Hey, I want to contribute in this issue.
And being first time in open source development ca you please suggest me how to contribute to this and the steps related to.

[asukaminato0721]

If someone has made a webp parsing library

I found this https://github.com/antimatter15/weppy

[Rishab87]

If someone has made a webp parsing library we could leverage, then adding support for animated webp could be feasible.

Ig we can use this: https://github.com/jhuckaby/webp-wasm, with this library we can decode animated WebP to extract frames for rendering in p5.js.

[limzykenneth]

Will need to test webp as well as avif support as well in 2.0. I'm not sure if the animation stuff will work with the gif library we are using but as static image I would like them to work, especially avif with HDR support in 2.0.

[limzykenneth]

Just tested avif and hdr and it all works as expected. Animation for Webp and Avif does not work, which is also somewhat expected as the gif library we use probably don't support it. Will need to look into what possibilities we have for this.

[limzykenneth]

For animated webp or avif it is a bit more problemmatic. The good news is that there is a web standard ImageDecoder that can handle decoding animated gif, webp, and avif without a dependency. The bad news are:

1. It does not work on Safari yet (which includes all Apple mobile devices)
2. Animated avif does not work on Firefox
3. There is only an interface for decoding and not for encoding which is needed to save animated images.

I've looked around and there don't seem to be any suitable library for handling animated webp that is both reasonably well maintained and does not rely on WebAssembly. I found basically no library to handle animated avif.

@mattdesl Seeing as we are currently using your gifenc library to do the encoding, I think you probably know more than I do around the encoding bits. Is it right to say that the difference between encoding for webp/avif and gif is just the compression algorithm while the quantization and palette fitting steps stays the same, or are they completely different processes? I'm asking also slightly hoping gifenc can eventually expand to handle animated webp and avif if at all possible.

In any case, currently I don't see a very good way forward with this in terms of animated webp and avif, so it is unlikely to be implemented anytime soon until a suitable solution is found.