Gatsby: [gatsby-transformer-sharp] Transparent PNG image transform to Webp does not create correct image

[joshuaavalon]

Description

Transparent PNG image transform to Webp does not create correct image.

I have tested with the following script

const sharp = require("sharp");

sharp("docker.png").webp().toFile("output.webp");

This produce a correct Webp image which make me believe this is a Gatsby problem.

Steps to reproduce

{
  resolve: "gatsby-remark-images",
  options: {
    maxWidth: 1200,
    withWebp: true,
    quality: 85,
    tracedSVG: false,
    showCaptions: true
  }
}

Expected result

Actual result

Environment

  System:
    OS: Windows 10
    CPU: (8) x64 Intel(R) Core(TM) i7-4790K CPU @ 4.00GHz
  Binaries:
    npm: 6.9.0
  Languages:
    Python: 3.7.0
  Browsers:
    Edge: 42.17134.1.0
  npmPackages:
    gatsby: ^2.7.5 => 2.7.5
    gatsby-image: ^2.1.2 => 2.1.2
    gatsby-plugin-manifest: ^2.1.1 => 2.1.1
    gatsby-plugin-offline: ^2.1.1 => 2.1.1
    gatsby-plugin-react-helmet: ^3.0.12 => 3.0.12
    gatsby-plugin-sass: ^2.0.11 => 2.0.11
    gatsby-plugin-sharp: ^2.1.2 => 2.1.2
    gatsby-plugin-typescript: ^2.0.15 => 2.0.15
    gatsby-remark-external-links: 0.0.4 => 0.0.4
    gatsby-remark-images: ^3.0.14 => 3.0.14
    gatsby-remark-prismjs: ^3.2.9 => 3.2.9
    gatsby-source-filesystem: ^2.0.37 => 2.0.37
    gatsby-transformer-remark: ^2.3.12 => 2.3.12
    gatsby-transformer-sharp: ^2.1.20 => 2.1.20

[freiksenet]

I've tried using this image with the config that you've provided, but I couldn't reproduce this issue. I wonder if you could include an example project where this happens.

Thanks a lot! :purple_heart:

[joshuaavalon]

@freiksenet I have create a example repository (joshuaavalon/gatsby-bug-example).

This is what I see after running npm run start.

[freiksenet]

This is very weird.

Could it be a windows problem? I'll ask someone from our team who has windows to test.

[wardpeet]

Seems a legit issue on windows, probably going to be upstream but doesn't really harm to see if we can fix it in gatsby.

[DSchau]

@joshuaavalon could you paste what version of Sharp you used in your script?

It’s possible it’s been fixed upstream but we may be using a slightly older version of Sharp in Gatsby.

[joshuaavalon]

@DSchau I think it is Gatsby problem because I am using the same packages with Gatsby, i.e. add the script to the example repository and run it with npm run. The result image it fine.

The version is 0.22.1 according to package-lock.json

1. Add the following script to the repository

// test.js
const sharp = require("sharp")

sharp("./src/posts/docker.png")
  .webp()
  .toFile("output.webp")

1. Add "bug": "node test.js" to scripts of package.json.
2. Run npm run bug.

The result image seems fine.

[wardpeet]

I just thought it was upstream as it only happens on windows, seems like it isn't :)

Thanks @joshuaavalon

[pathuskey]

I started running into this same issue about 3 months ago on all of my Gatsby projects. I am also developing on a Windows 10 machine, but have builds that run on Jenkins inside a Linux container. The builds will fail with the following errors on images using the _withWebp flag. Once I remove the flag the builds run fine.

• Failed to process image
• (sharp:7568): GLib-CRITICAL **: 21:39:08.606: g_hash_table_lookup: assertion 'hash_table != NULL' failed

[wardpeet]

(sharp:7568): GLib-CRITICAL **: 21:39:08.606: g_hash_table_lookup: assertion 'hash_table != NULL' failed

Feels like a sharp issue, could you reinstall sharp/libvps perhaps?

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contributefor more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[marcel0ll]

I don't believe this issue should be marked as stale yet

[tomswork]

