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

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

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 12
Comments: 34 (12 by maintainers)

Most upvoted comments

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

+16

marcel0ll on Jul 11, 2019

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

ryanerringtonatom on Feb 5, 2020

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"
},

lekevoid on Feb 4, 2020

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.

wardpeet on Jun 5, 2019

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

This should have been fixed in 2.23.21.

laradevitt on Aug 24, 2020

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

robmarshall on Jun 3, 2020

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

jbebe on Aug 26, 2020

So, this still exists. Anyone found a solution?

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

yudyananda on Jun 11, 2020

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…

jennykat on Jan 13, 2020