Cloudinary 资源优化代理

要解决的问题

前端和后端各自处理图片时，常见的情况是：开发者把原图直接上传到对象存储，然后在页面里用 <img> 标签引用。结果往往是同一张照片在不同屏幕上以相同分辨率加载——手机端白白下载 4K 级别的字节数，桌面端又可能在小尺寸容器里被浏览器缩放。格式选择也基本靠手工：JPEG、PNG、WebP 该用哪个，多数项目里根本没有统一策略，更谈不上自动切换 AVIF 这类新格式。视频资源的问题更突出：不同分辨率、不同码率的转码配置散落在各处脚本里，维护成本随资产数量线性增长。

技能如何工作

这个技能通过 Cloudinary Node.js SDK 和 Upload API 接管资产上传与处理流水线，核心能力集中在三件事上：

• 自动格式选择：根据浏览器与内容类型决定输出格式。照片类资产优先转向 WebP/AVIF 这类压缩率更高的选项，需要透明通道时保留 PNG，避免一刀切的配置。
• 响应式断点：上传后即按预设断点生成多尺寸变体（density/width 方案），运行时用 URL 参数直接请求合适的那一份，不再把原图当作唯一来源。
• AI 裁剪：利用 Cloudinary 的人工智能裁剪能力，识别画面中的人脸和主体区域，动态调整 crop 与 gravity 参数，避免固定裁剪规则把人物切掉。

典型的工作流是：本地资源 → SDK 上传（可携带 transformation 参数）→ 返回托管 URL → 前端按断点引用对应变体。 transformations 的配置既可以写在上传时，也可以在 URL 上按需追加，两者结合能覆盖大多数场景。

适用边界与注意点

这个技能适合已经把资产托管在 Cloudinary 上、或准备迁移过来的项目。如果你的素材仍分散在自建服务器和多个 CDN 上，需要先理清资产归属，技能本身不负责迁移数据。

上传大视频属于同步密集操作，注意 SDK 的超时设置与流式上传选项，别在请求线程里阻塞等待。人脸识别裁剪依赖云端处理，免费套餐有调用频率限制，批量生产前建议确认配额。另外，Node.js 与 Python 是上游声明的两个运行环境，具体用哪个取决于你调用的是 SDK 还是直接打 API。