Hey guys - I am also getting this problem on a Windows 10 dev machine;
Exactly the same problem - webp conversion is fine when deployed to netlify (which runs a linux build) but developing directly on windows it doesnt convert properly and has the black background as described above with the alpha channel - No upgrade to any of the gatsby sharp packages makes a difference.

I also came across this bug report below
https://spectrum.chat/gatsby-js/general/black-stuff-around-webp-images~3a0c4f1b-aa4d-4ae9-a947-3d0750162d48

[ArcadeRenegade]

Same problem except the alpha channel is black in dev and deployed to S3.

[viasavva]

Hi , same problem here. Everything works great when deployed to netlify. But black background when build or develop on my machine.

[ryanerringtonatom]

Also got this problem, seems to be specific to windows and transparent png to webp format.

[decimoseptimo]

+1

[tomtdigital]

Are there any workarounds other than removing webp? There seems to be more people experiencing this issue.

[yudyananda]

same here in Windows 10. image source tranparent png but the transparency is gone in webp

~~~
// package.json

"dependencies": {
"bulma": "^0.8.0",
"gatsby": "^2.18.12",
"gatsby-image": "^2.2.37",
"gatsby-plugin-react-svg": "^2.1.2",
"gatsby-plugin-sass": "^2.1.26",
"gatsby-plugin-sharp": "^2.3.9",
"gatsby-source-filesystem": "^2.1.42",
"gatsby-transformer-sharp": "^2.3.9",
"gatsby-transformer-yaml": "^2.2.20",
"node-sass": "^4.13.0",
"react": "^16.12.0",
"react-dom": "^16.12.0"
},
~~~

[jennykat]

Hello,
I am also experiencing the same problem using windows 10.
Trying the exact same code on Ubuntu 18.04.3, the webp images are generated correctly....

[lekevoid]

Hi,
I've been experiencing the same issue for months. I'm on Windows 10. My colleague who works on a Mac has never had this issue. Also we never had the issue on Netlify nor on AWS Amplify.

`
// package.json

"dependencies": {
    "@svgr/webpack": "^5.1.0",
    "gatsby": "2.15.15",
    "gatsby-image": "^2.2.30",
    "gatsby-plugin-catch-links": "^2.1.15",
    "gatsby-plugin-google-tagmanager": "^2.1.15",
    "gatsby-plugin-manifest": "^2.2.38",
    "gatsby-plugin-prefetch-google-fonts": "^1.4.3",
    "gatsby-plugin-react-helmet": "^3.1.13",
    "gatsby-plugin-remove-serviceworker": "^1.0.0",
    "gatsby-plugin-sharp": "2.2.22",
    "gatsby-plugin-sitemap": "^2.2.19",
    "gatsby-plugin-svgr": "^2.0.2",
    "gatsby-remark-images": "^3.1.29",
    "gatsby-source-apiserver": "^2.1.3",
    "gatsby-source-filesystem": "^2.1.35",
    "gatsby-source-wordpress": "^3.1.46",
    "gatsby-transformer-remark": "^2.6.32",
    "gatsby-transformer-sharp": "2.2.14",
    "graphql": "^14.5.8",
    "i18n-react": "^0.7.0",
    "prop-types": "^15.7.2",
    "react": "^16.12.0",
    "react-cookies": "^0.1.1",
    "react-countup": "^4.2.3",
    "react-dom": "^16.12.0",
    "react-helmet": "^5.2.1",
    "react-hubspot-form": "^1.3.7",
    "react-lazyload": "^2.6.2",
    "react-md": "^1.12.3",
    "react-responsive-carousel": "^3.1.51",
    "react-scroll": "^1.7.14",
    "react-sticky": "^6.0.3"
},

`

[ryanerringtonatom]

@wardpeet - would it be possible to get an update on this issue?

It's been an issue for around half a year for our windows developers. I'm wondering if there is a temporary workaround we can use for now.

[yudyananda]

just test png to webp using [email protected] only, just like @joshuaavalon did and the result image is fine. I really hope there is a way out for windows users to be able to transform png to webp

[lietu]

I ran to the same issue on Win10 & Node v12.16.3.

