为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定制图像服务

前言

筛选格式

转换图像

清理代码

小结

图像优化效率学

评论