HTML图片格式兼容降级技巧-html教程-PHP中文网

必须用显式声明降级链，因旧浏览器不识别 webp；type 值须与服务器 content-type 完全一致，nginx 需配置 types，cdn 需透传 accept 头，是老浏览器唯一入口且不可省略，intrinsic 尺寸不一致会导致布局跳变。

html图片格式兼容降级技巧

直接写 <img src="x.webp"> 在 Safari ≤13.1、IE、旧版 Android WebView 中必然空白，这不是加载失败，而是浏览器压根不识别 image/webp，连请求都不发——必须用 <picture></picture> 显式声明降级链。

为什么 `<source type="image/webp"></source>` 写了却没生效

浏览器只认标准 MIME 类型字符串，且要求与服务器返回的 Content-Type 响应头完全一致。错一个字符或服务端配置漏掉，就静默跳过。

type="webp"、type="image/webp "（末尾空格）、type="image/jpg" 全部无效；正确写法只有 type="image/webp"
Nginx 未配 types { image/webp webp; }，.webp 文件会被当成 application/octet-stream，浏览器拒绝解码
CDN 没透传 Accept: image/webp 请求头，后端无法判断能力，统一返回 JPEG，导致 <source></source> 匹配失败但不报错
本地双击打开 HTML 时，相对路径如 src="logo.webp" 可能因协议为 file:// 被拦截；改用 src="./logo.webp" 更可靠

`<picture></picture>` 的 `<source></source>` 顺序为什么不能乱

浏览器从上到下逐条匹配：第一个 type 被支持 *且* 对应资源可成功解码（文件存在、格式合法、网络可达），就立即加载并终止后续检查。这不是“备选列表”，是硬性执行逻辑。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

image/avif 必须放最前：Chrome/Firefox/Edge 新版本优先用，旧 Safari 自动跳过
image/webp 居中：覆盖 iOS 14+、Android 4.0+、绝大多数桌面浏览器
image/jpeg 不能写成第三个 <source></source>：它只是格式 fallback，不是响应式 fallback；必须放在末尾 <img src="logo.jpg"> 的 src 里才起作用
漏掉 <img> 标签，整个结构在旧环境就是空白——<picture></picture> 本身不渲染也不发请求

`<img>` 的 `src` 和 `alt` 为什么不可省略

<img> 不是“备用 source”，而是所有不支持 type 的老浏览器（IE、旧 WebView）唯一能识别的入口。它的 src 是强制兜底地址，alt 是语义与无障碍底线。

src 必须指向静态、可直访的 JPEG/PNG：不能带查询参数（如 ?format=webp），否则旧浏览器可能返回 406 或损坏数据
alt 缺失会导致屏幕阅读器无法读图、SEO 抓取降权、无图环境下纯文本断裂
路径必须全用正斜杠 /：写成 ..images/logo.jpg（缺 /）或 .\logo.jpg（Windows 反斜杠）会解析失败
首屏关键图建议加 fetchpriority="high" 提升 LCP，但只能加在 <img> 上，加在 <source></source> 无效

所有格式图片宽高不一致引发的视觉跳变

你看到的“比例失调”，其实是 WebP 和 JPEG 的 intrinsic 尺寸（原始像素宽高）不一致，导致浏览器切换格式时重算高度，触发 layout shift。

用 file logo.webp 和 file logo.jpg 确认二者是否逐像素一致；CMS 导出、tinypng 旧版压缩常抹除 JPEG EXIF 宽高字段，让浏览器误判为“无尺寸”
生成 JPEG 时强制写死尺寸：convert -resize 800x450\! input.png output.jpg（末尾 \! 表示拉伸并写入元数据）
若无法统一 intrinsic 尺寸，改用 CSS 容器控制比例：style="aspect-ratio: 16 / 9; object-fit: cover;"；Safari ≤15.2 需降级为 padding-top: 56.25% + 绝对定位子元素
绝对不要在同一个 <picture></picture> 里混用 width/height 属性和 aspect-ratio，它们冲突且行为不可控

最容易被忽略的点：降级链里任意一环（type 字符串、服务器 Content-Type、<img src> 路径、intrinsic 尺寸）出问题，都不会报错，只会静默留白或跳变——得靠 Array.from(document.images).filter(i => i.naturalWidth === 0) 这类手段主动排查，而不是等用户反馈。