Cloudinary 媒体优化代理

要解决的问题

在生产环境中，同一批素材往往要同时服务移动端、平板和桌面端，每个端点的屏幕尺寸和带宽都不相同。把原始大图直接发给用户，传输成本高、首屏变慢；靠人工逐个调尺寸和格式，工作量又会随着素材数量线性膨胀。Cloudinary 本身提供了响应式断点、格式协商和智能裁剪等能力，但这些能力分散在 Upload API 和 Admin API 的不同参数里，手工配置容易出错，也难以沉淀为可复用的流程。

工作原理

这个技能把 Cloudinary 的媒体优化流程串成一条自动化流水线，核心能力包括：

• 自动化上传与转换：通过 Upload API 将本地图像和视频资源投递到 Cloudinary 云端，并在同一个调用中携带变换参数。
• 响应式断点：按设备档位生成多套尺寸变体，让客户端按视口宽度自行选择，无需后端为每个断点维护独立 URL。
• 格式协商：根据客户端支持的编码格式（如 WebP、AVIF）输出合适的产物，避免一刀切地返回同一种格式。
• 重力检测智能裁剪：开启 gravity 相关的裁剪策略，在缩放时围绕画面主体做居中或自定义锚点裁剪，避免缩略图把关键内容切掉。

关键步骤大致是：准备素材 → 调用 Upload / Admin API 并声明变换参数 → Cloudinary 在云端生成变换后的变体 → 按客户端能力返回对应资源。

适用边界与注意点

• 使用前需要本地具备 Node.js 与 Python 运行环境，技能依赖 Cloudinary 官方 SDK 或 HTTP 接口完成鉴权与请求。
• 智能裁剪的效果取决于 Cloudinary 侧 gravity 参数的配置，默认行为未必符合所有构图，需要针对实际素材做抽查。
• 该技能只负责"生成与调度优化产物"，不包含 CDN 缓存策略、客户端图片组件或懒加载逻辑，这些仍需在业务侧自行实现。
• 所有变换参数建议在代码中集中管理，避免散落在各处的硬编码导致同一资源出现多种不一致的变体。