image-rendering仅对标签的width/height缩放及的js绘制有效，对background-image、transform: scale()和高dpr屏幕自动缩放基本无效；crisp-edges兼容性好且效果稳定，pixelated仅限放大且支持有限。
直接说结论：用 image-rendering 能干预浏览器缩放图片时的插值算法，但只对原生 <img> 元素或 <canvas></canvas> 输出有效，对 background-image、transform: scale() 或高 DPR 屏幕下的自动缩放基本无效。
什么时候 image-rendering 才真正起作用
它只在浏览器对位图做「直接像素重采样」时生效，典型场景是：<img> 标签通过 width/height 属性强制缩放，且未被其他 CSS（如 transform）覆盖。
- ✅ 有效：
<img src="sprite.png" style="max-width:90%" style="max-width:90%">+image-rendering: pixelated - ❌ 无效：
background: url(sprite.png); background-size: 64px 64px;—— Chrome/Edge 需额外加-webkit-optimize-contrast才可能响应 - ❌ 无效：
transform: scale(2)—— 此时插值发生在合成层，CSS 层已无权干预 - ⚠️ 半失效：移动端高 DPR 屏（如 iPhone）—— 浏览器先按物理像素渲染再缩放，
image-rendering拦不住底层插值
crisp-edges 和 pixelated 到底怎么选
别被名字迷惑：pixelated 语义更准，但兼容性差；crisp-edges 是目前最稳妥的“像素友好型”取值。
-
crisp-edges在所有现代浏览器中行为一致，实际效果 ≈ 最近邻插值，适合整数倍缩放（2×、4×），边缘锐利不糊 -
pixelated在 Safari 中仍不支持，Chrome 122+ 才开始稳定支持；且规范定义它“仅用于放大”，实测缩小场景下部分浏览器会回退到模糊的auto -
smooth和auto对像素图就是灾难——边缘发虚、细节融化，千万别用 - 旧值如
optimizeSpeed已废弃，不要写进代码
Canvas 里画像素图，image-rendering 为啥没反应
因为 image-rendering 是 CSS 渲染层控制项，而 <canvas></canvas> 的绘制逻辑在 JS 上下文里，CSS 对其内部缩放完全失能。
- ❌ 错误做法：设
<canvas width="32" height="32"></canvas>，再用 CSS 拉伸到128px × 128px，指望image-rendering救场 - ✅ 正确做法：保持
canvas.width/canvas.height为原始像素尺寸（如 32×32），然后 JS 里设ctx.imageSmoothingEnabled = false - ✅ 动态缩放时：用
ctx.scale(4, 4)+ctx.drawImage(img, 0, 0)，而不是拉伸 canvas 元素本身
真正影响清晰度的隐藏因素比 image-rendering 更关键
很多人调了半天 image-rendering 没效果，问题根本不在它身上。
- 高 DPR 屏发虚？不是 CSS 失效，是没提供
@2x图。该用srcset：<img src="icon.png" srcset="icon@2x.png 2x"> - 用
width: 32px; height: 32px压缩一张 512×512 的高清图？等于主动触发降采样，再好的image-rendering也救不回来 - UniApp 或小程序里模糊？跨平台渲染引擎差异大，
image-rendering支持程度不一，优先查目标平台文档，别默认它可用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
