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[bot]]

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.

[koushikcs562]

Hi everyone,

I'm very interested in helping to implement WebP and AVIF support, particularly for animated formats, as it's a crucial next step for p5.js with these modern formats becoming more common. I appreciate the deep dive into the constraints regarding decoding and encoding.

I'd like to attempt to research and address the decoding/rendering side first, as that seems the most feasible path forward right now.

My Proposed Solution/Research Path for Animated Decoding:

1. Implement ImageDecoder for Rendering: I will research how to best integrate the native ImageDecoder for browsers (like Chrome/Firefox) that support it. This will provide the best performance and frame-level control.
2. Establish a Fallback: Since ImageDecoder lacks Safari support, I will investigate implementing a robust fallback to using createImg() and image(element, ...) for rendering animated WebP/AVIF on unsupported platforms, ensuring the images still display, even if frame control is lost.
3. Encoding Research: In parallel, I will keep an eye on the discussion regarding encoding and research small, non-Wasm encoding alternatives (if they exist) or investigate the complexity of extending gifenc for WebP, as suggested.

Could someone please point me to the relevant source files or functions where the existing animated GIF decoding logic resides, specifically within loadImage(), so I can start formulating a concrete implementation plan for the feature-detection and fallback logic?

Thank you!

[limzykenneth]

@koushikcs562 At this point I don't really want a split approach based on specific API support, it makes things brittle and hard to maintain, there is also no feature parity between these two split approach which creates more confusion.

[koushikcs562]

Thanks for the clarification about avoiding split approaches — that makes sense. Based on that, here’s a unified path forward for animated WebP/AVIF support that keeps things maintainable:

✔ Use a single Wasm-based decoder pipeline for all browsers Animated WebP/AVIF require complex codecs (VP8/VP9/AV1), and current browser APIs like ImageDecoder aren’t consistent (Safari gaps, no encoding). A Wasm decoder (e.g., webp-wasm for WebP and an AVIF Wasm build) gives us:

One consistent decoding path

Full frame-level access (timing, disposal, alpha)

Same behavior across all browsers including Safari

No fallback logic or feature mismatches

✔ Wrap the decoder behind a small internal AnimationDecoder interface This keeps the p5.js code clean and lets WebP/AVIF integrate with the existing GIF animation flow.

✔ Plug into loadImage() using MIME detection So the public API stays unchanged.

If this direction aligns with p5.js 2.0 goals, I’d be happy to start with a WebP decoder prototype and gradually integrate AVIF.

[limzykenneth]

@koushikcs562

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.

As your replies shows very common signs of being generated by AI, and if so might I suggest you pause for now and fully understand where the position of this issue is actually at before trying to generate additional response/potential solution?