如何使用HTML处理高清图片降级显示-html教程-PHP中文网

srcset和sizes不能直接解决高清图降级，因浏览器默认偏向保清晰而非省流量；真正降级需用picture+media按网络质量或用户偏好主动干预，并配合服务端Vary: Save-Data缓存分层。

如何使用html处理高清图片降级显示

为什么 `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">
  @@##@@
</source></source></source></picture>

注意：save-data 在 Chrome/Firefox 中有效，但 Safari 目前不支持；prefers-reduced-motion 是更通用的降级触发点。

media 属性必须写在 <source></source> 上，顺序影响匹配优先级（从上到下）
没匹配到任何 <source></source> 时，才回退到 <img src="cat-fallback.jpg" alt="cat">
不要在 <source></source> 中混用 srcset 和 media 以外的属性（比如 type），否则部分旧浏览器会跳过整条规则

服务端配合：用 `Vary: Save-Data` 缓存分层

CDN 或 Nginx 可以识别请求头 Save-Data: on，返回不同尺寸/格式的图片，并设置响应头 Vary: Save-Data，避免缓存污染。

Nginx 示例配置片段：

Wechat Article Html

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

下载

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-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">
  @@##@@
</source></source></picture>

注意：type 属性只校验 MIME 类型，不校验实际编码是否合规；有些 AVIF 文件即使声明了 type="image/avif"，在 Safari 16.4 之前也会静默失败，所以 <img src="/cat.jpg"> 的 fallback 必须是真实可用的 JPEG/PNG。