Gatsby Image Optimizations - Is there a way to reduce size of generated GraphQL json files in page-data folder?

Question

I'm working on a Gatsby site, which I want to optimize before uploading it to Netlify. Other than the react_devtools_backend.js which is 448kb! (hopefully I can get rid of by switching to Preact...) I am using multiple images in the app (currently storing them locally but will look into using Netlify Large Media) and rather than creating multiple GraphQL queries (or multiple searches in one query) I have created my own image component as follows:

import React from "react";
import { useStaticQuery, graphql } from "gatsby";
import Img from "gatsby-image";

const Image = props => {
  const data = useStaticQuery(graphql`
    {
      allFile(filter: { extension: { eq: "jpg" } }) {
        nodes {
          relativePath
          name
          childImageSharp {
            fluid(maxWidth: 1000, quality: 90, webpQuality: 90) {
              ...GatsbyImageSharpFluid_withWebp_tracedSVG
            }
          }
        }
      }
    }
  `);

  const image = data.allFile.nodes.find(img =>
    img.relativePath.includes(props.filename)
  );

  if (!image) {
    return null;
  }

  const imageFluid = image.childImageSharp.fluid;
  return (
    <Img
      className={props.className}
      alt={props.alt}
      fluid={imageFluid}
      imgStyle={props.style}
    />
  );
};

export default Image;

After running gatsby build and serve I can see a few json files generated in the public/page-data/sq/d folder with names like 63159454.json which look like they contain the graphQL queries the browser is making. One of these files is 43.3kb on its own. Does anyone know if I'm using Gatsby in a sub-optimal way and if so, is there a way I can reduce these json files?

Answer 1

You are running a GraphQL query that fetches data for every single image in your build. Yes, that is extremely suboptimal. The path you are trying to avoid—where you specify the image/images you want in the page query—is the Gatsby-recommended solution.

Another option is to use an external service that hosts and transforms images (e.g. a CMS, Imgix, Cloudinary, etc). This would let you fetch just the information you need to construct a src and srcset attributes, which will likely be less data, and in any case would be something you do per image—not in a single ill-conceived component that fetches data for every single image in one place.

For example, using Sanity, my GraphQL query for a page looks something like this:

{
  sanityPage (slug: { current: { eq: "/home/" } }) {
    title
    heroImage {
      asset {
        _id
      }
    }
  }
}

This provides the data I need to render a fully responsive image in multiple sizes like this:

import Image from "gatsby-plugin-sanity-image"

export default ({ title, heroImage }) => 
  <div>
    <h1>{title}</h1>
    <Image {...heroImage} width={1440} height={400} alt="" />
  </div>

Because the image is defined alongside the content, there’s no need to create that association explicitly in the GraphQL query.