0

I am new Gatsby + NetlifyCMS.

The image's size of website after deploying is bigger than the original which is on GitHub.

For example: On https://gatsby-netlify-cms.netlify.com/ file home-jumbotron.jpg is 437KB But on github https://github.com/netlify-templates/gatsby-starter-netlify-cms/blob/master/static/img/home-jumbotron.jpg file size is 138KB

I don't know how to make image size as normal.

qnguyen
  • 444
  • 9
  • 21

1 Answers1

0

You can modify the quality or width to get the desired quality, check the documentation here: https://www.gatsbyjs.org/packages/gatsby-image/ Here is a snippet code from https://github.com/netlify-templates/gatsby-starter-netlify-cms/blob/master/src/templates/index-page.js

image {
         childImageSharp {
                fluid(maxWidth: 2048, quality: 100) {
                  ...GatsbyImageSharpFluid
                }
              }
            }
Winchester
  • 460
  • 6
  • 19
  • I checked both files, they are the same dimensions, same resolution and same bit depth but the size is different. https://gatsby-netlify-cms.netlify.com/static/534958a2cee3bb524a0bae118f2a4219/c7a2a/home-jumbotron.jpg and https://github.com/netlify-templates/gatsby-starter-netlify-cms/blob/master/static/img/home-jumbotron.jpg – qnguyen May 24 '19 at 02:29
  • yes, it is because gatsby-image process the image with higher quality even the original image size is smaller. So if you wanna change the image property, change the config in childImageSharp. – Winchester May 24 '19 at 10:12
  • I don't see any difference between 2 files. – qnguyen May 26 '19 at 12:01
  • fluid(maxWidth: 1024, quality: 50) { ...GatsbyImageSharpFluid } If you configure the image like this, so when you build, the image size probably would reduce – Winchester May 26 '19 at 13:20