CODEWITHSUNDEEP
reactjsgatsbygatsby-image
SiiilverSurfer
SiiilverSurfer

Reputation: 959

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} />
    }}
  />
)

Upvotes: 3

Views: 1534

Answers (1)

Albert Skibinski
Albert Skibinski

Reputation: 499

Your hero component is loading the logo in a large png format without leveraging your image component and creating various image sizes for different displays.

See: https://github.com/EliranGooner/zeitouni/blob/master/src/components/hero.js#L5

Upvotes: 1

Related Questions