如何通过HTML实现图片降级资源预备-html教程-PHP中文网

图片降级资源预备的核心是 srcset + sizes + picture，需组合使用 picture、source 和 img 实现按设备像素比、视口宽度及格式支持的精准资源切换，漏掉 sizes、误用 type 或绕过原生机制均会导致降级失效。

如何通过html实现图片降级资源预备

图片降级资源预备的核心是 `srcset` + `sizes` + `picture`

现代浏览器中，仅靠 src 无法实现真正可控的降级——它只是“必加载”，没有条件判断能力。真正能按设备像素比、视口宽度、甚至格式支持情况做资源切换的，必须组合使用 picture 元素和其子标签。

关键逻辑是：浏览器先解析 source 规则，匹配成功就加载对应 srcset 中最合适的资源；全部不匹配，才回退到内部 img 的 src（即降级兜底）。

`picture` 中的 `type` 属性决定格式降级优先级

当希望 WebP/AVIF 图片作为首选，JPEG/PNG 作为兼容后备时，type 是唯一可靠的声明方式。浏览器会跳过不支持的 type，继续尝试下一个 source。

Article To Html

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

下载

顺序很重要：把 type="image/avif" 放最前，type="image/webp" 居中，type="image/jpeg" 或 type="image/png" 放最后
不要在 type 中写错 MIME 类型，例如 image/jpg 是无效的，必须用 image/jpeg
img 标签本身不识别 type，所以格式降级必须包裹在 picture 内，否则无效

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

`srcset` 和 `sizes` 联合控制分辨率降级

只写 srcset 不写 sizes，浏览器会按 100vw 猜测显示宽度，导致高 DPR 设备错误加载小图。必须配对使用才能让浏览器正确选择资源。

sizes 值是媒体条件 + 宽度描述符的组合，例如 sizes="(max-width: 768px) 100vw, 50vw"
srcset 中每个资源需带宽度描述符（w）或像素密度描述符（x），推荐统一用 w 更可控
所有 w 描述符加起来不必覆盖全部可能宽度，浏览器只取最接近的匹配项

<picture><source media="(min-width: 769px)" srcset="hero-800w.jpg 800w,
            hero-1200w.jpg 1200w,
            hero-1600w.jpg 1600w" sizes="50vw"></source><source media="(max-width: 768px)" srcset="hero-mobile-400w.jpg 400w,
            hero-mobile-800w.jpg 800w" sizes="100vw"></source>
  @@##@@
</picture>

JavaScript 动态降级时别绕过 `picture` 流程

有人用 JS 检测 supports('image/avif') 后手动改 img.src，这会破坏浏览器原生的预加载、懒加载、响应式资源选择机制，且无法触发 loading="lazy" 的优化路径。

动态场景下，应操作 picture 内部的 source 和 img 的 src，而不是直接改 img 的 src
如果必须 JS 控制，优先用 document.createElement('source') 插入新 source，再调用 img.removeAttribute('src') 强制浏览器重新评估
注意 Safari 对动态插入 source 的兼容性：需在插入后显式调用 img.load()（仅部分版本需要）