1511670 - Implement WebP image encoder

Status: RESOLVED FIXED

(Core :: Graphics: ImageLib, enhancement, P3)

Description

[Jan Beich]

See bug 1294490 comment 123.

Steps to reproduce:
1. Open http://html5test.com/
2. Navigate to "Image export formats"

Expected result:
- WebP support: Yes ✔

Actual result:
- WebP support: No ✘

Comment 1

[Mark Straver]

See: bug 1294490 comment 124.

IMO this is a bug in html5test's detection routines by requiring encoding capabilities as a measure of decoding capabilities. This isn't a bug in the browser.

Comment 2

[Jan Beich]

I wonder if YouTube uses Canvas for generating animated preview thumbnails.

(In reply to Mark Straver from comment #1)
> requiring encoding capabilities as a measure of decoding capabilities

HTML5Test defines the feature as "export" (i.e., "encoding") and cites compositing/blending API in Canvas2D. Where did you get the idea about decoding-only?

Comment 3

[Jan Beich]

attachment 770546 [details] [diff] [review] has WebP encoder but after playing in Waterfox[1] it appears to be a stub/unfinished - not usable with real consumers.

[1] https://github.com/MrAlex94/Waterfox/pull/514

Comment 4

[Mark Straver]

I'm sorry if I misunderstand what capabilities are requested by the html5 standard. Isn't the goal of this about *decoding* support only, i.e. being able to decode and display images in specified formats on websites, and therefore a test for encoding to specific image formats is testing the wrong thing to determine whether an image format is supported?

html5test.com seems to equate "image format support" with "encoding support", possibly because of the easier detection method when doing it that way. I think that's incorrect. The compositing/blending API also doesn't specify anything in its spec with regard to what image encoding formats should be supported, so in what way is this a test of "how well the browser supports html5"?

Comment 5

[Andrew Osmond [:aosmond] (he/him)]

This will definitely not make it in time for 65. I need to evaluate this for later releases.

Comment 6

[Andrew Osmond [:aosmond] (he/him)]

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.

Comment 8

[ulima.ums]

Attachment: Bug 1511670 - Adding required files for encoding webp. r=aosmond

Comment 9

[ulima.ums]

Attachment: Bug 1511670 - Add WebP image encoding support. r=aosmond

Depends on D126300

Comment 10

[ulima.ums]

Attachment: Bug 1511670 - Rename files 1/2. r=aosmond

Depends on D126301

Comment 11

[ulima.ums]

Attachment: Bug 1511670 - Rename files 2/2. r=aosmond

Depends on D128019

Comment 12

[ulima.ums]

Attachment: Bug 1511670 - Update libwebp to 1.2.1 and update.sh. r=aosmond

Depends on D128020

Comment 13

[Marco Bonardo [:mak]]

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

Comment 14

[ulima.ums]

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

Comment 15

[ulima.ums]

Attachment: Bug 1511670 - Adding required files for encoding webp. r=aosmond

Comment 16

[ulima.ums]

Attachment: Bug 1511670 - Add WebP image encoding support. r=aosmond

Depends on D130547

Comment 17

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/efdcc9ec0feb
Adding required files for encoding webp. r=aosmond
https://hg.mozilla.org/integration/autoland/rev/be7dd657bae3
Add WebP image encoding support. r=aosmond

Comment 18

[Andrew Osmond [:aosmond] (he/him)]

This will be in Firefox 96.

Comment 19

[Alexandru Michis [:malexandru]]

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

Comment 20

[Tom S [:evilpie]]

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.

Comment 21

[Hamish Willee]

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.

Comment 22

[ulima.ums]

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

Comment 23

[Hamish Willee]

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

Comment 24

[janghou]

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

Comment 25

[Timothy Nikkel (:tnikkel)]

Thanks. I filed bug 1750475.