锐化图像流水线

要解决的具体问题

在 Web 前端与设计交付流程中，图像处理往往是一个容易被低估的瓶颈。随着现代浏览器对 WebP、AVIF、JPEG XL 等新格式的支持逐渐普及，开发者需要为同一张图片生成多种格式与尺寸的变体，以满足不同设备、网络环境和性能预算的需求。手动维护这些变体不仅繁琐，而且极易出错——例如忘记更新 srcset、遗漏某一尺寸，或在不同项目中重复劳动。

此外，批量处理大量图片时，性能与内存占用是关键考量。传统的图像处理方案往往依赖 CPU 密集型操作，在高并发场景下容易拖慢构建流程或阻塞事件循环。

核心能力与工作原理

该技能基于 sharp npm 包，后者底层使用 libvips——一个用 C 编写的高性能图像处理库。sharp 本身是 Node.js 的 Node-API v9 模块，因此在符合版本要求的运行时中能够以接近原生的速度执行图像操作。

核心能力包括：

• 批量 resize：可指定输出宽度和高度，支持模式（如 cover、contain）以控制裁剪或填充行为。
• 格式转换：输出为 WebP、AVIF、JPEG XL 等现代格式，兼顾压缩率与兼容性。
• 水印叠加：在指定位置或全覆盖水印，适合品牌保护或版权标识。
• 元数据提取：读取 EXIF、ICC profile 等信息，便于后续处理或展示。
• 响应式 srcset 生成：根据目标断点自动生成多尺寸变体，并输出对应的 srcset 与 sizes 属性。

典型工作流为：输入原始图像 → 读取元数据 → 按目标尺寸与格式生成变体 → 输出到指定目录并生成描述文件。整个过程是流水线式的，可以在构建脚本或 CI 环境中自动化运行。

适用边界与注意点

该技能适用于以下场景：

• 现代 Node.js 项目（^18.17.0 或 >= 20.3.0）
• Deno 与 Bun 运行时环境
• 需要处理大量图片的构建流程或设计系统

需要注意的是：

• sharp 依赖预编译的二进制文件，首次安装时会下载对应平台的 native 模块。在受限网络环境中可能需要手动配置镜像或代理。
• 某些高级特性（如自定义 ICC profile、高级 resize 模式）需要结合 sharp 的原生 API 理解其行为。
• 对于极端尺寸（如超高清 DPR 2x/3x）的图片，应评估磁盘空间与构建时间的影响。