gatsby - Netlify Cms 上的大尺寸图像

Question

我是新的 Gatsby + NetlifyCMS。

部署后的网站图片大小比 GitHub 上的原始图片大。

例如：在https://gatsby-netlify-cms.netlify.com/文件 home-jumbotron.jpg 是 437KB 但在 github https://github.com/netlify-templates/gatsby-starter-netlify-cms/blob /master/static/img/home-jumbotron.jpg文件大小为 138KB

我不知道如何使图像大小正常。

Answer 1

您可以修改质量或宽度以获得所需的质量，请在此处查看文档：https ://www.gatsbyjs.org/packages/gatsby-image/ 这是来自https://github.com/netlify- 的代码片段模板/gatsby-starter-netlify-cms/blob/master/src/templates/index-page.js

image {
         childImageSharp {
                fluid(maxWidth: 2048, quality: 100) {
                  ...GatsbyImageSharpFluid
                }
              }
            }