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 documentation 和 responsive image tutorial

如何在内容丰富的Gatby图像上设置srcSetBreakpoints

1 个答案: