怎么利用 HTML 的 Picture 标签在不同设备下在线加载最优资源-html教程-PHP中文网

被忽略只显示是因为media语法错误、断点重叠、type类型不匹配或服务器content-type不符；正确写法需括号完整、断点无重叠、mime严格一致，并通过network面板验证请求文件。

怎么利用 html 的 picture 标签在不同设备下在线加载最优资源

Picture 标签本身不“加载”资源，它只是把选择权交给浏览器——你写对条件，浏览器才敢选；写错一个括号或 MIME 类型，它就直接跳过所有 <source></source>，只显示 <img>。

为什么 `<source></source>` 总是被忽略，只显示 `<img>`

这不是浏览器不支持，而是条件没被满足或配置非法：

media 值必须是完整、合法的 CSS 媒体查询：写成 media="max-width: 768px" ❌（缺括号），必须是 media="(max-width: 768px)" ✅
多个 <source></source> 的 media 断点不能重叠：比如 (max-width: 768px) 和 (min-width: 768px) 在 768px 宽度时行为未定义，推荐用开区间写法：max-width: 767px → min-width: 768px → min-width: 1024px
type 必须是标准 MIME 类型，且服务器返回的 Content-Type 响应头必须完全一致：image/webp ✅，webp 或 image/jpg ❌（大小写、拼写、空格都不行）
Network 面板里看到 blocked:mime-type 或 404，基本就是 type 和实际文件类型/服务配置对不上

按设备像素比（DPR）选图：用 `x` 描述符，不用 `sizes`

当你希望 Retina 屏自动加载 @2x 图、普通屏用 @1x，核心靠 srcset 中的 x 描述符，<picture></picture> 只是容器，真正起作用的是内部 <img> 或匹配成功的 <source></source> 的 srcset：

公文宝

一款AI工具，主要用于AI公文写作神器，一键生成合规材料，适合需要提升相关任务效率的用户。

下载

photo@1x.jpg 1x → 适配 DPR = 1（多数安卓中低端机、旧笔记本）
photo@2x.jpg 2x → 适配 DPR = 2（MacBook、iPhone 8–13、Pixel 3–6）
photo@3x.jpg 3x → 适配 DPR = 3（iPhone 14 Pro、Samsung S23 Ultra）
同一 srcset 中禁止混用 w 和 x：例如 photo-400w.jpg 400w, photo@2x.jpg 2x 是未定义行为，Chrome 和 Safari 可能表现不一
<img> 的 src 是降级兜底，必须存在；即使所有 <source></source> 匹配失败，也要确保这张图能正常显示

按视口宽度 + DPR 组合选图：`<source></source>` 配 `srcset` + `x` + `media`

这是最贴近真实业务的写法——比如移动端展示裁剪版小图、桌面端展示宽幅大图，且各自都需适配 DPR：

<picture><source media="(max-width: 767px)" srcset="hero-mobile@1x.jpg 1x, hero-mobile@2x.jpg 2x"><source media="(min-width: 768px) and (max-width: 1200px)" srcset="hero-tablet@1x.jpg 1x, hero-tablet@2x.jpg 2x"><source media="(min-width: 1201px)" srcset="hero-desktop@1x.jpg 1x, hero-desktop@2x.jpg 2x, hero-desktop@3x.jpg 3x">
  @@##@@
</source></source></source></picture>

每个 <source></source> 独立控制一组 DPR 版本，互不影响
桌面端提供 @3x 是有意义的：高分屏显示器（如 4K/5K）DPR 常为 2–3，且用户更可能放大页面（系统缩放或浏览器缩放），浏览器会动态响应
图片物理尺寸必须严格按比例：若基础图是 400×300，@2x 就得是 800×600，否则高 DPR 下仍模糊
务必在 <img src="hero-desktop@1x.jpg" alt="主视觉图"> 上加 width 和 height 属性（如 width="400" style="max-width:90%"），防止布局偏移（CLS）

验证是否真正在线生效：别信“看起来一样”

光看页面渲染没用，得看网络请求和设备模拟：

打开 Chrome DevTools → Network 面板 → 刷新页面 → 找到图片请求，看加载的是 hero-mobile@2x.jpg 还是 hero-desktop@1x.jpg
用 Device Toolbar 切换设备预设（如 iPhone 14 Pro、Pixel 5、MacBook Pro），观察请求文件名变化
手动修改系统缩放（Windows 125% / macOS 默认缩放）或浏览器缩放（Ctrl + / Cmd +），DPR 会变，浏览器应重新选图
禁用 JavaScript 后再测试：整个机制不依赖 JS，如果失效，说明 HTML 或服务器配置有硬伤

最容易被忽略的一点：所有 <source></source> 的 srcset 路径必须真实可访问，且服务器必须正确返回 Content-Type；本地开发时用 file:// 协议会触发 CORS 和 MIME 检查失败，务必走 http(s) 服务。