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

[thexpand]

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 #20794 and #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.

[thexpand]

Did anyone have a chance to look at this?

[olliethedev]

Probably related issue here but I see the same problem with PNGs instead of WEBPs

[thexpand]

I'm trying to install next locally with yarn to try and create a PR, but so far I've been facing errors during the installation of next.js locally.

[thexpand]

I have created PR #36611 that fixes this issue. @balazsorban44 I see that you were the one to mark this as a bug and put the label "area: next/image". Can you do a review of the PR?

[macojaune]

I have the same issue, but is it normal that when testing on a local build or dev the same images are rendering properly ?

[thexpand]

I have the same issue, but is it normal that when testing on a local build or dev the same images are rendering properly ?

@macojaune It could be because you didn't remove/delete the .next directory. I think it happened to me as well when I was testing. Try deleting the directory and running dev again.

[andreaskienle]

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

[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?

[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.

[alexryazanov]

In my case I can reproduce the issue when Accept request header is removed (we can do it with an extension). Some CDNs like Azure Front Door send traffic without this header and cache an image with black background

[rodrigo-arias]

I have been experiencing this problem. While the vast majority of real users use browsers with WebP support, the same is not the case with crawlers. While the latter indexes the site, images with transparency are cached with a black background when converted to JPEG.