srcset和sizes不能直接解决高清图降级，因浏览器默认偏向保清晰而非省流量；真正降级需用picture+media按网络质量或用户偏好主动干预，并配合服务端Vary: Save-Data缓存分层。
为什么 srcset 和 sizes 不能直接解决高清图降级？
很多人以为只要写了 srcset，浏览器就会“自动选清晰的图”，其实不是。浏览器根据设备像素比（window.devicePixelRatio）、视口宽度、网络条件（如 Save-Data 头）综合决策，但默认策略偏向「保清晰」——哪怕用户在 3G 网络下，也可能加载 2x 的 WebP。真正“降级”得靠主动干预。
用 picture + media 实现按网络质量降级
核心思路：把高清图作为“可选”，把低清图设为 <source></source> 的 fallback，再用媒体查询或 prefers-reduced-motion 触发切换。关键不是分辨率，而是用户真实环境信号。
示例：
<picture>
<source
media="(prefers-reduced-motion: reduce)"
srcset="cat-low.jpg"
>
<source
media="(max-width: 768px) and (save-data: on)"
srcset="cat-1x.jpg"
>
<source
srcset="cat-2x.jpg 2x, cat-1x.jpg 1x"
>
<img src="cat-fallback.jpg" alt="cat">
</picture>注意：save-data 在 Chrome/Firefox 中有效，但 Safari 目前不支持；prefers-reduced-motion 是更通用的降级触发点。
立即学习“前端免费学习笔记（深入）”；
-
media属性必须写在<source></source>上，顺序影响匹配优先级（从上到下） - 没匹配到任何
<source></source>时，才回退到<img src alt="如何使用HTML处理高清图片降级显示" > - 不要在
<source></source>中混用srcset和media以外的属性（比如type），否则部分旧浏览器会跳过整条规则
服务端配合：用 Vary: Save-Data 缓存分层
CDN 或 Nginx 可以识别请求头 Save-Data: on，返回不同尺寸/格式的图片，并设置响应头 Vary: Save-Data，避免缓存污染。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
Nginx 示例配置片段：
if ($http_save_data = "on") {
set $img_suffix "-low";
}
location ~* \.(jpg|jpeg|png)$ {
try_files $uri$img_suffix$1 $uri =404;
add_header Vary "Save-Data";
}这样前端 <img src="/cat.jpg" alt="如何使用HTML处理高清图片降级显示" > 请求时，服务端能动态返回 /cat-low.jpg，且 CDN 会为 Save-Data 值不同的请求分别缓存。
- 必须加
Vary响应头，否则中间代理可能把低清图缓存后错发给高清需求用户 - 不要依赖客户端 JS 检测
navigator.connection.saveData后再换src——它有延迟，且首次渲染仍会发出高清请求
WebP/AVIF 降级到 JPEG 的兼容兜底
现代格式虽小，但 iOS 13 以下、旧 Android WebView 不支持 AVIF，部分微信内置浏览器也不支持 WebP。不能只靠 type 属性，得用 <picture></picture> 显式声明 fallback 链。
<picture> <source type="image/avif" srcset="cat.avif"> <source type="image/webp" srcset="cat.webp"> <img src="cat.jpg" alt="cat"> </picture>
注意：type 属性只校验 MIME 类型，不校验实际编码是否合规；有些 AVIF 文件即使声明了 type="image/avif"，在 Safari 16.4 之前也会静默失败，所以 <img src alt="如何使用HTML处理高清图片降级显示" > 的 fallback 必须是真实可用的 JPEG/PNG。
- 别在
<source></source>里写多个type，浏览器只认第一个 - 用
caniuse-lite查当前项目目标浏览器对 AVIF/WebP 的支持率，低于 95% 就别当主力格式 - 生成 AVIF 时加
--no-alpha和--min 20参数，能显著提升旧解码器兼容性
真正难的不是写对标签，而是判断“什么时候该降”——用户正在地铁隧道里刷网页，和在办公室连着千兆 Wi-Fi，同一张图的“合适清晰度”完全不同。静态 HTML 无法感知这些，必须结合服务端信号或轻量级客户端探测（比如首屏加载耗时 > 1.5s 时主动切换后续图片的 src）。
