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

Why this is a good first issue

Alpha channel handling in image conversion needs fixing.

AI Summary

The issue involves incorrect alpha channel handling when converting WEBP images to other formats, resulting in black backgrounds instead of transparency. A PR (#36611) has already been submitted to address this. The main blocker appears to be local setup challenges for testing.

Issue Description

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 [email protected] (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 ![Screenshot 2022-03-27 004026](https://user-images.githubusercontent.com/14979167/160497

GitHub Labels

Image (next/image)