reactjs - 如何在 Gatby 图像上设置 srcSetBreakpoints

Question

我目前正在努力提高页面速度。来自 Google 的反馈之一是适当大小的图像。我使用 ContentFul 作为图像提供者。我正在寻找一种管理 srcSetBreakpoints 的方法。我添加了 maxWidth 和 Quality，但 Goggle 仍在向我显示正确尺寸的图像。所以我正在考虑管理断点。有什么方法可以添加到 contentFul 查询中？

  fluid(maxWidth: 1000, quality: 100){
    ...GatsbyContentfulFluid_withWebp_noBase64
  }

Answer 1

我注意到，当maxWidth在查询中使用参数时，Contentful 不会返回srcset. 尝试删除它并运行查询：

fluid(quality: 100){
  ...GatsbyContentfulFluid_withWebp_noBase64
}

然后，您应该通过参数定义用于哪种媒体条件的图像大小sizes，例如：

fluid(sizes: "(max-width: 800px) 200px, (max-width: 1200px) 400px, 1200px") 
  ...GatsbyContentfulFluid_withWebp_noBase64
}

有关更多信息，请参阅img 文档和响应式图像教程