HTML图片降级实战教程-html教程-PHP中文网

图片降级成功需满足三条件：img的src必须始终可加载、source的type须与服务器content-type严格匹配、所有格式图原始像素尺寸完全一致，任一缺失将导致静默白屏。

html图片降级实战教程

直接说结论：图片降级不是加个 <picture></picture> 就完事，真正起作用的是三件事——<img> 的 src 必须永远可加载、<source></source> 的 type 必须和服务器返回的 Content-Type 严丝合缝、所有格式图的原始像素尺寸必须完全一致。漏掉任一环，降级就变成静默白屏。

为什么 `<source type="image/webp"></source>` 写了却还是加载 JPEG

浏览器根本没“尝试”加载 WebP，不是它不支持，而是链路中某处断了。最常见原因：

type="image/webp" 写对了，但服务器返回的响应头是 Content-Type: application/octet-stream 或空——Nginx 缺少 types { image/webp webp; } 配置，或 CDN 没透传 Accept: image/webp 请求头
<source></source> 顺序错了：把 type="image/jpeg" 放在了 type="image/webp" 前面，浏览器匹配到第一个就停，WebP 根本没机会被看到
本地双击打开 HTML 文件时，file:// 协议下多数浏览器会忽略 type 判断，直接跳过所有 <source></source>，只走 <img src> —— 所以开发阶段必须用本地服务（如 python3 -m http.server）测试

`<picture></picture>` 结构里 `<img>` 的 `src` 能不能写成 `logo.jpg?format=webp`

不能。这个 <img> 不是“备用选项”，它是旧浏览器（IE、Safari ≤13.1、旧 Android WebView）唯一能识别并加载的入口。一旦它失效，整个降级链就断了。

Article To Html

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

下载

src 必须指向一个静态、高可用、无需 JS 或服务端协商的资源，比如 /img/logo-fallback.jpg 或内联 base64 占位图
带查询参数的动态地址（如 ?format=webp）风险极高：CDN 缓存策略可能误判、后端服务挂掉时返回 500、甚至被某些代理截断参数
路径必须真实存在且可访问：本地开发用 ./logo.jpg，上线后若路由重写，应统一用根路径 /static/logo.jpg，避免相对路径错位

降级后图片突然拉伸或跳变，怎么锁定问题

这不是 CSS 写错了，是不同格式图的 intrinsic 尺寸（原始宽高像素值）不一致。浏览器加载 WebP 时按它的 EXIF 宽高算容器，切到 JPEG 时发现元数据缺失或数值不同，立刻重排布局。

用命令行验证：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></picture>、srcset、onerror 全部归零。