卡片图片必须用<picture>降级而非仅改<img src>，否则不支持格式时图片盒模型消失导致高度塌陷、CLS飙升；<img>需提供真实JPG/PNG兜底且宽高比一致，确保布局稳定。
卡片里的图片必须用 <picture> 降级，不能只改 <img src>；否则旧浏览器或格式不支持时直接白屏，连占位都留不住。
为什么卡片布局里单写 <img src="x.webp"> 会出问题
卡片容器（比如 <div class="card">）本身不干预图片加载逻辑，但它的视觉稳定性极度依赖图片盒模型存在。一旦 <img> 的 src 指向一个浏览器不识别的格式（如 WebP 在 Safari ≤13.1、IE 或某些 Android WebView 中），浏览器不会报错，也不会触发 onerror，而是静默丢弃请求——结果就是卡片内只剩 alt 文本，高度塌陷，文字上推，CLS 值飙升。
-
<img src="logo.webp">在不支持 WebP 的环境里等于没写 - 卡片常用
aspect-ratio或padding-top技巧预留空间，但这些都依赖<img>元素被渲染出来；若<img>因格式失败未生成盒模型，所有预留逻辑失效 - 服务端未配对
Content-Type: image/webp时，<source type="image/webp">同样跳过，但至少<img>兜底还在
<picture> 在卡片中怎么写才不破 layout
卡片图片降级不是加个 <picture> 就完事，关键在结构和尺寸一致性。每个卡片内的图片必须保证：所有格式（AVIF/WebP/JPG）宽高比一致、构图对齐方式一致、且 <img> 的 src 是真实可访问的 JPG/PNG。
-
<source type="image/avif" srcset="card-400.avif 400w, card-800.avif 800w">放最前 -
<source type="image/webp" srcset="card-400.webp 400w, card-800.webp 800w">居中 -
<img src="card-400.jpg" alt="卡片主图描述" width="400" height="300">必须在最后，且src路径真实存在（推荐 CDN 托管，大小控制在 3–5KB） - 所有
srcset中的图片必须和<img>的width/height保持相同宽高比，否则切换格式时卡片拉伸或裁切偏移 - 禁用
<img>的内联width/height属性（除非你确定要固定像素尺寸），优先用 CSS 控制卡片内图片尺寸，例如.card img { width: 100%; height: auto; }
懒加载 + 卡片图片降级容易一起崩的点
卡片常配合 loading="lazy" 使用，但这个属性和降级是正交机制：不支持 loading="lazy" 的浏览器（如 Safari ≤15.4）会忽略它，但仍会加载 src；如果此时 src 是空、base64 或错误路径，卡片就空了。
立即学习“前端免费学习笔记（深入）”；
- 不要写
<img src="" loading="lazy" >——src为空时，不支持 lazy 的浏览器根本不会触发任何加载 - 正确做法：
<img src="placeholder.jpg" loading="lazy" >，其中placeholder.jpg是真实小图（非 base64）、尺寸匹配、带透明背景 - JS 加载成功后，需显式替换
src并移除loading="lazy"，否则 IntersectionObserver 可能重复触发 - 首屏卡片建议跳过懒加载：直接写
<img src="card-800.jpg">，不加loading，也不设data-src
微信 WebView 和低版本 Android 的特别处理
微信 iOS 内置 WebView 对 <picture> 的 type 和 srcset 支持极差，部分版本会忽略所有 <source>，只认 <img>；而 Android 4.4 WebView 根本不支持 <picture>，会直接跳过整个标签块。
- 确保
<img>的src是绝对路径（如/img/card-default.jpg），避免相对路径解析失败 - 禁用
<source>的media属性做格式降级——它和type不正交，微信里极易误判 - 如果业务强依赖 WebP，可在服务端根据
User-Agent或Accept头直出不同 HTML，而不是靠客户端 JS 动态替换 - 测试时务必在真机微信中打开 Network 面板，确认是否真的发出了
.webp请求，还是直接 fallback 到 JPG
卡片布局的图片降级，本质是把「格式兼容性」和「布局稳定性」绑在一起解决。最容易被忽略的是：哪怕 <picture> 结构完全正确，只要 <img> 的 src 是 404 或跨域不可读，整张卡片就失去兜底能力——它不是“降级失败”，是“根本没有降级入口”。
