Gatsby中的图片优化

Gatsby是现在比较流行的一个静态网站生成框架。通过它，可以快速的生成React网站，同时又解决了React应用SEO不友好的问题。这里主要说一说Gatsby中的图片优化问题。

Source: Gatsby官网

在默认情况下，可以把图片放于static目录中，然后在页面中直接引用就可以了.

但这种方式的缺点也是非常明显的：

• 针对不同的设备，通常可以显示更为适合的图片。比如对于高清的大屏幕，可以显示分辨率最高的图片，但对于尺寸较小的手机，只需要显示分辨率较小的图片就可以了。这样就可以大大提高页面加载速度。
• 懒加载。很多网站都实现了这个功能。在开始装载页面的时候，用户看到的是一个分辨率极低，但加载速度很快的模糊图片，随着页面加载的完成，该图片就会被一个高清图片替代。

通过实现以上的两点，可以大大提高用户体验。

在Gatsby中，可以通过几个插件来实现这样的功能。因此首先需要在Gatsby项目中安装插件：

npm install gatsby-image gatsby-transformer-sharp gatsby-plugin-sharp

其中，gatsby-image的作用是支持在gatsby中使用图片

gatsby-transformer-sharp和gatsby-plugin-sharp的作用是处理image并在graphql层中提供相应的额外图片数据。这样就可以在应用中使用由gatsby优化过的图片，而不是固定的静态图片。

接下来创建src/images目录，并将图片，比如banner.jpg复制到该目录中。

更新gatsby-config.js配置文件。首先添加对以上插件的声明，同时添加对src/images目录的监视：

plugins: [
  'gatsby-transformer-sharp',
  'gatsby-plugin-sharp',
          ……
     {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`
      }
   }

重新启动gatsby：

gatsby develop

然后进行如下的graphql查询：

query MyQuery {
  file(relativePath: {eq: "banner.png"}) {
    childImageSharp {
      fluid {
        src
        srcSet
        sizes
      }
    }
  }
}

上面fluid中的查询也可以简写作：

fluid {
    ...GatsbyImageSharpFluid
}

其返回值为：

{
  "data": {
    "file": {
      "childImageSharp": {
        "fluid": {
          "src": "/static/fa84b2b0a8b220dca8e981bfb0efac59/de334/banner.png",
          "srcSet": "/static/fa84b2b0a8b220dca8e981bfb0efac59/69585/banner.png 200w,\n/static/fa84b2b0a8b220dca8e981bfb0efac59/497c6/banner.png 400w,\n/static/fa84b2b0a8b220dca8e981bfb0efac59/de334/banner.png 798w",
          "sizes": "(max-width: 798px) 100vw, 798px"
        }
      }
    }
  },
  "extensions": {}
}

可以看到，gatsby的插件已经对banner.png进行了处理，并在static目录中生成了三个不同尺寸的图片：200px, 400px, 798px。

接下来就可以在应用中通过这组图片(srcSet)进行自适应了。比如在首页中使用这个banner，首先导入相应的模块：

import { graphql } from "gatsby"
import Img from 'gatsby-image'

然后在文件底部声明graphql查询：

export const query = graphql`
  query Banner {
    file(relativePath: {eq: "banner.png"}) {
      childImageSharp {
        fluid {
          ...GatsbyImageSharpFluid
        }
      }
    }
  }
`

然后就可以在页面组件中使用这个图片了：

export default function Home({data}) {
    // ...

    // ...
}

可以看到在浏览器中，gatsby已经为我们生成了一个picture标签，在加载图片时也会先显示较为模糊的图片，然后再加载清晰图片：

参考：gatsby image插件官网