[gatsby-source-contentful] placeholder ignores original format and transparency when using CDN

[njbmartin]

Preliminary Checks

• This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

We use PNG images with transparency, and use the Contentful CDN instead of downloading the images locally. However, when using the BLURRED option, the base64 placeholder is converted to jpg and given a white background.

Placeholder:

Final image:

Unfortunately we've just switched back to BLURRED after trialling TRACED_SVG since Gatsby 3.8, so don't know which version this occured in yet, but in 3.8 BLURRED was fine.

I cannot reproduce this using gatsby-plugin-image with gatsby-source-filesystem, so I believe this to be a gatsby-source-contentful specific issue.

Using the reproduction, here is the GraphQL output for Contentful asset showing local vs CDN:

{
  "data": {
    "allContentfulAsset": {
      "nodes": [
        {
          "gatsbyImageData": {
            "images": {
              "sources": [
                {
                  "srcSet": "//images.ctfassets.net/f8kobr3h24us/7w4dXoqYk9awbjUx6ns7Q8/3abec7290a36786d1d984668fe3b3412/fullscreen_carousel_1_desktop.png?w=360&h=380&q=50&fm=webp 360w,\n//images.ctfassets.net/f8kobr3h24us/7w4dXoqYk9awbjUx6ns7Q8/3abec7290a36786d1d984668fe3b3412/fullscreen_carousel_1_desktop.png?w=720&h=760&q=50&fm=webp 720w,\n//images.ctfassets.net/f8kobr3h24us/7w4dXoqYk9awbjUx6ns7Q8/3abec7290a36786d1d984668fe3b3412/fullscreen_carousel_1_desktop.png?w=1440&h=1520&q=50&fm=webp 1440w",
                  "sizes": "(min-width: 1440px) 1440px, 100vw",
                  "type": "image/webp"
                }
              ],
              "fallback": {
                "src": "//images.ctfassets.net/f8kobr3h24us/7w4dXoqYk9awbjUx6ns7Q8/3abec7290a36786d1d984668fe3b3412/fullscreen_carousel_1_desktop.png?w=1440&h=1520&q=50&fm=png",
                "srcSet": "//images.ctfassets.net/f8kobr3h24us/7w4dXoqYk9awbjUx6ns7Q8/3abec7290a36786d1d984668fe3b3412/fullscreen_carousel_1_desktop.png?w=360&h=380&q=50&fm=png 360w,\n//images.ctfassets.net/f8kobr3h24us/7w4dXoqYk9awbjUx6ns7Q8/3abec7290a36786d1d984668fe3b3412/fullscreen_carousel_1_desktop.png?w=720&h=760&q=50&fm=png 720w,\n//images.ctfassets.net/f8kobr3h24us/7w4dXoqYk9awbjUx6ns7Q8/3abec7290a36786d1d984668fe3b3412/fullscreen_carousel_1_desktop.png?w=1440&h=1520&q=50&fm=png 1440w",
                "sizes": "(min-width: 1440px) 1440px, 100vw"
              }
            },
            "layout": "constrained",
            "width": 1440,
            "height": 1520,
            "placeholder": {
              "fallback": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAlgCWAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCAAVABQDAREAAhEBAxEB/8QAGgAAAQUBAAAAAAAAAAAAAAAABgEEBQcJCP/EACgQAAIBAwIFAwUAAAAAAAAAAAECAwQFEQAGBxIhMUEIUWEJEyI0wf/EABgBAQEBAQEAAAAAAAAAAAAAAAAFBAMC/8QAHxEAAgIBBAMAAAAAAAAAAAAAAAECAxEEBRIxE1Gx/9oADAMBAAIRAxEAPwDVInAyeg0AKTcRKAVDRwNBOqty/sqrn2wvXv4yRqZbr66Xh/TRGmTWQkoK6K5UcVTA3NFIMjPQj3B+QemqEJqcVKPTODTTwzjT6nHEHf8AtPhZBSbLWvpKJwZ7lcaAvHIqh1CoHXxgsWAIbAHjOkml2EslWejPenEbjJUWK4mwTCzurGpuNWrL95omADCR88y55l/E91yfbUK3ba7J88ZaZsjqGo4Zopt21NZLNTUbyCWRAS7jsWZizY+Mk6tU1+KtQ9GSUuTbFv23rZum1T2270MFyoJ1KS09SgdHBGCCDrseRttPZdi2LaorZt+1UtooYxhYaWMIAP730BNaA//Z"
            }
          },
          "localFile": {
            "childImageSharp": {
              "gatsbyImageData": {
                "layout": "constrained",
                "placeholder": {
                  "fallback": "data:image/png;base64,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"
                },
                "images": {
                  "fallback": {
                    "src": "/static/50b6e55ea87a23b14fe5fc7a521dc54f/48647/fullscreen_carousel_1_desktop.png",
                    "srcSet": "/static/50b6e55ea87a23b14fe5fc7a521dc54f/edd21/fullscreen_carousel_1_desktop.png 360w,\n/static/50b6e55ea87a23b14fe5fc7a521dc54f/9e59d/fullscreen_carousel_1_desktop.png 720w,\n/static/50b6e55ea87a23b14fe5fc7a521dc54f/48647/fullscreen_carousel_1_desktop.png 1440w",
                    "sizes": "(min-width: 1440px) 1440px, 100vw"
                  },
                  "sources": [
                    {
                      "srcSet": "/static/50b6e55ea87a23b14fe5fc7a521dc54f/51d2d/fullscreen_carousel_1_desktop.webp 360w,\n/static/50b6e55ea87a23b14fe5fc7a521dc54f/ed202/fullscreen_carousel_1_desktop.webp 720w,\n/static/50b6e55ea87a23b14fe5fc7a521dc54f/8cf32/fullscreen_carousel_1_desktop.webp 1440w",
                      "type": "image/webp",
                      "sizes": "(min-width: 1440px) 1440px, 100vw"
                    }
                  ]
                },
                "width": 1440,
                "height": 1520
              }
            }
          }
        }
      ]
    }
  },
  "extensions": {}
}

