为我的Astro博客支持响应式图像和AVIF格式

背景#

大家应该都知道 Firefly 是基于 Fuwari 二开的。据了解 Fuwari 作者基本没有多少时间维护了，也很长时间没有更新——Astro 5 已经出来很久，Fuwari 的很多基础代码还停留在 Astro 4，如今 Astro 6 都出测试版了。

Firefly 虽然已经把很多 API 和特性更新到了 Astro 5，但图片组件一直没怎么动，只在更新内容集合 API 时做了小改。之前网站图片一多，性能就会受到很大影响——由于组件没有对博客图片做响应式处理，加上部分静态网站托管服务商的限速，大图片的加载会变得很慢，进而拖慢整个网站的加载速度。这个组件很早就想重写了，这次顺带把随机封面图组件也一起重写了。

响应式图像#

Astro 从 5.10.0 版本开始正式支持响应式图像。这次重写图片组件，主要就是为了引入这个特性，同时让博客支持 AVIF 格式。在构建时，Astro 会自动对 src 目录下的图片进行优化，将其转换为 AVIF 或 WebP 格式。也可以同时输出两种格式以兼容尚不支持 AVIF 的浏览器，会相应增加构建时间，但我觉得这是可以接受的，因为现在大家基本都是使用云托管自动构建，所以不会影响效率。

强烈建议将 public 目录下的壁纸、头像等图片迁移到 src 目录，因为 Astro 在构建时只会对 src 目录下的图像进行优化。

如果文章需要将图片放在本地而非图床，也强烈建议将图片放在文章目录 src/posts/ 下通过相对路径引用，而不是放在 public 目录。当然，本地图片数量较多时会影响构建速度，因为构建过程中需要对这些图片进行转换、优化和压缩。

配置说明#

1
// 图像优化及响应式配置
2
// 响应式图像会根据访问者的屏幕尺寸和分辨率，以不同大小提供图像，从而提升不同设备上的加载性能。
3
// Astro 仅能对 src 目录下的图像进行优化，图像越多构建时间越长。
4
imageOptimization: {
5
  // 输出图片格式
6
  // - "avif": 仅输出 AVIF 格式（最新技术，最小体积，兼容性较低）
7
  // - "webp": 仅输出 WebP 格式（体积适中，兼容性好）
8
  // - "both": 同时输出 AVIF 和 WebP（推荐，浏览器自动选择最佳格式）
9
  formats: "webp",
10
  // 图片压缩质量 (1-100)，值越低体积越小但质量越差，推荐 70-85
11
  quality: 85,
12
},

AVIF 与 WebP#

最后，我们有必要了解一下这两种现代图片格式。

参考#

以下是 Astro 文档的相关说明：图像 | Docs

我们建议尽可能将本地图像保存在 src/ 中，以便 Astro 可以对其进行转换、优化和打包。/public 目录中的文件始终按原样服务或复制到构建文件夹中，不进行任何处理。

你在 src/ 中存储的本地图像可以被项目中的所有文件使用：.astro、.md、.mdx、.mdoc 和其他 UI 框架。图像可以存储在任何文件夹中，包括与你的内容一起。

如果你想要避免对图像做任何处理，请将图像存储在 public/ 文件夹中。

响应式图像行为添加于： astro@5.10.0

通过将响应式图像属性应用于 <Image /> 或 <Picture /> 组件，Astro 将自动为图像生成所需的 srcset 和 sizes 值，并应用必要的样式以确保它们正确调整大小。

当此响应式行为使用 image.layout 进行全局配置时，它将应用于所有图像组件，以及使用 Markdown ![]() 语法的任何本地和远程图像。

public/ 文件夹中的图像永远不会被优化，并且不支持响应式图像。

在 MDN Web 文档上阅读有关响应式图像的更多信息。