CDN 不自动生成 srcset 或 sizes，二者必须由开发者手动或程序生成；CDN 仅按带参数的 URL 返回对应图片，浏览器依据 srcset 中的 w 值和 sizes 声明的渲染宽度匹配资源，与 CDN 后端处理逻辑无关。
CDN 本身不生成 srcset 或 sizes，它只按你传入的 URL 原样分发；所谓“动态参数自动生成”，本质是你在构建阶段或服务端注入逻辑，让 CDN 接收带参数的请求后返回对应尺寸/格式的图片——但 HTML 中的 srcset 和 sizes 必须由你手动写死或程序生成，浏览器不会从 CDN 响应头里反推这些属性。
CDN 的图片处理参数 ≠ HTML 的 srcset/sizes
像阿里云 OSS 的 ?x-oss-process=image/resize,w_800、Cloudflare Images 的 /cdn-cgi/image/width=800、Imgix 的 ?w=800&auto=format，都是运行时 URL 变换指令。它们解决的是「一张源图，按需生成多张变体」的问题，但：
- 这些参数不出现在你的 srcset 值里，除非你显式拼进去
- 浏览器选图时完全不感知 CDN 后端怎么处理，它只看 srcset 里写的 800w 和 sizes 算出的渲染宽度
- 如果你把 srcset 写成 "photo.jpg?w=400 400w, photo.jpg?w=800 800w"，那确实能用，但必须确保 CDN 支持该参数且缓存策略合理（否则 400w 和 800w 请求可能命中同一份缓存）
为什么直接拼 CDN 参数到 srcset 容易翻车
常见错误现象：小屏加载了 1200w 图片、Network 面板显示所有 srcset 项都被请求、WebP 回退失效。原因包括：
- sizes 缺失或写成 "100vw" 导致浏览器始终选最大图
- CDN 参数未区分格式，比如 ?format=webp 在不支持 WebP 的浏览器里返回 404，而 <picture></picture> 才能做格式兜底
- 多层代理（如 Nginx + CDN）未透传 Accept 请求头，导致 type="image/webp" 的 <source></source> 无法触发格式协商
- 缓存键未包含设备 DPR 或 Sec-CH-DPR，造成 2x 屏幕用户拿到 1x 尺寸图
真正可行的自动化生成方式
不要指望 CDN 替你写 HTML 属性。你需要在构建或渲染环节生成匹配的 srcset 和 sizes，再喂给 CDN：
- 使用构建工具（如 Vite 插件 vite-plugin-imagemin 或 Next.js 的 next/image）自动产出多尺寸文件，并生成对应 srcset 字符串
- 服务端模板（如 EJS、Nunjucks）中调用图片处理 API，根据原始图宽高和预设断点，动态拼出 srcset="... 400w, ... 800w" 和 sizes="(max-width: 768px) 100vw, 50vw"
- 若用纯静态站点，可借助 CLI 工具（如 sharp + glob）批量生成缩略图，并用脚本写入 JSON 清单，再由 JS 加载时注入 img.srcset（但会失去预加载优势）
- 对于 <picture></picture>，必须手写或模板生成每个 <source></source> 的 media 和 srcset，CDN 参数只是 srcset 值的一部分，例如：srcset="https://cdn.com/photo.jpg?w=400&f=webp 400w, https://cdn.com/photo.jpg?w=800&f=webp 800w" type="image/webp"
最容易被忽略的兼容性细节
CDN 动态参数在真实环境中的行为高度依赖配置：
- loading="lazy" 在 Safari 15.4+ 之前对含查询参数的图片有 bug，可能阻塞加载
- srcset 中的 URL 若含空格或特殊字符（如 &），必须 encodeURIComponent，否则解析失败
- 某些 CDN（如早期 Cloudflare Pages）默认不缓存带查询参数的资源，导致重复生成、性能反降
- type 属性只对 <source></source> 生效，<img alt="HTML响应式图像在不同CDN环境下的动态参数自动生成" > 的 srcset 不支持格式声明，必须用 <picture></picture> 包裹才能实现 WebP → JPEG 回退
