Repository: next.js
Issue: Webp image with alpha channel is converted to jpeg image that has a black color for the alpha instead of being a transparent png
Labels: Image (next/image)

### Verify canary release

- [X] 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**
![Screenshot 2022-03-27 004026](https://user-images.githubusercontent.com/14979167/160497211-0b772481-cc3a-4159-a72d-1720f82b0860.png)

**Safar 13.1**
![Screenshot 2022-03-27 000756](https://user-images.githubusercontent.com/14979167/160497265-969eefda-aec5-4dc4-b3ab-4ff1867d8f2e.png)

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.