用HTML的picture优化移动端-html教程-PHP中文网

仅用于艺术方向或格式回退两种场景；错误使用会增加体积、拖慢解析甚至导致图片不加载；须按media从窄到宽排序，必须为兜底子元素且路径与fallback一致。

用html的picture优化移动端

<picture></picture> 不是用来“替代 <img>”的万能开关，而是当你要解决「艺术方向」或「格式回退」这两类明确问题时才该启用的工具。盲目套用反而增加 HTML 体积、拖慢解析，还可能因写错 <source></source> 顺序导致图片不加载。

只在以下两种场景中真正需要它：

同一内容在不同视口下需裁剪不同区域（比如手机端只展示人脸，桌面端展示全身）——这是「艺术方向（Art Direction）」
想优先用 image/webp 或 image/avif，但必须给不支持的浏览器（如旧版 Safari、IE）降级到 image/jpeg ——这是「格式回退（Format Fallback）」

如果只是让一张图在不同屏幕宽度下自动选尺寸，<img srcset> 就够了，别硬套 <picture></picture>。

<source></source> 是按从上到下的顺序匹配的，第一个满足 media 条件的就生效，后面的直接跳过。所以：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

错误示例：<source srcset="small.jpg" media="(min-width: 768px)"></source> —— 这会让所有小屏设备 fallback 到 <img>，即使你写了 <source></source>。

仅靠 srcset 无法触发格式探测，浏览器只会按文件扩展名请求资源，不会主动试 WebP。要实现格式回退，必须这样写：

<picture><source srcset="hero.webp" type="image/webp"><source srcset="hero.avif" type="image/avif">
  @@##@@
</source></source></picture>

注意点：

type 属性值必须严格匹配 MIME 类型，image/webp 不能写成 webp 或 image/.webp
现代浏览器会按 <source></source> 顺序检查 type 是否支持，第一个支持的就加载；都不支持则退到 <img src="hero.jpg" alt="Hero banner">
CDN 或构建工具生成 WebP/AVIF 时，务必确保同名 JPG 存在且路径一致，否则 fallback 会 404

最容易被忽略的是：很多团队加了 <picture></picture> 却没删掉原来的 <img>，导致 DOM 里同时存在两套图片标签，既浪费带宽又干扰懒加载逻辑。用之前先确认你真正在解决艺术方向或格式兼容问题，而不是把它当成“更高级的 <img>”。