图像处理

核心图片处理组件

Gatsby 的图片处理系统包含三个主要组件：

gatsby-plugin-sharp：一个底层的图片处理库，封装了 Sharp.js。
gatsby-transformer-sharp：为图片创建 GraphQL 字段。
gatsby-plugin-image：提供响应式图片的 React 组件。

这些插件与各种数据源插件协同工作，创建一个端到端的图片处理流程。

来源：packages/gatsby-plugin-sharp/package.json, packages/gatsby-transformer-sharp/package.json, packages/gatsby-plugin-image/package.json

图片处理架构

来源：packages/gatsby-source-contentful/package.json, packages/gatsby-source-wordpress/package.json, packages/gatsby-source-shopify/package.json, packages/gatsby-plugin-sharp/package.json, packages/gatsby-transformer-sharp/package.json

gatsby-plugin-sharp

gatsby-plugin-sharp 是 Sharp 图片处理库的封装。它提供了图片操作和优化的方法。

主要功能

图片大小调整和裁剪
格式转换（JPEG、PNG、WebP、AVIF）
质量优化
响应式图片生成
图片效果和转换

与 Gatsby 构建流程集成

该插件与 Gatsby 的构建流程集成，以：

在构建阶段处理图片
缓存处理过的图片以提高构建速度
支持按需图片处理

来源：packages/gatsby-plugin-sharp/package.json

gatsby-transformer-sharp

gatsby-transformer-sharp 插件将数据源插件（如 gatsby-source-filesystem）创建的图片节点转换为 ImageSharp 节点，这些节点可以通过 GraphQL 查询。

主要职责

在 GraphQL schema 中创建 ImageSharp 节点。
定义用于图片转换的 GraphQL 字段。
促进通过 GraphQL 查询优化后的图片。

GraphQL Schema 集成

该转换器向 GraphQL schema 添加了以下字段：

字段	描述
`childImageSharp`	文件节点上包含图片转换的字段。
`gatsbyImageData`	为 gatsby-plugin-image 提供优化图片数据的字段。
`fluid` (旧版)	用于流式/响应式图片的字段。
`fixed` (旧版)	用于固定尺寸图片的字段。

来源：packages/gatsby-transformer-sharp/package.json

gatsby-plugin-image

gatsby-plugin-image 插件提供了 React 组件，用于显示具有最佳加载模式的响应式图片。

组件

StaticImage：适用于构建时已知的图片。
GatsbyImage：适用于可能更改或来自 CMS 的图片。

图片加载策略

来源：packages/gatsby-plugin-image/package.json

图像处理管道

Gatsby 中完整的图片处理流程涉及从数据源到渲染的多个步骤。

来源：packages/gatsby-plugin-sharp/package.json, packages/gatsby-transformer-sharp/package.json, packages/gatsby-plugin-image/package.json

与数据源插件集成

Gatsby 的图片处理系统与各种数据源插件集成，以处理来自不同来源的图片。

支持图片的数据源插件

数据源插件	描述	集成
gatsby-source-filesystem	从本地文件系统获取文件。	创建 transformer-sharp 可以处理的文件节点。
gatsby-source-contentful	从 Contentful CMS 获取内容。	对 gatsby-plugin-image 具有内置支持。
gatsby-source-wordpress	从 WordPress 获取内容。	使用 gatsby-plugin-image 处理 WordPress 媒体库。
gatsby-source-shopify	从 Shopify 获取内容。	处理 Shopify 产品图片。
gatsby-source-drupal	从 Drupal 获取内容。	处理 Drupal 媒体实体。

来源：packages/gatsby-source-contentful/package.json, packages/gatsby-source-wordpress/package.json, packages/gatsby-source-shopify/package.json, packages/gatsby-source-drupal/package.json

高级图片处理功能

SQIP (Gatsby Transformer SQIP)

gatsby-transformer-sqip 插件为图片创建低质量的 SVG 版本，可用作实际图片加载时的占位符。

来源：packages/gatsby-transformer-sqip/package.json

图片 CDN 支持

一些数据源插件（如 contentful、wordpress、drupal）支持图片 CDN URL 生成，允许通过内容分发网络优化图片交付。

来源：packages/gatsby-source-contentful/CHANGELOG.md, packages/gatsby-source-wordpress/CHANGELOG.md, packages/gatsby-source-drupal/CHANGELOG.md

性能考量

构建时 vs. 运行时性能

Gatsby 的图片处理系统同时优化构建时效率和运行时性能。

构建时优化:
- 图片处理在构建时进行。
- 处理结果会被缓存，以加快后续构建速度。
- 支持对多张图片进行并行处理。
运行时优化:
- 图片的懒加载。
- 响应式图片尺寸。
- 使用占位符进行渐进式加载。
- 优化图片格式（WebP、AVIF）。

内存使用考虑因素

图片处理可能非常消耗内存。考虑因素包括：

处理大量图片可能需要大量内存。
图片尺寸和质量设置会影响内存使用。
使用适当的缓存策略有助于减少重复处理。

来源：packages/gatsby-plugin-sharp/CHANGELOG.md, packages/gatsby-source-contentful/CHANGELOG.md

用法示例流程

此图显示了使用 gatsby-plugin-image 和 gatsby-transformer-sharp 时的典型流程。

来源：packages/gatsby-plugin-image/package.json, packages/gatsby-transformer-sharp/package.json, packages/gatsby-plugin-sharp/package.json

结论

Gatsby 的图片处理系统提供了一个全面的解决方案，用于优化和交付 Gatsby 网站中的响应式图片。通过结合多个专用插件，它实现了高效的图片处理、优化和渲染。该系统深度集成了 Gatsby 的数据层和构建流程，确保了开发人员和最终用户的最佳性能。