图片自动降级指浏览器原生通过和srcset机制，按从上到下匹配支持的格式（如avif→webp→jpg），无需js检测、不发多余请求、不闪屏，最终以中的jpg为可靠兜底。

图片自动降级是什么意思

它不是指让高清图变模糊，而是当现代格式（如 webp、avif）加载失败或浏览器不支持时，自动 fallback 到 jpg 或 png。关键在「不用 JS 检测、不发多余请求、不闪白屏」——靠浏览器原生的 <picture></picture> 和 srcset 机制就能做到。

的 fallback 顺序怎么写才可靠

浏览器按 <source></source> 标签从上到下尝试，遇到第一个能解析且支持的格式就加载它，后面的全跳过。所以要把最先进、最小的放最上面，最通用的（jpg）必须放在 <img> 的 src 里，作为最终兜底。

常见错误是把 jpg 放进某个 <source></source>，结果 Safari 16.4+ 对 type="image/jpeg" 解析不稳定，导致降级失效。

• <source></source> 的 type 值必须严格匹配 MIME 类型，比如 image/webp，不能写成 webp 或 .webp
• 所有 <source></source> 必须在 <img> 标签之前，否则会被忽略
• <img> 的 src 必须存在且可访问，否则整个 <picture></picture> 渲染为空白

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

为什么有时候降级没生效

最常踩的坑是服务器没正确返回 Content-Type。比如 Nginx 默认把 .webp 当作 application/octet-stream，浏览器看到 type="image/webp" 但响应头不是 image/webp，就会跳过这个 <source></source>。

Article To Html

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

下载

另一个隐形问题是缓存：如果用户首次访问时 webp 加载失败（比如 CDN 缓存了 404 响应），浏览器可能记住“这个 URL 不可用”，后续即使修复了也不再尝试——这不是规范行为，但 Chrome 95–102 确实出现过类似 bug。

• 用 curl -I https://yoursite.com/logo.webp 检查响应头中的 Content-Type
• 开发期可在 DevTools 的 Network 面板里点开 logo.webp，看 Initiator 是 HTMLParser 还是 Other；如果是后者，说明被 JS 干扰了
• 避免给 <source></source> 加 media 属性做降级逻辑，那会混淆语义——降级只看 type，不看屏幕尺寸

要不要加 JS 做二次检测

不需要。现代浏览器对 <picture></picture> 的 type 匹配已非常稳定，连 IE Edge Legacy 都支持。加 JS 反而增加竞态风险：比如 JS 还没执行完，<img src="logo.jpg" alt="Logo"> 就开始加载 jpg，造成重复请求。

唯一值得 JS 干预的场景是动态生成图片 URL（比如 CMS 返回的字段不确定格式），这时可以用 document.createElement('img') + onload/onerror 做运行时探测，但那是另一类问题，不属于「自动降级」范畴。

真正容易被忽略的是：所有 fallback 图片（jpg）必须和高级格式保持完全一致的宽高比和视觉质量，否则降级后会出现布局偏移或色差——这不在 HTML 能解决的范围，但却是降级体验是否“透明”的关键。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！