"on the fly clientside image to webp converter...but png's are not transparent" Code Answer


canvas status

this is an known issue with chrome.

from the comments from the link above it's stated:

webcore discards the alpha channel in todataurl("image/webp") and encodes the image from the rgb pixels because webp never supported alpha channel. todataurl("image/webp") has been that way since http://trac.webkit.org/changeset/99319 (shipped over a year ago).

webp only recently added support for alpha channel and there is no way to select that in a todataurl. we could force it one way or the other, i suppose, but should the default encoding be 1) no-alpha as now, or 2) alpha as requesting in this bug?

the issue has currently not been solved but will likely be addressed in near future.

possible work-around

for a possible work-around you can use a custom implementation of the webp format which states it supports the alpha channel. it can convert png (and jpeg) to webp format.

the solution is called webpjs and can be found here (and examples can be found here).

(but there is also the possibility that chrome won't be able to decode webp images even if they contain alpha channel..).


webp images with alpha channel has poor support at the moment even with google's (the inventor) own chrome, and lack support in other browsers. my advice is that you put this on ice until support is improved and instead use png as this has wide support.

use tools such as tinypng.com to reduce the sizes of the files.

By vcsjones on May 9 2022

Answers related to “on the fly clientside image to webp converter...but png's are not transparent”

Only authorized users can answer the Search term. Please sign in first, or register a free account.