Reproduction Link

https://github.com/yourheights/gatsby-issue-reproduction/tree/gatsby-plugin-contentful-cdn-placeholder-base64

Steps to Reproduce

1. Use a transparent PNG with StaticImage
2. Upload a transparent PNG to Contentful
3. View GraphiQL output for a local filestorage transparent image using placeholder: BLURRED
4. View GraphiQL output for a transparent image from Contentful using placeholder: BLURRED
   ...

Expected Result

Placeholder respects transparent PNGs.

Actual Result

Placeholder is converted to JPEG format and therefore, ignores transparency.

Environment

System:
    OS: Linux 4.19 Debian GNU/Linux 10 (buster) 10 (buster)
    CPU: (12) x64 AMD Ryzen 5 3600 6-Core Processor
    Shell: 5.0.3 - /bin/bash
  Binaries:
    Node: 14.17.4 - /tmp/yarn--1628103908318-0.9662787527458956/node
    Yarn: 1.22.5 - /tmp/yarn--1628103908318-0.9662787527458956/yarn
    npm: 6.14.14 - /usr/local/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    gatsby: ^3.10.2 => 3.10.2
    gatsby-plugin-gatsby-cloud: ^2.10.1 => 2.10.1
    gatsby-plugin-image: ^1.10.1 => 1.10.1
    gatsby-plugin-manifest: ^3.10.0 => 3.10.0
    gatsby-plugin-offline: ^4.10.0 => 4.10.0
    gatsby-plugin-react-helmet: ^4.10.0 => 4.10.0
    gatsby-plugin-sharp: ^3.10.2 => 3.10.2
    gatsby-source-contentful: ^5.11.0 => 5.11.0
    gatsby-source-filesystem: ^3.10.0 => 3.10.0
    gatsby-transformer-sharp: ^3.10.0 => 3.10.0

Config Flags

No response

[njbmartin]

Ah, ok... #32155

@axe312ger so yes it does overlook transparent images...

[axe312ger]

I wonder how we would detect transparent images.

Easiest solution probably would be to keep the format of the original image, that way we still get initial payload size improvements from jpeg images while, gif, png, and webp stay transparent and maybe animated.

[njbmartin]

It should probably respect the format of the main image fallback being requested? In the example above, the fallback is requesting the following query: fullscreen_carousel_1_desktop.png?w=1440&h=1520&q=50&fm=png, so the placeholder should use fm=png as well, and if that param is not there, then fallback to the original format of the image, as you say.

[axe312ger]

It should probably respect the format of the main image fallback being requested? In the example above, the fallback is requesting the following query: fullscreen_carousel_1_desktop.png?w=1440&h=1520&q=50&fm=png, so the placeholder should use fm=png as well, and if that param is not there, then fallback to the original format of the image, as you say.

Sounds good, lets do that. I could spin up a PR today :)