使用 gatsby-image 加载图像缓慢答案

【问题标题】：Image loading slow using gatsby-image使用 gatsby-image 加载图像缓慢
【发布时间】：2020-07-13 17:49:26
【问题描述】：

我有这个网站：https://zeitouni.herokuapp.com，里面有很多高质量的图片。当用户第一次加载网站时，gatsby-image 需要很长时间才能加载大部分图像。该项目的 repo 在这里：https://github.com/EliranGooner/zeitouni

我怀疑的第一件事是图像尺寸。我不确定我应该争取哪些尺寸，以加快图像加载速度。问题也可能是我用来获取图像的组件。这是我在 Spectrum 上找到的一种方法，建议使用它来解决无法使用 Graphql 对查询进行插值的问题。该组件如下所示：

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

【问题讨论】：

对我来说很好
“当用户第一次加载网站时”，你是指在服务器初始化期间，还是每次用户点击刷新按钮时？

标签： reactjs gatsby gatsby-image

【解决方案1】：

您的hero 组件正在以大 png 格式加载徽标，而没有利用您的图像组件并为不同的显示器创建各种图像尺寸。

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

【讨论】：