锐化图像CDN优化器

要解决的问题

现代 Web 应用的图片资源往往直接落在对象存储或 CDN 后面。服务端如果只做「原样吐出」而不做格式转换、尺寸裁剪和缓存策略控制，就会带来两类问题：一是移动端下载大量未经压缩的 JPEG/PNG，带宽成本和首屏时间双双上升；二是 CDN 边缘节点因缺少 Cache-Control 与 Vary 等响应头，可能把不同尺寸、不同格式的响应互相复用，造成图片错乱或缓存命中率下降。

核心能力与工作方式

这个技能围绕 Sharp（libvips 的 Node.js bindings）构建了一条轻量的实时图像处理链路。运行时不依赖预生成静态资源，而是在请求进入时按参数完成转码和裁剪，并通过 CDN 感知的缓存头把结果交给边缘节点缓存。

关键步骤包括：

• 使用 sharp() 加载源图，根据请求的 width、height、fit 参数执行裁剪与缩放。
• 并行输出 AVIF 与 WebP 两种现代格式，避免单一格式在客户端不支持时回退到体积过大的 JPEG。
• 基于源图尺寸与目标尺寸自动生成 srcset，让浏览器按 device-pixel-ratio 和视口宽度选择合适档位。
• 抽取低质量图像占位（LQIP），通常以 16px 左右的极小尺寸 + 高压缩率编码，配合 CSS 背景渐进加载。
• 为每种变体写入独立 Vary 头（如 Vary: Accept, Width），防止 CDN 把不同格式或不同宽度的响应串用。

适用边界与注意点

这个方案只适用于服务端或边缘运行时能执行 Node-API 的环境。上游模块要求 Node.js ^18.17.0 或 >= 20.3.0，也可运行在 Deno 与 Bun 上。如果部署在完全静态的 CDN 上，又没有服务端函数介入，则无法实现动态转码与 LQIP 生成。

Sharp 本身是原生模块，冷启动会加载 libvips 二进制，冷路径耗时显著高于纯 JavaScript 方案。生产环境建议把同一 URL + 同一参数组合的结果缓存在边缘节点，避免每次回源都重新编码。

此外，AVIF 编码在低配 CPU 上开销较大，高并发场景需要关注线程池配置，否则可能成为请求队列的瓶颈。