srcset仅负责分辨率适配，不提供格式降级；格式降级必须用picture+source，src作为基础兼容兜底，且所有路径须真实存在。

srcset 本身不提供“降级逻辑”，浏览器按自身能力选择最匹配的源，没有 srcset 时 fallback 到 src 才是真正的降级机制。别指望它自动兜底到低分辨率图或 WebP → JPEG，那得靠你手动组织。

srcset + sizes 是响应式选图，不是格式降级工具

浏览器只看 srcset 里每个 URL 后面的宽度描述符（如 1x、2x、400w）和当前 sizes 计算出的显示宽度，再结合设备像素比（DPR），挑一个最接近的源。它完全不关心图片格式，也不会因为不支持 WebP 就跳去用 JPG。

常见错误现象： —— Safari 13 以下、IE、老 Android WebView 直接忽略 srcset 里的 WebP，但也不会加载 src 的 JPG，而是留白或报 404（如果 src 也写 WebP）。

• src 必须是基础兼容格式（通常是 JPG/PNG）
• srcset 中所有 URL 都应与 src 内容语义一致，仅分辨率/密度不同
• 想做 WebP/JPEG 格式切换？必须用 +

标准写法：srcset 配合 sizes 实现宽度适配

这是现代响应式图片最常用、最稳妥的组合。关键在 sizes 告诉浏览器“这张图在不同视口下大概占多宽”，浏览器才能从 srcset 中选出最优源。

@@##@@

说明：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• 480w 等是“固有宽度”，单位是像素，不是 CSS px
• sizes 是媒体条件 + 宽度值，浏览器按顺序匹配，取第一个满足的宽度作为“目标显示宽度”
• 最终选哪个源，由“目标显示宽度 × 设备 DPR” 和 srcset 中各源的 w 值比对决定
• 没写 sizes？浏览器默认按 100vw 算，容易选大图，浪费带宽

格式降级必须用 ，不能只靠 srcset

如果你要优先用 WebP，退化到 JPG，srcset 无能为力。必须用 结构，让浏览器按 type 支持度逐个尝试。

<picture><source srcset="photo.webp 1x, photo@2x.webp 2x" type="image/webp"><source srcset="photo.jpg 1x, photo@2x.jpg 2x" type="image/jpeg">
  @@##@@
</source></source></picture>

要点：

• 每个 可单独配 srcset 和 sizes，互不影响
• 浏览器从上到下检查 type，第一个支持的就加载；都不支持，才 fallback 到 的 src
• 的 src 是强制 required 属性，不可省略，否则无图可显
• 注意：IE 12+ 才支持 ，旧版需 polyfill（如 picturefill）

最容易被忽略的一点：srcset 里的 URL 路径必须真实存在且可访问——它不会因 404 自动跳下一个，也不会回退到 src；而 的 之间才是真正的“格式级降级”。别把两件事混在一起设计。

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