image-rendering 在像素画缩放时未生效，因浏览器默认忽略其对背景图、 或 css 裁剪图像的缩放控制，尤其在高 dpr 屏或 transform: scale() 下完全失效；仅对原生尺寸的 、 输出稳定生效。
image-rendering 在像素画缩放时为什么没生效
因为浏览器默认忽略 image-rendering 对背景图、<img alt="CSS图像渲染模式_image-rendering优化像素图缩放" > 或 CSS 裁剪后的图像的某些缩放场景，尤其在高 DPR 屏幕或使用 transform: scale() 时完全失效。
- 只对直接渲染的位图（如原生尺寸的
<img alt="CSS图像渲染模式_image-rendering优化像素图缩放" >、<canvas></canvas>输出）稳定起效 - 用
background-image+background-size缩放时，Chrome/Edge 需加image-rendering: -webkit-optimize-contrast才勉强响应 - Firefox 对
crisp-edges支持最完整，Chrome 122+ 才开始真正支持标准值
pixel-art 类图像该用 crisp-edges 还是 pixelated
crisp-edges 是更稳妥的选择 —— 它强制禁用插值，且在所有支持 image-rendering 的现代浏览器中行为一致；pixelated 虽语义更准，但 Safari 目前仍不支持，Chrome 旧版本会回退到 auto。
-
crisp-edges：实际效果 ≈ 最近邻插值，适合 2×、4× 等整数倍缩放 -
pixelated：规范定义为“仅用于放大”，但实测在缩小场景下部分浏览器会意外模糊 - 别依赖
auto或smooth：它们对像素图就是灾难，边缘糊成一团
Canvas 绘制像素图时 image-rendering 不起作用怎么办
因为 image-rendering 是 CSS 渲染层控制项，对 <canvas></canvas> 内部绘制逻辑无效 —— 缩放必须由 JS 控制，不能靠 CSS 拉伸 canvas 元素本身。
- 正确做法：保持
<canvas></canvas>的width/height为原始像素尺寸（如 32×32），用ctx.imageSmoothingEnabled = false - 错误做法：设 canvas 元素 CSS width/height 为 128×128，指望
image-rendering把它“硬拉”清晰 - 如果必须动态缩放，用
ctx.scale(4, 4)+ctx.drawImage()原图，而非拉伸 canvas DOM 尺寸
移动端和 Retina 屏上像素图发虚的隐藏原因
不是 image-rendering 失效，而是设备像素比（DPR）导致浏览器先按物理像素渲染再缩放，插值发生在更底层，CSS 已无法干预。
立即学习“前端免费学习笔记（深入）”；
- 解决路径：提供 2x/3x 原图（如 64×64 图配
srcset="sprite@2x.png 2x"），让浏览器选最匹配 DPR 的资源 - 避免用
width: 32px; height: 32px强制压缩高清图，这等于主动触发降采样 - 在
<meta name="viewport">中不要设initial-scale=1.0以外的值，否则可能触发额外缩放层
真正麻烦的是混合场景：比如用 CSS Grid 布局像素图，又开启 will-change: transform，这时候连 crisp-edges 都可能被 GPU 合成绕过。得关掉硬件加速，或者改用 contain: strict 隔离渲染上下文。
