SanityImageAsset options aren't passed to Gatsby-Plugin-Image

[pawelngei]

We are using Gatsby 3.0 (with gatsby-plugin-image > 1.5.0 and gatsby-source-sanity > 7.0.4) on Sanity 2.12.2. Due to our architecture, we need to stick with gatsby-plugin-image and cannot use gatsby-plugin-sanity-image.

While the images are displayed correctly, we cannot control them using gatsbyImageData props listed in gatsby-plugin-image's documentation: they're ignored by Sanity. Only a fallbacks object is returned with an src and srcSet, which has all the pixel densities and resolutions already hardcoded. The options like quality, breakpoints or outputPixelDensities don't work whether they're passed through a GraphQL query or a defaults object.

To quote the docs:

Important: For dynamic images, these options are for the gatsbyImageData resolver on sharp nodes. If you are using gatsbyImageData from a different plugin, such as a CMS or image host, you should refer to that plugin’s documentation for the options, as they will differ from these. Static images use sharp under the hood, so these options apply when using the StaticImage component too.
It is a very good idea to use the GraphiQL IDE when writing your gatsbyImageData queries. It includes auto-complete and inline documentation for all of the options and lets you see the generated image data right inside the browser.

Using the GraphiQL gatsbyImageData on a SanityImageAsset allows to make a basic query, but again, the props listed above do not change what is being returned from Sanity. Some of them, like quality, are not even listed as possible.

I double-checked, the graphql for a given dataset was deployed correctly. It's also not a matter of the plugin versions, as upgrades to the latest don't help.

To Reproduce

Steps to reproduce the behavior:

1. Start a Gatsby project with a gatsby-plugin-image and gatsby-source-sanity.
2. Connect it with an existing Sanity dataset with some Image
3. Run gatsby develop
4. Go to http://localhost:8000/___graphiql
5. Build a query which involves your Image and use gatsbyImageAsset there
6. Try exploring the available documentation and using provided props, like breakpoints or quality

Expected behavior

gatsbyImageData has access to all the https://www.sanity.io/docs/image-urls props on Sanity Image.

Using them changes the output of the query.

Query Example

query {
  allSanityProduct (skip: 10, limit: 1) {
    nodes {
      variants {
        assets  {
           ... on SanityImage {
            __typename
            asset {
              gatsbyImageData(
                breakpoints: [361, 721, 1025],
                outputPixelDensities: [1, 2, 3],
                formats: [PNG],
              )
            }
          }
        }
      }
    }
  }
}

Results in:

"gatsbyImageData": {
  "images": {
    "sources": [],
    "fallback": {
      "src": "https://cdn.sanity.io/our/image.jpg?w=1680&h=1620&auto=format",
      "srcSet": "https://cdn.sanity.io/our/image.jpg?rect=1,0,1678,1620&w=320&h=309&auto=format 320w,\nhttps://cdn.sanity.io/our/image.jpg?rect=0,0,1679,1620&w=654&h=631&auto=format 654w,\nhttps://cdn.sanity.io/our/image.jpg?rect=0,0,1679,1620&w=768&h=741&auto=format 768w,\nhttps://cdn.sanity.io/our/image.jpg?rect=0,0,1680,1619&w=1024&h=987&auto=format 1024w,\nhttps://cdn.sanity.io/our/image.jpg?w=1366&h=1317&auto=format 1366w,\nhttps://cdn.sanity.io/our/image.jpg?w=1600&h=1543&auto=format 1600w,\nhttps://cdn.sanity.io/our/image.jpg?w=1680&h=1620&auto=format 1680w",
      "sizes": "(min-width: 1680px) 1680px, 100vw"
    }
  },
  "layout": "constrained",
  "backgroundColor": "#8e774f",
  "width": 1680,
  "height": 1620
}

Which versions of Sanity are you using?

@sanity/cli             2.12.2 (latest: 2.14.0)
@sanity/base            2.12.2 (latest: 2.14.0)
@sanity/cli             2.12.2 (latest: 2.14.0)
@sanity/components       2.2.6 (latest: 2.14.0)
@sanity/core            2.12.2 (latest: 2.14.0)
@sanity/dashboard       2.10.5 (latest: 2.14.0)
@sanity/default-layout  2.12.2 (latest: 2.14.0)
@sanity/default-login   2.11.1 (latest: 2.14.0)
@sanity/desk-tool       2.12.2 (latest: 2.14.0)
@sanity/form-builder    2.12.2 (latest: 2.14.0)
@sanity/vision          2.11.2 (latest: 2.14.0)

What operating system are you using?

Ubuntu 20.04.2 LTS

Which versions of Node.js / npm are you running?

6.14.4
v12.18.0

[EvGreen]

just noticed this as I wanted to upgrade quality of images on my sites, is there a workaround?
default compression quality of 75 is really no good for modern web

[Hahlh]

@RitaDias , @kmelve
Any chance of getting this fixed?
This issue has been open since almost 2 years and makes full screen images look horrible with gatsby-source-sanity.

Corey's gatsby-plugin-sanity-image is only a possible workaround if you don't need withArtDirection.

[Hahlh]

There is a lot of open issues that have this a their topic.

I assume this by design according to #134 (comment) .
Still, the srcSet quality set is simply too low and likely the lack of flexibility with the parameters as described in #89 is the actual issue.

A temporary brute-force workaround for people in a hurry:

You could modify the srcSet before passing it to Gatsby Image.

An example for withArtDirection:

const breakPointImagesArray = image.breakpointImages && [
    ...image.breakpointImages.map(artDirectionImage => {
      if (
        artDirectionImage.breakpoint === "undefined" ||
        artDirectionImage.image === "undefined"
      ) {
        throw new Error("Error: ArtDirectionImage incomplete!")
      }
      return {
        media: `(min-width: ${artDirectionImage.minWidth}px)`,
        image: getImage(artDirectionImage.image?.asset.gatsbyImageData)
      }
    })
  ]

  let artDirectionImages = withArtDirection(
    getImage(image.defaultImage.asset?.gatsbyImageData),
    breakPointImagesArray
  )
  // Map over the sources and update the srcSet values to improve quality by lowering the breakpoints where images are used 
  const improvedSources = artDirectionImages.images.sources.map(source => {
    const adaptedSrcSet = source.srcSet.replace(/(\d+w)/g, (match, p1) => {
      // Divide the width by 2 to improve the quality
      const newValue = parseInt(p1) / 2
      return `${newValue}w`
    })

    // Return the updated source object with the new srcSet value
    return {
      ...source,
      srcSet: adaptedSrcSet
    }
  })

  // Update the artDirectionImages object with the improved quality sources
  let artDirectionImagesImprovedQuality = {
    ...artDirectionImages,
    images: {
      ...artDirectionImages.images,
      sources: improvedSources
    }
  }
  

(just an example, another one would be of course to double the width and height parameter values)

[RitaDias]

Hi all,
Thanks for bringing this to our attention, we've added this to the list on going things and it will be prioritised accordingly.

Once more thanks!