image-rendering: pixelated仅在整数倍放大且作用于<canvas>元素时有效，对<img>基本无效；缩小必糊，应改用crisp-edges并配合ctx.imageSmoothingEnabled=false及正确srcset配置。
直接说结论：image-rendering: pixelated 不能单独解决图片模糊问题，它只在「整数倍放大」时生效，且对 <img> 元素本身基本无效——真正起作用的位置是 <canvas> 元素，或需配合 srcset、ctx.imageSmoothingEnabled = false 等条件才可能见效。
为什么给 <img> 加 image-rendering: pixelated 没反应
浏览器对 <img> 的缩放渲染不走 image-rendering 控制路径，尤其当图片通过 width/height 属性缩放时，该属性在多数引擎中被忽略：
- Chrome/Firefox：仅对
background-image缩放有弱响应，需额外加-webkit-optimize-contrast才可能触发 - Safari（14 及更早）：完全不识别
pixelated，也不响应crisp-edges，必须用-webkit-optimize-contrast - DevTools 显示 computed 值为
pixelated≠ 实际生效，这是样式解析成功但渲染管线未采纳的典型表现
image-rendering: pixelated 的真实生效场景
它只在以下两个条件同时满足时起效：
- 目标元素是
<canvas>，且该 canvas 正在被 CSS 缩放（如canvas { width: 128px; height: 128px; }，但其width/height属性仍为32） - 图片正被 JS 通过
ctx.drawImage()放大绘制（例如从 32×32 源图绘制到 128×128 区域）
此时必须同时设置：
立即学习“前端免费学习笔记（深入）”；
canvas {
image-rendering: -webkit-optimize-contrast;
image-rendering: -moz-crisp-edges;
image-rendering: -o-crisp-edges;
image-rendering: crisp-edges;
image-rendering: pixelated;
}
顺序不能乱——旧引擎按声明顺序取第一个合法值，pixelated 必须放最后。
缩小图片时 pixelated 完全失效，该用什么
pixelated 在规范中明确定义为「仅放大生效」，缩小即退化为 auto（双线性插值），结果就是发灰、糊边。真实项目中更常用且稳妥的是：
-
image-rendering: crisp-edges：现代浏览器均支持，放大缩小都强制最近邻插值，像素图边缘锐利 - 必须搭配
-webkit-optimize-contrast：Safari 14 及更早唯一可靠 fallback，缺了它在 iOS 上大概率白写 - 避免用于照片类图像——会加剧色阶断裂，只适合像素画、UI 图标、文字截图等低频位图
移动端和 Retina 屏依然模糊？别怪 image-rendering
根本原因几乎从来不是这个属性没生效，而是：
-
srcset写错或缺失sizes，导致加载了@1x图而非@2x/@3x资源 - Canvas 绘制时没关
ctx.imageSmoothingEnabled，或 canvas 自身被 CSS 拉伸而非用transform: scale()容器放大 - Tailwind 或 CSS 重置库悄悄注入了
image-rendering: smooth，覆盖了你的设置
真正关键的一步常被跳过：先确认你加载的到底是哪张图，再谈怎么渲染它。
