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 前面，否则高兼容性格式永远没机会被选中。

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

典型错误写法：
<source media="(min-width: 1024px)" srcset="hero.jpg" type="image/jpeg"></source>
<source media="(min-width: 1024px)" srcset="hero.webp" type="image/webp"></source>
→ 浏览器先看到 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 配置。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！