根本原因是jpeg/png兜底图与webp/avif图的intrinsic尺寸（原始宽高比）不一致，导致浏览器在切换格式时按不同元数据计算高度，引发layout shift；必须确保所有格式图片逐像素宽高一致，或用css容器aspect-ratio强制统一比例。
为什么降级后图片突然变形
根本原因不是格式切换本身，而是 JPEG/PNG 兜底图和 WebP/AVIF 图的 intrinsic 尺寸（原始宽高比）不一致。浏览器加载 WebP 时按它的元数据算高度，切到 JPEG 时却按另一套尺寸重排，导致 layout shift 或视觉跳变。你看到的“比例失调”，其实是两套原始尺寸在同一个 CSS 框里打架。
- 检查每张图的真实宽高：用
file命令（macOS/Linux）或在线 EXIF 查看器确认logo.webp和logo.jpg的像素尺寸是否完全相同 - CMS 导出、微信转发、tinypng 旧版压缩都可能抹除 JPEG 的 EXIF 宽高字段，让浏览器误判为“无尺寸”，退化成
width: 100%+ 高度塌陷 - WebP 文件若带 ICC 色彩配置但未嵌入宽高，部分 Android WebView 会 fallback 到 0×0，再靠 CSS 强撑——这时
max-width: 100%也救不了
兜底图必须和 WebP 保持完全一致的原始尺寸
别指望浏览器“自动对齐”。<img src="logo.jpg"> 的尺寸必须是硬编码匹配的——不是“差不多”，是逐像素一致。否则 aspect-ratio 或 object-fit 都会失效，因为它们依赖的是图片自身的 intrinsic 尺寸，而不是你写的 CSS。
- 生成 JPEG 时加参数强制写入宽高：
convert -resize 800x450\! input.png output.jpg（末尾\!表示强制拉伸并写死尺寸） - 用
exiftool -ImageWidth=800 -ImageHeight=450 logo.jpg手动补全缺失的 EXIF 字段 - 避免用 CDN 动态转码路径作兜底：
src="logo.jpg?x-oss-process=image/resize,w_800"返回的 JPEG 往往不带完整元数据，且 HTTP 响应头Content-Type可能不稳定
用 CSS 锁死容器比例，绕过图片自身尺寸干扰
当无法确保所有格式图片的 intrinsic 尺寸一致时，唯一可靠的方式是放弃依赖图片元数据，改由容器定义比例。此时 aspect-ratio 是首选，但要注意 Safari ≤15.2 不支持，得配 padding-top 降级。
- 现代写法：
style="width: 100%; aspect-ratio: 16 / 9; object-fit: cover;"——aspect-ratio定义容器框，object-fit控制图片怎么填进去 - Safari 15.2- 兜底：
position: relative; padding-top: 56.25%;+ 子元素position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; - 绝对不要在同一个
<picture></picture>结构里混用width/height属性和aspect-ratio，前者会覆盖后者的 intrinsic 尺寸推导逻辑
image-rendering 对降级失真基本无效
image-rendering: crisp-edges 只影响缩放插值算法，解决不了 intrinsic 尺寸错位这个根源问题。它可能让模糊更“锐利”，但不会让 JPEG 和 WebP 在同一容器里高度一致。尤其在 <picture></picture> 场景下，不同 <source></source> 加载后 DOM 节点不变，CSS 规则生效逻辑一致，该变形还是变形。
- 真正要干预渲染质量的地方是生成环节：WebP 用
-q 85，JPEG 用-quality 92 -sampling-factor 1x1,1x1,1x1 - 如果必须用低质量压缩，优先压 WebP，再用高质量 JPEG 作兜底——这样至少 fallback 时画质不降级
-
image-rendering在 Safari 上支持极差，Chrome/Firefox 行为也不统一，不能作为比例控制手段
最易被忽略的一点：服务器返回的 Content-Type 必须和 <source type></source> 完全一致。哪怕 logo.jpg 文件名正确，若服务器返回 Content-Type: image/jpg，Safari 就会跳过这条 <source></source>，直接 fallback 到 <img>——而这时你根本收不到任何报错，只看到一张莫名变形的图。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