Saw the suggestion to try [email protected] and added to package.json for yarn this:

{
  "resolutions": {
    "sharp": "^0.24.0"
  },
}

but it seems like I get the same broken result.

Removing the _withWebp from the graphql query fixes it though. I guess that's good enough for now.

[jvmiert]

I'm having the same issue on Windows 10, node v12.13.0. Tried [email protected] but yielded same result.

  "dependencies": {
    "gatsby": "^2.21.37",
    "gatsby-image": "^2.4.4",
    "gatsby-plugin-manifest": "^2.4.5",
    "gatsby-plugin-offline": "^3.2.3",
    "gatsby-plugin-react-helmet": "^3.3.1",
    "gatsby-plugin-scroll-reveal": "^0.0.7",
    "gatsby-plugin-sharp": "^2.6.4",
    "gatsby-source-filesystem": "^2.3.4",
    "gatsby-transformer-sharp": "^2.5.2",
    "prop-types": "^15.7.2",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-helmet": "^6.0.0"
  },

[robmarshall]

This is an issue for me as well, and it seemingly not completely related to sharp. See this comment: https://github.com/lovell/sharp/issues/2072#issuecomment-582593208

[abdullahe]

So, this still exists. Anyone found a solution?

[yudyananda]

So, this still exists. Anyone found a solution?

meanwhile we wait the real solution you can use WebP only in production (non windows env)

[PiotrSiatkowski]

It surely does exist on Windows 10.

[laradevitt]

Me too. ✋

  System:
    OS: Windows 10 10.0.18363
    CPU: (8) x64 Intel(R) Core(TM) i7-6700 CPU @ 3.40GHz
  Binaries:
    Node: 13.11.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.4 - ~\.yarn\bin\yarn.CMD
    npm: 6.14.4 - C:\Program Files\nodejs\npm.CMD
  Languages:
    Python: 3.7.2 - /c/Users/r2dfoo/AppData/Local/Programs/Python/Python37/python
  Browsers:
    Edge: 44.18362.449.0
  npmPackages:
    gatsby: ^2.17.10 => 2.23.1
    gatsby-image: ^2.2.30 => 2.4.6
    gatsby-paginate: ^1.1.1 => 1.1.1
    gatsby-plugin-catch-links: ^2.1.15 => 2.3.4
    gatsby-plugin-favicon: ^3.1.6 => 3.1.6
    gatsby-plugin-gtag: ^1.0.11 => 1.0.13
    gatsby-plugin-layout: ^1.1.13 => 1.3.3
    gatsby-plugin-manifest: ^2.2.26 => 2.4.10
    gatsby-plugin-netlify: ^2.1.23 => 2.3.4
    gatsby-plugin-netlify-cms: ^4.1.26 => 4.3.4
    gatsby-plugin-netlify-cms-paths: ^1.3.0 => 1.3.0
    gatsby-plugin-offline: ^2.2.10 => 2.2.10
    gatsby-plugin-react-helmet: ^3.1.13 => 3.3.3
    gatsby-plugin-robots-txt: ^1.5.0 => 1.5.1
    gatsby-plugin-sass: ^2.1.20 => 2.3.3
    gatsby-plugin-sharp: ^2.2.36 => 2.6.10
    gatsby-plugin-sitemap: ^2.2.19 => 2.4.4
    gatsby-plugin-web-vitals: ^1.0.3 => 1.0.3
    gatsby-remark-copy-linked-files: ^2.1.28 => 2.3.4
    gatsby-remark-images: ^2.0.6 => 2.0.6
    gatsby-source-filesystem: ^2.1.35 => 2.3.10
    gatsby-transformer-remark: ^2.6.32 => 2.8.14
    gatsby-transformer-sharp: ^2.3.2 => 2.5.4

[mimoid-prog]

Windows 10. Still same issue for PNG

[wickedpuppy]

Same here

[jbebe]

Same here (W10, png -> webp)

[laradevitt]

Can y'all run gatsby info and copy and paste it?

This should have been fixed in 2.23.21.

[jbebe]

Indeed it is fixed by updating from 2.22.x to latest (2.24.x)
Thanks for the heads up!