Ultimately this is a request to implement an image encoder for WebP. This isn't a high priority right now, but I'll leave the bug open.

Depends on D126300

Depends on D126301

Depends on D128019

Depends on D128020

We are evaluating to use webp to store thumbnails in the profile folder, do you have an ETA for this work?

The patch is ready to be reviewed. I am waiting for aosmond for approval

Depends on D130547

This will be in Firefox 96.

https://hg.mozilla.org/mozilla-central/rev/efdcc9ec0feb
https://hg.mozilla.org/mozilla-central/rev/be7dd657bae3

I am not sure what all the places in the web-platform that expose image encoding are, but HTMLCanvasElement.toDataURL is at least one of them.

The FF96 docs work for this can be tracked in https://github.com/mdn/content/issues/10853

My understanding of this is that that it essentially creates an encoder that can turn generate WebP images from images in other formats. I also understand that this is used by HTMLCanvasElement.toDataURL() to allow you to generate WebP images.

• Why would you want to do this?
  My guess would be if you wanted to provide a drawing app or similar in a canvas you could use it to provide a mechanism to export the image as WebP. Further, I presume that you might use it to export an image that you could later simple import as data into the canvas rather than downloading it (although I don't know why you would want to do this).
  Are there any other reasons?

The job as it is now is to push the compatibility info into browser compatibility data - along with the data for chrome (any idea when its support for WebP went in?). I would also need to remove that in-text data about chrome support from the doc HTMLCanvasElement.toDataURL().

• Is there any way to work out where this is used or anyone I can ask? Without that I can't do much more.
  I am pretty sure it is used in HTMLCanvasElement.toBlob.

Sorry for the late reply. Yes, this patch just adds another image encoder. It can be used by canvas.toDataURL() or canvas.toBlob(). I am not aware of any other uses.

I stumbled across this because I created a whiteboard web app and didn't want to upload big png files whenever someone dropped them on the canvas. So I converted them to webp which drastically reduced my traffic. I encountered the same problem in a different project. For me it was always about the size of the uploaded images.

A different use case could be that you created some image on a canvas and want to save it but png is too big and jpg has no transparency

Thanks @ulima.ums! FYI only, this also allows webp to be used in OffscreenCanvas.toBlob() (this is behind a preference).

Why isn't there a quality/compression setting implemented, like there is for jpg?

AFAICS, it's compression level is now something like 93%.

See:
https://stackoverflow.com/questions/70709171/how-to-set-compression-quality-for-webp-encoding-in-firefox
https://searchfox.org/mozilla-central/source/dom/canvas/CanvasRenderingContextHelper.cpp#264

Thanks. I filed bug 1750475.