srcset仅负责同一格式下的分辨率适配，不处理格式降级；真正的格式/路径/兼容性降级需依赖++组合，否则WebP/AVIF在旧版Safari、IE等浏览器中会显示为空白。

srcset 本身不降级，它只做同一格式下的分辨率适配；真正负责格式/路径/浏览器兼容性降级的，是 + + 底层 的组合。单独写 srcset 不配 ，WebP/AVIF 在 Safari 13.0 之前、IE、旧安卓 WebView 里就是空白。

为什么 srcset 单独用会“降级失败”

srcset 只告诉浏览器：“这张 JPEG 图，有 400w、800w、1200w 三个尺寸可选，按 sizes 算出目标宽度后挑一个最接近的”。它不关心格式是否被支持，也不管浏览器认不认识 webp。

常见错误现象：

• 写了 ，Safari 12 显示空框（alt 都不渲染）
• sizes="(max-width: 768px) 100vw" 写成 sizes="100vw"，浏览器默认按 100vw 估算，小屏也拉大图
• srcset 混用 400w 和 2x，Chrome 直接跳过整组，静默 fallback 到 src

picture 中 source 的 type 和 media 必须同时生效

被采用的前提是：当前浏览器既支持它的 type（如 image/webp），又满足它的 media 条件（如 (min-width: 768px)）。二者缺一不可，且顺序从上到下匹配，第一个全满足的就加载，其余跳过。

实操建议：

• type 必须写完整 MIME 类型：image/webp ✅，webp 或 .webp ❌
• media 必须是合法媒体查询：(min-width: 768px) ✅，min-width: 768px（缺括号）❌
• 服务器返回的图片 Content-Type 必须和 type 一致，否则 Network 面板显示 blocked:mime-type
• 所有 必须写在 标签之前，且每个都带 srcset 或 src，空值会被忽略

兜底的 img src 是最后防线，不能省略也不能失效

在 里不是“备选”，而是强制 fallback 层。IE8–IE11、Safari ≤13.0、部分 Android 4.x WebView 完全忽略 ，只解析这个 。一旦它 404 或路径错误，整张图就空白。

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

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

下载

关键细节：

• 必须有 src，且该路径要真实可访问（构建时建议用插件预检）
• 可以加 onerror="this.src='placeholder.png'"，但 fallback 图自身必须可靠，否则触发无限错误循环
• alt 文本不是降级内容，只是无障碍描述；图片失败时显示 alt 是失败表现，不是设计行为
• 若需视觉降级（如占位色块），用 CSS：img:not([src]), img[src=""] { background: #f0f0f0; border: 1px dashed #ccc; }

构建时预检路径比运行时 onerror 更早拦截问题

靠 onerror 处理 404 是补救，不是预防。Vite/Webpack 构建阶段就能发现 src="/images/logo.webp" 对应文件不存在，此时自动替换为 placeholder.png，比用户打开页面再报错更可靠。

实操要点：

• Vite 可用 vite-plugin-html 扫描 HTML 中所有 ，检查 public 目录下是否存在对应文件
• Webpack 可通过 html-webpack-plugin 的 beforeAssetTagGeneration 钩子实现类似逻辑
• 注意：构建工具默认不校验路径，必须显式配置；且只校验静态字符串，不处理 JS 拼接的动态 src
• CDN 场景下，还需确保响应头含 Vary: Accept，否则 WebP 请求可能被缓存为 JPEG 响应

最容易被忽略的一点：所有 的 srcset 值，必须和原图真实宽度一致（比如 photo-400w.jpg 400w），不能写估算值。否则 sizes 计算出的目标尺寸错位，浏览器可能永远选不到你预期的图档。

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