确保用户在网络上获得最佳图像体验可能是一项乏味的任务。然而，有了盖茨比，我们可以利用夏普)的强大功能，通过少量的设置和丰富的工具集来获得最佳性能。

在本文中，我们将介绍gatsby-image组件以及它如何简化在各种场景中使用图像的过程。本指南中的步骤假定您有一个正在运行的Gatsby项目。因此，如果您还没有，您可以通过阅读Gatsby First Steps]文章来开始了解Gatsby。

入门

让我们从安装必要的插件开始。根据您使用的Gatsby启动器，这些可能已经安装。检查package.json看看是否是这样。

Install

我们在这里安装一些东西。每一个在我们的图像设置中扮演不同的角色。我们稍后会更详细地介绍。

1$ npm install --save gatsby-image gatsby-transformer-sharp gatsby-plugin-sharp

配置

现在我们将把它们添加到我们的gatsby-config.js中。

 1[label gatsby-config.js]
 2const path = require('path');
 3
 4module.exports = {
 5  plugins: [
 6    ...
 7    'gatsby-plugin-sharp',
 8    'gatsby-transformer-sharp',
 9    {
10      resolve: 'gatsby-source-filesystem',
11      options: {
12        name: 'images',
13        path: path.join(__dirname, `src`, `images`),
14      },
15    },
16  ],
17}

请注意，我们还配置了gatsby-source-filesystem。这是为了从我们的图像中创建文件nodes，以便它们可以通过graphql查询获得。在本指南中，我们将图像放在src/images目录中。

至于我们的其他插件：

gatsby-plugin-sharp是一个底层的帮助器，它为 ** Sharp 和** gatsby-image** 之间的连接提供支持。它还提供了一些图像处理功能。
gatsby-transformer-sharp有助于创建正确大小和分辨率的多个图像。

使用图片

现在我们已经设置好了，我们可以开始在我们的站点中处理图像了。让我们创建一个hero.js组件来使用我们的图像。

 1[label src/components/hero.js]
 2import React from 'react';
 3
 4export default ({ data }) => (
 5  <section>
 6    <div>
 7      <h1>Hi, I like websites.</h1>
 8      <p>Sometimes I make them.</p>
 9    </div>
10  </section>
11)

查询图片

Gatsby-Transformer-Sharp 插件创建ImageSharp类型的节点供我们查询。它们可以是‘固定的’或‘流体的’。

FIXED 在查询中使用Width和High参数，并提供固定大小的图片。
Fluid 在查询中以MaxWidth和MaxHeight作为参数，并提供响应的图像大小。

这两个文件都有许多不同的文件大小，它们利用元素根据媒体断点加载合适的文件大小。

 1[label src/components/hero.js]
 2export const query = graphql`
 3  query {
 4    file(relativePath: { eq: "images/heroImage.jpg" }) {
 5      childImageSharp {
 6        fluid(maxWidth: 1600, maxHeight: 800) {
 7          ...GatsbyImageSharpFluid_withWebp
 8        }
 9      }
10    }
11  }
12`

我们的查询包含...GatsbyImageSharpFluid_with Webpfragment，，它实质上导入了几个预定的属性。您可以在Gatsby-Image Readme.]中阅读有关可用片段的更多信息

您可以在GraphiQL中运行此查询以浏览您可以使用的几个有用的属性。

使用Gatsby Image组件

现在我们有了查询，让我们在前面创建的Herm.js组件中使用它。我们需要从gatsby导入graph ql，从gatsby-Image导入img。

 1[label src/components/hero.js]
 2import React from 'react';
 3import { graphql } from 'gatsby';
 4import Img from 'gatsby-image';
 5
 6export default ({ data }) => (
 7  <section>
 8    <Img
 9      fluid={data.file.childImageSharp.fluid}
10      alt="This is a picture of my face."
11    />
12    <div>
13      <h1>Hi, I like websites.</h1>
14      <p>Sometimes I make them.</p>
15    </div>
16  </section>
17)
18
19export const query = graphql`
20  query {
21    file(relativePath: { eq: "images/heroImage.jpg" }) {
22      childImageSharp {
23        fluid(maxWidth: 1600, maxHeight: 800) {
24          ...GatsbyImageSharpFluid_withWebp
25        }
26      }
27    }
28  }
29`

除了获取alt道具外，Img组件还将接受style和imgStyle作为对象，分别为父容器和img元素添加自定义样式。有关完整列表，请查看Component documentation.

盖茨比将渲染一组响应性和懒惰加载的图像。这些文件将被压缩，去除任何不必要的元数据，并包括加载时的模糊效果。还不错!

PolyFill

还有一个可用于object-fit/object-positioncss属性的填充。您可以从gatsby-Image/with IEPolyfiel导入。该组件将告诉Gatsby自动将Object-Fit-Images多边形填充应用到您的图像。

 1[label src/components/hero.js]
 2import React from 'react';
 3import { graphql } from 'gatsby';
 4import Img from 'gatsby-image/withIEPolyfill';
 5
 6export default ({ data }) => (
 7  <section>
 8    <Img
 9      fluid={data.file.childImageSharp.fluid}
10      objectFit="cover"
11      objectPosition="50% 50%"
12      alt="This is a picture of my face."
13    />
14    ...
15  </section>
16)
17
18...

图片压缩

默认情况下，gatsby-plugin-Sharp会使用各种压缩库。但是，如果我们想要修改默认行为，可以设置一些选项。

 1[label gatsby-config.js]
 2module.exports = {
 3  plugins: [
 4    ...
 5    {
 6      resolve: 'gatsby-plugin-sharp',
 7      options: {
 8        useMozJpeg: false,
 9        stripMetadata: true,
10        defaultQuality: 75,
11      },
12    },
13  ],
14}

我们可以选择使用MozJPEG)以获得更好的JPEG压缩效果。但是，请记住，这可能会显著增加构建时间。

查看插件的documentation，了解所有可用来修改和优化图像的方法。

结论

这只是触及了您可以在Gatsby中对图像所做的事情的皮毛。无论您是想尽可能地提高性能，还是想为您的用户创造高质量的体验，盖茨比丰富的工具集都能满足您的需求。我鼓励您阅读所有链接的资源，并尝试插件，以找到最适合您的需求。

使用 gatsby-image 和 gatsby-plugin-sharp 创建盖茨比中的图像

入门