Gatsby加载图片的艺术

前言

在编写网站页面时，总是会遇到有图片要显示，那么怎么加载这些图片呢？

Gatsby 中图片有三种形式：

• 本地图片，譬如：src/images 目录下的图片；
• 远程图片，譬如：从 CDN 上加载的图片；
• 数据图片，譬如：从数据库中加载的图片。

对于本地图片和远程图片，Gatsby 提供了开箱即用的支持，我们可以直接使用 <img> 标签来加载图片。对于数据图片，我们需要使用 Gatsby 的内置组件 <GatsbyImage> 来加载图片。

本地图片和远程图片加载

对于本地图片和远程图片，我们可以使用 <img> 标签来加载图片。

<img src="/images/my-image.jpg" alt="My Image" />

对于远程图片，我们需要指定图片的 URL。

<img src="https://example.com/images/my-image.jpg" alt="My Image" />

数据图片加载

对于数据图片，我们需要使用 Gatsby 的内置组件 <GatsbyImage> 来加载图片。

<GatsbyImage image={imageData} alt="My Image" />

imageData 是一个对象，它包含了图片的 URL、宽高、格式等信息。我们可以使用 Gatsby 的 graphql 查询来获取 imageData。

query {
  file(relativePath: { eq: "images/my-image.jpg" }) {
    childImageSharp {
      gatsbyImageData(
        width: 200
        height: 200
        layout: CONSTRAINED
      )
    }
  }
}

优化图片

为了提高网站性能，我们需要对图片进行优化。

• 压缩图片：我们可以使用一些工具来压缩图片，比如 TinyPNG、ImageOptim 等。
• 使用 WebP 格式：WebP 是一种新的图片格式，它可以提供更好的压缩率。
• 延迟加载图片：我们可以使用一些 JavaScript 库来实现延迟加载图片，比如 LazyLoad、Lozad 等。
• 使用 CDN：我们可以使用 CDN 来加速图片的加载速度。

结语

在本文中，我们学习了如何在 Gatsby 中加载图片，以及如何优化图片以提高网站性能。我们还学习了如何使用 Gatsby 的内置组件 <GatsbyImage> 来加载数据图片。