Webp image with alpha channel is converted to jpeg image that has a black color for the alpha instead of being a transparent png

Verify canary release

• I verified that the issue exists in Next.js canary release

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10 Pro
Binaries:
  Node: 14.17.6
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant packages:
  next: 12.1.2-canary.1
  react: 17.0.2
  react-dom: 17.0.2

What browser are you using? (if relevant)

Safari 13.1 (on macOS Catalina) through BrowserStack

How are you deploying your application? (if relevant)

next start, Vercel

Describe the Bug

After the implementation of the next/image webp convertion in next@12.1.1 (see https://github.com/vercel/next.js/issues/20794 and https://github.com/vercel/next.js/pull/35190), I decided to give it a go, because I was using a workaround for browsers that didn’t support the WEBP format. For those wondering - I just had a handler that would load the appropriate jpg or png if there is an error loading the webp image.

Anyway, I removed my workaround and left only the webp image without the error handling logic. I had to test it on a browser that didn’t support WEBP format images. One such browser is Safari - version 13.1, which I was able to test through BrowserStack on macOS Catalina. On our company’s website we serve different webp images - some of them are pure JPGs without any alpha and they were converted and served on Safari 13.1 without a problem. However, we also have a lot of WEBP images that have an alpha channel, meaning that their converted counterparts are PNGs. I was disappointed to find out that those converted WEBP images did not account for the alpha in the image. Instead, the alpha is being substituted with a black color / black background. Here are images from Chrome and Safari 13.1, so that you can get a better understanding:

Chrome

Safar 13.1

Given this issue, I am not able to update the version of next, so basically I am stuck with version 12.1.0 until this has been fixed.

Expected Behavior

I expect the WEBP image that has an alpha channel to be converted to its PNG counterpart, instead of being converted to a JPG image that has black for the alpha parts of the image.

To Reproduce

1. Create a project with Next.js with version that is >= 12.1.1, so that it includes the added functionality of WEBP image convertion
2. Add an image file with alpha with the .webp extension to the public directory
3. Import that image file in a component of your choice and render a next/image Image component and pass that imported image as a src prop.
4. Test on a browser that doesn’t support the WEBP image format. (You can check unsupported browsers here: https://caniuse.com/webp Personally, I used BrowserStack to test on a real device)
5. See how the alpha channel is converted to black, as if the WEBP was converted to a JPG, and not PNG.

[andreaskienle]

Wait, what? Why would someone want to not accept WebP images?

I meant this only for testing purposes: instead of using an older browser which doesn’t support webp (or BrowserStack), you can also use Firefox with this plugin.

[thexpand]

I’ve observed the same behaviour. To reproduce you can also use Firefox with the Don’t “Accept” image/webP extension.

Wait, what? Why would someone want to not accept WebP images?