I'm trying out the WebP image format in Chrome using the canvas element. On MDN I saw that toDataURL accepts a second argument representing the quality of the resulting image.

I'd like to generate a lossless WebP image of a canvas element. However, if I pass 1 for quality (meaning 100%), I don't get the exact same pixels back. It looks like it is generating a lossy image.

Here's a test case: /. When drawing the PNG image, a certain color of a certain pixel has a value of 40. After drawing a 100% quality WebP image of the canvas on itself, the same value has changed to 37. This does not seem lossless to me, even though I passed a quality of 100%.

Is it possible to have toDataURL create a lossless WebP image, and if so how?

I'm trying out the WebP image format in Chrome using the canvas element. On MDN I saw that toDataURL accepts a second argument representing the quality of the resulting image.

I'd like to generate a lossless WebP image of a canvas element. However, if I pass 1 for quality (meaning 100%), I don't get the exact same pixels back. It looks like it is generating a lossy image.

Here's a test case: http://jsfiddle/Nf5ve/1/. When drawing the PNG image, a certain color of a certain pixel has a value of 40. After drawing a 100% quality WebP image of the canvas on itself, the same value has changed to 37. This does not seem lossless to me, even though I passed a quality of 100%.

Is it possible to have toDataURL create a lossless WebP image, and if so how?

• javascript
• html
• google-chrome
• canvas
• webp

• Just to double-check, is there any transparency in the original PNG? – Jacob Foshee Commented Jul 13, 2012 at 22:21
• @Jacob Foshee: No, it's a random photograph from lorempixel.. – pimvdb Commented Jul 14, 2012 at 10:41

2 Answers 2

There are no official MIME types for webp so take this with a grain of salt for now.

Using "image/webp" on chrome in toDataURL will always result in a lossy webp image right now, even at quality "1"

There is seemingly no way to get a lossless webP image at this time

I tested and confirmed image/webp-lossless works as intended in Chrome these days. Just use it instead of image/webp

The issue appears to have been resolved in 2016.

The image I used to test would have incorrect colors with lossy webp, and the colors are now correct.

To be certain it's truly a webp and not a png I used the following on Linux, where the filename is webptest

❯ file webptest
webptest: RIFF (little-endian) data, Web/P image

Edit: Hmmmm... but the returned value from toDataURL is image/png so now I haven't a clue what to think. But the size of the file is identical to one I created from Sharp which is certainly webp...