image-rendering仅在图片真正被缩放时生效，对background-image、transform: scale()、高dpr自动选图等场景基本无效；pixelated仅放大有效，缩小必糊，crisp-edges才是放大缩小均禁用插值的可靠选择。
image-rendering 只在图片**真正被缩放**时才起作用，不是加了就生效。它对 background-image、transform: scale()、高 DPR 屏自动选图等场景基本无效，别白费劲。
为什么写了 image-rendering: pixelated 还是模糊
最常见原因是：浏览器根本没触发缩放逻辑。
-
<img>的width/height属性或 CSS 尺寸与图片原始尺寸一致 → 不缩放 →image-rendering被忽略 - 用了
srcset且浏览器加载了匹配 DPR 的高清图（比如设备 DPR=2 加载了 @2x 图）→ 实际未缩放 → 属性不生效 - 写在
background-image上 → Chrome/Edge 需额外加image-rendering: -webkit-optimize-contrast才可能响应，Firefox 也不稳定 - 用
transform: scale(2)缩放 → 插值发生在合成层，CSS 渲染层已无权干预
crisp-edges 和 pixelated 到底该用哪个
pixelated 名字听着准，但实际限制多；crisp-edges 才是当前最可靠的选择。
-
pixelated规范明确定义“仅用于放大”，缩小场景下所有浏览器都回退到auto→ 缩小必糊 -
crisp-edges在 Chrome 122+、Firefox、Edge 中行为一致，放大缩小都禁用插值，效果接近最近邻算法 - Safari 至今不支持
pixelated，但支持crisp-edges（并兼容-webkit-optimize-contrast） - 对像素图、图标、文字截图这类低分辨率素材，优先写
image-rendering: crisp-edges
Canvas 里画像素图，image-rendering 为啥完全没反应
因为 image-rendering 是 CSS 渲染层控制项，而 <canvas></canvas> 的绘制逻辑在 JS 层，两者不在一个控制域。
- 错误做法：设
<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 元素本身 - 给
<canvas></canvas>元素加image-rendering属性毫无意义
真正容易被忽略的点是：很多模糊问题压根不是 image-rendering 没配对，而是 DPR、srcset、transform 或 canvas 使用方式导致缩放路径绕过了它的控制范围。先确认是否真在缩放，再调属性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
