图片降级成功需满足三条件：img的src必须始终可加载、source的type须与服务器Content-Type严格匹配、所有格式图原始像素尺寸完全一致，任一缺失将导致静默白屏。
直接说结论：图片降级不是加个 <picture> 就完事，真正起作用的是三件事——<img> 的 src 必须永远可加载、<source> 的 type 必须和服务器返回的 Content-Type 严丝合缝、所有格式图的原始像素尺寸必须完全一致。漏掉任一环，降级就变成静默白屏。
为什么 <source type="image/webp"> 写了却还是加载 JPEG
浏览器根本没“尝试”加载 WebP，不是它不支持，而是链路中某处断了。最常见原因：
-
type="image/webp"写对了，但服务器返回的响应头是Content-Type: application/octet-stream或空——Nginx 缺少types { image/webp webp; }配置，或 CDN 没透传Accept: image/webp请求头 -
<source>顺序错了：把type="image/jpeg"放在了type="image/webp"前面，浏览器匹配到第一个就停，WebP 根本没机会被看到 - 本地双击打开 HTML 文件时，
file://协议下多数浏览器会忽略type判断，直接跳过所有<source>，只走<img src>—— 所以开发阶段必须用本地服务（如python3 -m http.server）测试
<picture> 结构里 <img> 的 src 能不能写成 logo.jpg?format=webp
不能。这个 <img> 不是“备用选项”，它是旧浏览器（IE、Safari ≤13.1、旧 Android WebView）唯一能识别并加载的入口。一旦它失效，整个降级链就断了。
-
src必须指向一个静态、高可用、无需 JS 或服务端协商的资源，比如/img/logo-fallback.jpg或内联 base64 占位图 - 带查询参数的动态地址（如
?format=webp）风险极高：CDN 缓存策略可能误判、后端服务挂掉时返回 500、甚至被某些代理截断参数 - 路径必须真实存在且可访问：本地开发用
./logo.jpg，上线后若路由重写，应统一用根路径/static/logo.jpg，避免相对路径错位
降级后图片突然拉伸或跳变，怎么锁定问题
这不是 CSS 写错了，是不同格式图的 intrinsic 尺寸（原始宽高像素值）不一致。浏览器加载 WebP 时按它的 EXIF 宽高算容器，切到 JPEG 时发现元数据缺失或数值不同，立刻重排布局。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 用命令行验证：
file logo.webp和file logo.jpg查看输出是否都明确写着800 x 450；如果 JPEG 显示data或no dimensions，说明 EXIF 被清空 - 修复 JPEG 元数据：
exiftool -ImageWidth=800 -ImageHeight=450 logo.jpg，强制写入 - 生成时统一尺寸：用
convert -resize 800x450\! input.png output.jpg（末尾\!表示强制拉伸并写死尺寸） - 终极兜底：放弃依赖图片自身尺寸，用
style="aspect-ratio: 16 / 9; object-fit: cover;"锁死容器比例——但注意 Safari ≤15.2 不支持aspect-ratio，需配padding-top降级
onerror 为什么经常不触发，怎么写才真生效
onerror 只响应“请求发出后失败”，对空 src、CORS 拦截、服务器返回 200 占位图等场景完全静默。它不是万能 fallback，只是最后一道防线。
- 必须内联写：
onerror="this.src='/img/placeholder.svg'; this.onerror=null"—— 动态绑定在 Safari 和旧 Edge 中大概率失效 -
this.onerror=null是关键，否则图片加载失败 → 触发 onerror → 换新 src → 新 src 又失败 → 再次触发 → 死循环 - 更稳妥写法：
onerror="if (!this.src.includes('placeholder')) this.src='/img/placeholder.svg'; this.onerror=null"，防止 fallback 图自己也挂了 - 最保险是内联 SVG：
onerror="this.src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIiBmaWxsPSIjZGZkIi8+PC9zdmc+'; this.onerror=null"，彻底规避路径和网络依赖
最容易被忽略的点：所有降级动作都假设你已确保 <img> 的 src 是真实可加载的。如果连这一步都靠 JS 注入或 SSR 失败时才补，那前面所有 <picture>、srcset、onerror 全部归零。
