浏览器默认双线性插值无法关闭，失真根源在于渲染时像素数不匹配；真正有效的是在html中显式设置img的width/height属性以固定宽高比，并配合max-width:100%、sizes和精确控制资源加载与缩放上下文。
浏览器对缩放图片默认用双线性插值，这是失真的根源；但你没法关掉它，只能绕开——关键在标记阶段就控制渲染上下文。
为什么 object-fit: none 不能解决插值失真
很多人以为加了 object-fit: none 就能“保留原图尺寸不拉伸”，其实这只是禁用了裁剪和缩放逻辑，图片仍会被浏览器按容器尺寸重采样。只要最终渲染像素数 ≠ 原图像素数（比如把 1200×800 的图塞进 300px 宽的容器），GPU 就会触发插值计算，双线性是默认且不可关闭的。
真正起作用的是：让浏览器「认为」不需要缩放。
- 给
<img>设置与原始分辨率一致的width和height属性（如width="1200" style="max-width:90%"），哪怕它最终被 CSS 压缩 - 配合
style="max-width: 100%; height: auto;"，这样浏览器在布局阶段就知道原始宽高比，插值输入源更稳定 - 避免只写
width: 100%+height: auto而不设 HTML 属性——此时浏览器无原始参考，插值起点模糊
sizes 属性缺失导致的隐性失真
没写 sizes，浏览器就按 100vw 推算所需图片宽度，结果可能下载一张 2400w 的图，再强行缩放到 320px 宽显示——两次缩放：服务端降采样 + 客户端重采样，失真叠加。
正确做法是让 sizes 精确反映图片在各断点下的**实际占用宽度**：
- 如果 CSS 中
@media (max-width: 768px) { .hero-img { width: 100vw; } }，对应sizes="(max-width: 768px) 100vw, 50vw" - 值必须是长度单位（
px、vw、em），不能是百分比或无单位数字 - 多个条件用逗号分隔，顺序无关，但建议按断点从窄到宽排列，便于人读
<picture></picture> 中 <source></source> 匹配失败的静默陷阱
所有 <source></source> 都没被选中时，浏览器直接加载 <img> 的 src，你根本看不到报错——但这就意味着你写的响应式逻辑完全没生效，全靠兜底图硬撑，失真和带宽浪费同时发生。
排查要点很具体：
-
media值必须是合法媒体查询，比如(max-width: 768px)缺括号就失效 -
type必须和服务器返回的Content-Type字符串逐字符一致，image/webp和image/webp;（多一个分号）就不匹配 -
<source></source>必须在<img>标签之前，DOM 顺序错位等于没写 -
<img>的src不能为空，否则整个<picture></picture>渲染失败
WebP/AVIF 降级时的尺寸一致性管理
用 <picture></picture> 提供 WebP，但 fallback 的 JPEG 尺寸若和 WebP 不一致（比如 WebP 是 1200×800，JPEG 是 1198×799），浏览器在切换格式时会触发 layout shift，视觉上就是“闪一下”，用户感知为失真。
预防方式非常机械但有效：
- 所有同语义的图片源（同一张图的不同格式）必须用相同原始分辨率导出
- 用工具批量检查：
identify -format "%wx%h" *.webp *.jpg（ImageMagick） - 构建流程里加校验脚本，发现尺寸偏差自动报错，不许合入
最麻烦的不是写对标签，而是让每张图在进入 HTML 之前，就已经带着正确的尺寸、格式、命名和路径准备好——标记管理本质是资产治理，不是写代码。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
