ImageSharp does not use responsive image files

[ver1nty]

Not sure if it's a bug or I missed some configurations.

When querying for a sharp image, it does not automatically include the different mobile sizes in the returned srcSet.

If we set different image files for desktop and mobile resolution in Prismic, the returned srcSet from the query will always use the desktop sized image. In sizes we can see all the image files chosen in Prismic but apparently the Gatsby Image module is not relying on that when rendering the image. Therefor the image doesn't render the mobile sized image for lower resolutions.

prismic {
    page {
      edges {
        node {
            image
            imageSharp {
              childImageSharp {
                fluid(maxWidth: 10) {
                  srcSet
                  sizes
              }
            }
          }
        }
      }
    }
  }

[jodiedoubleday]

I had this issue and solved it by using Crop and mutating the graphql query.

See... https://github.com/birkir/gatsby-source-prismic-graphql/issues/138

example...

            mobileImageSharp: imageSharp(crop: "Mobile") {
              childImageSharp {
                fluid {
                  ...GatsbyImageSharpFluid_withWebp
                }
              }
            }
            desktopImageSharp: imageSharp {
              childImageSharp {
                fluid {
                  ...GatsbyImageSharpFluid_withWebp
                }
              }
            }```