HTML怎么给不同尺寸图片做降级-html教程-PHP中文网

必须写在后且不能自闭合，因为按顺序匹配，全不匹配时静默回退到；漏掉、自闭合或缺失src/alt会导致页面空白。

html怎么给不同尺寸图片做降级

直接说结论：用 <picture></picture> 元素 + 多个 <source></source> + 必须存在的 <img> 降级节点，不是“可选”，是强制要求。

为什么 `<img>` 必须写在 `<source></source>` 后面且不能自闭合

浏览器解析 <picture></picture> 是从上到下线性扫描，遇到第一个匹配的 <source></source> 就加载并停止；但如果没有一个 <source></source> 匹配（比如 media 条件全不满足、JS 动态插入失败、或浏览器根本不支持 <picture></picture>），它会退回到 <img> 节点——前提是这个节点存在、有 src、有 alt，且是完整标签（<img src="..." alt="...">，不是 <img> 或 <img>）。

常见失效现象：

旧版 Safari（，只认 <img>
漏掉 alt：屏幕阅读器无法描述，部分浏览器（如早期 Firefox）可能拒绝加载
写成 <img src="x.jpg">：HTML 解析器视其为无效结构，<img> 被跳过，整个 <picture></picture> 无 fallback

`media` 写错位置或语法导致降级被绕过

media 属性只能出现在 <source></source> 标签上，且必须带括号。写错就等于没写——浏览器静默忽略，直接走 <img>。

错误示例：

<picture media="(max-width: 767px)"></picture> → media 在 <picture></picture> 上，无效
<source media="max-width: 767px"></source> → 缺少括号，无效
<source media="(min-width: 768px)"><img src="fallback.jpg"></source> → <source></source> 不能包裹 <img>，结构非法

正确写法只有一种：<source media="(max-width: 767px)" srcset="mobile.jpg"></source>，且所有 <source></source> 必须在 <img> 之前。

断点顺序反了，`<img>` 永远不触发

浏览器不会“比对所有条件”，它碰到第一个 media 为 true 的 <source></source> 就停。如果把手机规则放在最前，宽屏设备也只会加载手机图，<img> 完全没机会生效。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

典型错误顺序：

<source media="(max-width: 767px)"></source>（手机）
<source media="(min-width: 768px)"></source>（平板）
<source media="(min-width: 1200px)"></source>（桌面）
<img src="fallback.jpg">

→ 所有宽度 ≤ 767px 的设备命中第一条；≥ 768px 的设备也命中第一条？不，但第二条和第三条永远不执行，因为第一条已终止流程。而 <img> 是 fallback，不是“兜底 source”，它只在所有 <source></source> 都不匹配时才启用。

真正安全的写法是明确划分互斥区间，例如：

<source media="(min-width: 1200px)" srcset="desktop.jpg"></source>
<source media="(min-width: 768px) and (max-width: 1199px)" srcset="tablet.jpg"></source>
<source media="(max-width: 767px)" srcset="mobile.jpg"></source>
<img src="mobile.jpg" alt="...">

降级图该选哪张：别用“最小图”当 fallback

很多人把 <img src="mobile.jpg"> 当作 fallback，觉得“小图总能显示”。但这是错的：如果用户在桌面端打开，又恰好因 JS 错误、CDN 故障或 network condition API 失效导致所有 <source></source> 未加载，浏览器就会拉这张小图——结果是 400×800 的图被拉伸到 1920px 宽，模糊、失真、布局崩塌。

更合理的做法：