如何利用HTML的picture标签实现不同视口下的图片资源切换-html教程-PHP中文网

本身不切换图片，浏览器按顺序匹配首个满足media和type的后加载其srcset，其余跳过；是必需兜底，必须带src和alt，否则空白。

如何利用html的picture标签实现不同视口下的图片资源切换

picture 标签本身不切换图片，浏览器按顺序匹配后加载

很多人以为写了 <picture></picture> 就自动“响应式”了，其实它只是个声明式调度容器。真正起作用的是内部 <source></source> 的匹配逻辑：浏览器从上到下扫描，遇到第一个同时满足 media（视口条件）和 type（格式支持）的 <source></source>，就加载它的 srcset，其余全部跳过。

常见错误现象包括：

所有设备都只加载了 <img> 的兜底图 —— 很可能是 <source></source> 的 media 写错了，比如写成 768px 而不是 (max-width: 768px)
高 DPR 设备（如 iPhone）仍加载 1x 图 —— 因为用了 w 描述符却没配 sizes，浏览器只能按默认 100vw 粗估，选错候选值
部分浏览器白屏 —— <source type="image/avif"></source> 放最前，但没提供 type="image/webp" 或通用 <img src> fallback，Safari 15 前或旧 Edge 直接跳过所有 <source></source>

media 属性必须写标准媒体查询，且顺序决定优先级

media 不是 CSS 类名，也不是断点别名，必须是合法的媒体查询字符串。比如移动端优先的写法要从窄到宽，否则宽屏规则会提前命中、阻断后续匹配。

推荐写法（移动端优先）：

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

关键点：

断点值要互斥，避免重叠（如 max-width: 768px 和 min-width: 768px 会在 768px 处冲突）
不要省略单位，768 是无效的，必须写 768px
<img src="hero-fallback.jpg" alt="活动主视觉"> 必须存在且带 src，否则整个 <picture></picture> 在不匹配时渲染为空白

srcset 用 w 还是 x？取决于你控制的是宽度还是像素密度

想按页面中图片实际渲染宽度切图（比如移动端占满屏、桌面端固定 400px），必须用 w 描述符，并配 sizes；想按设备物理像素密度适配（如 Retina 屏自动加载 2x 图），才用 x 描述符。

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

混用会失效：

srcset="a-400w.jpg 400w, a-800w.jpg 800w" → 必须搭配 sizes="(max-width: 768px) 100vw, 400px"
srcset="a-1x.jpg 1x, a-2x.jpg 2x" → 可省略 sizes，但失去对布局变化的精细控制
srcset="a-400w.jpg 400w, a-2x.jpg 2x" → 整个 srcset 值被浏览器忽略

Chrome DevTools 的 Network 面板里右键图片 → “Copy image src”，能直接看到最终加载的是哪个 URL，这是验证是否命中预期资源的最快方式。

sizes 属性必须写在上，且值要和 CSS 容器宽度一致

sizes 不是设置图片宽高，而是告诉浏览器：“这张图在不同视口下大概占多宽”。如果 CSS 里给图片容器设了 width: 50%，但 sizes 写成 "100vw"，浏览器就会误判渲染宽度，选错 srcset 中的候选图。

典型配合：

<style>
  .hero-img { width: 100%; }
  @media (min-width: 769px) { .hero-img { width: 50%; } }
  @media (min-width: 1201px) { .hero-img { width: 33.33%; } }
</style><picture><source media="(max-width: 768px)" srcset="hero-400w.jpg 400w, hero-800w.jpg 800w"><source media="(min-width: 769px) and (max-width: 1200px)" srcset="hero-600w.jpg 600w, hero-1200w.jpg 1200w"><source media="(min-width: 1201px)" srcset="hero-800w.jpg 800w, hero-1600w.jpg 1600w">
  @@##@@
</source></source></source></picture>

最容易被忽略的一点：sizes 必须写在 <img> 标签上，而不是 <source></source>；而且它的值必须和真实 CSS 渲染结果对齐 —— 否则再准的 srcset 也白搭。