picture标签本身不识别设备分辨率，它依赖media、srcset和sizes协同，由浏览器根据视口宽度、dpr和格式支持自主选择最优图片；任一配置错误（如media缺括号、sizes缺失、type与响应头不一致）均导致全部回退至img。

标签本身不“分发”分辨率，它只是把选择权交给浏览器；真正起作用的是 的 media、srcset 和 sizes 组合是否写对——错一个括号、漏一个 sizes、type 与响应头不一致，就全回退到 <img src>。

为什么写了 却始终只加载 的 fallback 图

这是高性能页面中最隐蔽的失效点：你以为资源被智能切换了，其实浏览器根本没匹配上任何 ，静默走兜底。

• media 值不是合法媒体查询：比如写成 media="max-width: 768px"（缺括号）或 media="768px"（非查询语句），浏览器直接忽略该
• srcset 单独出现但没配 media 或 type：该 不参与选择，等于白写
• 服务器返回的 Content-Type 和 type="image/webp" 不一致：例如路径是 .webp，但服务端返回 text/plain，Chrome 会标记为 (blocked:mime-type)
• 漏掉 <img>，或写了但没 src：页面留空，不是报错，是静默失败

用 media 按视口宽度切图时，断点必须互斥且语法严格

media 是最常用也最容易写错的条件。它只认标准 CSS 媒体查询，且从上到下顺序匹配，第一个满足即停。

凡科AI抠图

一款简单易用的在线AI智能抠图工具，可自动识别图片主体并快速移除背景，适合处理日常图片素材。

下载

• ✅ 正确写法：media="(max-width: 479px)"、media="(min-width: 480px) and (max-width: 1023px)"、media="(min-width: 1024px)"
• ❌ 错误写法：media="screen and (max-width: 480px)"（冗余）、media="small"（非法值）
• 断点重叠会导致高分辨率设备永远加载不到大图：比如 (min-width: 768px) 和 (min-width: 1024px) 同时存在，1024px 设备会命中第一个，跳过第二个
• 移动端优先场景建议用开区间写法：max-width: 479px → min-width: 480px → min-width: 1024px

srcset + sizes 是适配 DPR（如 2x/3x 屏）更轻量可靠的方案

当不需要换构图、只希望 Retina 屏自动加载双倍图时，srcset + sizes 比 media 更高效——它不触发重排，也不依赖 JS，浏览器在解析 HTML 阶段就能预取。

• srcset 必须用 x 描述符：photo.jpg 1x, photo@2x.jpg 2x, photo@3x.jpg 3x；浏览器按 window.devicePixelRatio 自动选
• sizes 必须存在且合法：sizes="(max-width: 600px) 100vw, 50vw"；否则浏览器无法估算所需像素宽度，srcset 中的 w 描述符直接失效
• 顺序很重要：把 3x 图放在最后，因为浏览器从左到右匹配，遇到第一个满足 DPR 的就停；如果 1x 放最后，2x 设备永远选不到 1x
• 不要混用 w 和 x：比如 photo-400w.jpg 1x 是无效组合，浏览器会忽略整项

type 属性必须和服务端响应头完全一致，否则现代格式白搭

用 type="image/avif" 或 type="image/webp" 是提升首屏性能的关键，但前提是服务端配合。

• type 值必须是标准 MIME 类型：image/avif ✅，avif ❌，image/jpg ❌（应为 image/jpeg）
• 大小写和空格必须完全匹配：服务端返回 Image/WebP，浏览器不会识别 type="image/webp"
• 现代浏览器按 顺序检查 type，首个支持且服务端返回正确 Content-Type 的即被采用——不用 JS 判断，但也不能靠猜
• 验证方式：打开 DevTools → Network → 点击图片请求 → 查看 Response Headers 中的 Content-Type 字段

实际生效的关键不在标签多华丽，而在于每个 source 是否能被浏览器稳定识别并触发预加载；media 写错一个括号、sizes 缺失、type 与响应头差一个字母，都会让整套机制降级为单图加载。

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