为 Fuwari 定制图像服务

文章封面图像

前言

因为 Cloudflare Workers 存在 20 分钟的构建限制，在迁移至 Workers 后，我被迫使用了 WebP，但是我一直没有放弃 AVIF。在仔细研究 Astro 文档后，我决定构建一个自定义图像处理服务，该服务能够跳过对 AVIF 格式的图像处理，同时将所有其他格式的图像转换为 WebP。

为了更好地理解本文的背景和探索过程，我建议先阅读姊妹篇为 Fuwari 启用响应式图像，以了解我在进行本次修改前所做的修改。同样地，本文侧重于过程记录而非详尽的教程，因此文中可能存在不严谨之处或信息缺漏。

筛选格式

Astro 的图像服务专注于处理图像本身，而不直接介入格式筛选，因此在图像服务内部筛选 AVIF 是不可行的。由于在之前的修改中，所有图像都由 ImageWrapper.astro 包装，所以我们可以在包装器中进行筛选，并显式标记 format="avif"。

---
const isAvif = /\.avif$/i.test(src);
---

<Image {...isAvif && { format: "avif" }} />

核心逻辑非常简单，识别 .avif 的文件名即可。对于其他格式的图像，我们不必标记格式，因为所有其他格式的图像都会被转换为 WebP。鉴于 WebP 的转换速度很快，且我在源文件中不使用 WebP 格式，因此，构建过程中少量从 WebP 到 WebP 的冗余转换是可以接受的。

转换图像

经过包装器的分类后，我们的自定义图像服务就能够根据是否存在 format="avif"，对不同格式的图像采取不同的处理流程。

import type { LocalImageService } from "astro";
import { baseService } from "astro/assets";
import sharp from "sharp";

// AVIF passthrough, others convert to WebP
const customImageService: LocalImageService = {
    validateOptions: baseService.validateOptions,
    getHTMLAttributes: baseService.getHTMLAttributes,
    getURL: baseService.getURL,
    parseURL: baseService.parseURL,

    async transform(inputBuffer, transformOptions) {
        if (!inputBuffer || inputBuffer.length === 0) {
            throw new Error("Invalid input buffer: buffer is empty");
        }

        // Return original data
        if (transformOptions.format === "avif") {
            return {
                data: inputBuffer,
                format: "avif" as const,
            };
        }

        try {
            const { width, height, quality } = transformOptions;

            // Validate dimensions
            if (
                (width !== undefined && width < 0) ||
                (height !== undefined && height < 0)
            ) {
                throw new Error(
                    "Invalid dimensions: width and height must be non-negative"
                );
            }

            // Clamp quality to 1-100
            const validQuality = quality
                ? Math.max(1, Math.min(100, quality))
                : undefined;

            // Create Sharp instance with optimized config
            let sharpInstance = sharp(inputBuffer, {
                failOnError: false,
                pages: -1,
                limitInputPixels: 268402689,
                sequentialRead: true,
            });

            // Resize if needed
            if (width || height) {
                sharpInstance = sharpInstance.resize({
                    width,
                    height,
                    fit: "inside",
                    withoutEnlargement: true,
                });
            }

            // Convert to WebP
            const buffer = await sharpInstance
                .webp(validQuality ? { quality: validQuality } : undefined)
                .toBuffer();
            const data = new Uint8Array(buffer);

            return {
                data,
                format: "webp",
            };
        } catch (error) {
            console.error("Image transform failed:", error);
            console.error("Transform options:", transformOptions);

            // Return original data as fallback
            return {
                data: inputBuffer,
                format: transformOptions.format || "webp",
            };
        }
    },

    getSrcSet(options, imageConfig) {
        if (options.format === "avif") {
            return [];
        }

        return baseService.getSrcSet?.(options, imageConfig) ?? [];
    },
};

export default customImageService;

对于传入的 AVIF，我们不进行任何处理，直接输出原始图像；对于其他格式的图像，我们使用 sharp 模拟原始的图像处理流程，在不进行额外设置的情况下，默认生成质量为 80 的 WebP，而在接收到配置的 sizes 与 widths 时，此服务也能够生成一系列对应尺寸与质量的响应式图像。Astro 在内部设置了一系列预设值，使得用户能够在不同格式之间自动标准化，但是我们的图像处理服务只输出 WebP，所以也没有必要重新实现这一功能。

现在所有的 AVIF 都会被拉取到本地，并在文件名添加哈希标识。为什么选择拉取图像而不直接使用远程 URL，并且拉取后又不进行优化呢？因为拉取后，所有图像都将位于站点的 /_astro 路径下。这样做有两个好处：首先，可以一定程度上隐藏原始的远程图像 URL；其次，资源与主站处于同一域名，有利于缓存优化。Cloudflare Workers 环境下，拉取一张来自 Cloudflare R2 的图像用时 15 毫秒以内，相较于此方案带来的安全与性能优化，增加少许的构建时间是完全可接受的。

为 Fuwari 定制图像服务

前言

筛选格式

转换图像

清理代码

小结

图像优化效率学

评论