[gatsby-plugin-sharp] custom base64 width and height of 1px to get 'average color' placeholder

[ptrckvzn]

Summary

Hello, I am using gatsby-image to display images from a WordPress source. I am trying to manipulate the base64 placeholder to display an 'average' color of the source image.

Relevant information

My first idea was to request a base64 with a width and height of 1px, so that the image library reduces it to 1px of the average color. I think, at this time, there is no way to specify the size of the base64 generated when calling a fluid or fixed image fragment. It looks like it is set to a hardcoded 20px.

I found a workaround by requesting a image of 1px separate from my fluid/fixed image query.

My graphql query looks like this :

...
edges {
  node {
    image {
      localFile {
        childImageSharp {
          placeholder: fixed(width: 1, height: 1) {
            ...GatsbyImageSharpFixed_noBase64
          }
          fluid: fluid(maxWidth: 800, quality: 100) {
            ...GatsbyImageSharpFluid_noBase64
          }
        }
      }
    }
  }
}

And when I call gatsby-image <Img/> element, I add the src image of my 'placeholder' as the 'base64' key of my fluid image, like this :

  // Short for the fluid image
  const fluid = node.image.localFile.childImageSharp.fluid

  // If placeholder object exist, add its src to fluid's base64 key
  if (node.image.localFile.childImageSharp.placeholder) {
    fluid.base64 = node.image.localFile.childImageSharp.placeholder.src
    // will look like : fluid.base64 = '/static/hash__.jpg'
  }

  // gatsby-image use the 1px src as the placeholder
  return (
    <Img fluid={fluid}/>
  )

It works fine, but I would much prefer to have the option to specify parameters for the base64 to my fluid or fixed image fragemnt.

I am writing here in case I might be wrong and the option is already there. If not, and if the idea of having 'average color' placeholder sounds interesting or simply have the option of custom width or height, I would love to try and submit a PR.

Thanks!

[gatsbot]

Old issues will be closed after 30 days of inactivity. This issue has been quiet for 20 days and is being marked as stale. Reply here or add the label "not stale" to keep this issue open!

[gatsbot]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

Thanks again for being part of the Gatsby community!

[wardpeet]

fixed in #10944