CDN厂商对srcset路径参数支持差异显著：Cloudinary要求w_h_c等参数严格顺序，Imgix参数顺序无关但auto=format需显式声明，阿里云OSS+CDN需合并多级指令为单个image/watermark，否则中间参数被忽略。
CDN厂商对 srcset 路径参数的支持差异
不同CDN（如 Cloudflare、Akamai、阿里云 CDN、Cloudinary、Imgix）对图片 URL 的动态参数拼接逻辑不一致，直接套用同一套 srcset 生成规则会导致部分尺寸/格式失效。关键区别在参数分隔符、大小写敏感性、以及是否支持多级修饰符嵌套。
例如：
- Cloudinary 使用 w_800,h_600,c_fill 且必须按固定顺序；
- Imgix 支持 &w=800&h=600&fit=fill，参数顺序无关，但 auto=format 必须显式声明才触发 WebP/AVIF 自动转码；
- 阿里云 OSS + CDN 默认不解析 ?x-oss-process= 多级指令，需将裁剪+压缩+格式转换合并为单个 image/watermark 指令，否则中间参数被忽略。
-
srcset中每个 URL 必须是完整可访问地址，不能只写相对路径或参数片段 - 若 CDN 不支持
type="image/avif"的source，即使写了也会降级到下一个匹配项，而非报错 - Cloudflare Image Resizing 要求原始图必须开启「Image Optimization」开关，否则
/cdn-cgi/image/前缀返回 404
自动化生成 picture 结构时的断点对齐陷阱
很多构建脚本（如 Vite 插件、Webpack loader）会扫描 CSS 中的 @media 断点并自动生成 source 列表，但实际布局中图片容器宽度受 flex/grid 约束，和媒体查询断点并不总是一一对应。结果就是 media="(max-width: 768px)" 匹配了，但图片只占 50vw，而 sizes 写的是 100vw，浏览器误判所需宽度，加载了过大资源。
- 真实断点应来自容器计算宽度，不是设计稿标称值：用
getBoundingClientRect().width实测或 DevTools 的 Layout → Computed 检查width -
picture内部所有source的media条件必须互斥且覆盖全范围，避免中间空档（如漏掉(min-width: 769px) and (max-width: 1024px)） - 当使用 CSS-in-JS 或 Tailwind JIT 时，
media属性无法静态提取，需手动维护断点映射表
多格式 fallback 的声明顺序与浏览器选择逻辑
浏览器按 source 出现顺序从上到下匹配，一旦某个 source 的 media 和 type 同时满足，就停止继续检查。这意味着 WebP/AVIF 的 source 必须放在 JPEG/PNG 前面，否则高兼容性格式永远没机会被选中。
典型错误写法：<source media="(min-width: 1024px)" srcset="hero.jpg" type="image/jpeg"><source media="(min-width: 1024px)" srcset="hero.webp" type="image/webp">
→ 浏览器先看到 JPEG 行且 media 匹配，直接加载，WebP 被跳过。
- 正确顺序：WebP/AVIF
source在前，JPEG/PNG 在后，且type值必须精确匹配 MIME 类型（image/webp≠image/jpg） -
img的src必须是基础格式（如 JPEG），不能是 WebP —— 这是给不支持picture的旧浏览器兜底用的 - Chrome 120+ 开始支持 AVIF，但 Safari 直到 17.4 才完整支持，
type="image/avif"在 Safari 17.3 下会被忽略，回退到下一个source
CDN 参数与 sizes 的协同校验方法
生成 srcset 时，每个 URL 的宽度描述符（如 800w）必须和 CDN 实际输出图的固有宽度一致，否则浏览器无法正确匹配。而 CDN 输出宽度常受参数影响（如 w_800 输出 800px 宽，但加 q_30 可能因压缩算法导致像素微差），这种偏差在 DPR > 1 设备上会被放大。
立即学习“前端免费学习笔记（深入）”；
- 用
curl -I请求 CDN 图片 URL，检查响应头Content-Length和X-Original-Width（如有）交叉验证 - 本地起一个简易服务，用
sharp加载 CDN 返回图，调用metadata()获取真实width，比对是否等于srcset中标注的w值 -
sizes字符串里不要用calc()或 CSS 变量，它只接受媒体查询语法 + 固定长度单位（vw,px,em）
最易被忽略的是：CDN 参数变更（如开启 AVIF 自动转码）可能让同一 URL 返回不同宽高的图，此时 srcset 中的 w 描述符就失效了 —— 必须同步更新生成逻辑，不能只改 CDN 配置。
