Image loading slow using gatsby-image

I have this website: https://zeitouni.herokuapp.com which has quite a few images in high quality. When the user first loads the website it takes forever for gatsby-image to load most of the images. repo of the project is here: https://github.com/EliranGooner/zeitouni

The first thing I suspect for being the issue is the image sizes. I'm not sure which sizes I should strive for, to make the image loading faster. The issue also might be the component I use to get the Images. It's a method I found on Spectrum that was suggested in order to get around the inability to interpolate on queries with Graphql. The component looks like this:

const Image = ({ imgName, ...props }) => (
  <StaticQuery
    query={graphql`
      query {
        allImageSharp {
          edges {
            node {
              fluid(maxWidth: 1200, quality: 100) {
                ...GatsbyImageSharpFluid
                originalName
                presentationWidth
              }
            }
          }
        }
      }
    `}
    render={data => {
      const image = data.allImageSharp.edges.find(
        edge => edge.node.fluid.originalName === imgName
      )
      if (!image) {
        return null
      }
      return <Img fluid={image.node.fluid} {...props} />
    }}
  />
)