根本原因是 pixelated 仅支持放大，缩小时浏览器回退到 auto 插值；缩小场景应改用 crisp-edges，它在现代浏览器中双向禁用平滑插值，且需确保图片通过 width/height 缩放、避免 transform 或 background-size，并注意图像格式与布局精度。
image-rendering 在像素图缩放时模糊，根本原因不是“兼容性差”，而是你用了 pixelated 去处理缩小场景——它在规范里就明确不支持缩小，所有浏览器都按此执行，这不是 bug，是设计。
为什么 pixelated 在缩小图片时完全没反应
给一张 64×64 的图设 width: 32px; height: 32px，加了 image-rendering: pixelated 还是糊，是因为该值语义就是“仅放大时启用最近邻插值”。缩小时浏览器直接退回到 auto（通常是双线性插值），边缘发灰、细节融掉。Chrome、Firefox、Safari 全部一致，不是某一家的锅。
- 响应式中用
@media把图片从 100px 缩到 50px，pixelated不生效是必然结果 - 想靠它保锐利？方向错了——缩小场景必须换值，不是调参数
- 别查兼容表了，
pixelated在 Safari 直至 iOS 17 都未被支持，连基础渲染都不走这路
缩小+放大都得清晰，只用 crisp-edges
crisp-edges 是目前唯一能在放大和缩小两个方向都禁用平滑插值的标准值，效果最接近最近邻算法，对像素图、UI 图标、文字截图这类低分辨率素材最稳妥。
- 必须补兼容旧版 Safari：
image-rendering: -webkit-optimize-contrast（≤ Safari 14） - 不要混写
pixelated和crisp-edges——后者会覆盖前者，且语义更匹配双向需求 - 现代 Chrome 122+、Firefox、Edge 中行为一致；Safari 15+ 原生支持
crisp-edges，无需前缀
image-rendering 失效的三个隐藏原因
即使写了正确的值，也常因底层条件不满足而“看起来没用”：
-
<img>必须通过width/height属性或内联style缩放；用transform: scale()或background-size时，该属性基本无效 - 图片若被
display: none、懒加载拦截，或样式在img.onload前就应用，image-rendering无法介入重绘流程 - 第三方 CSS（如 Tailwind、Normalize.css）可能注入
image-rendering: smooth，需用!important或更高优先级选择器覆盖
<canvas></canvas> 里画像素图，image-rendering 完全不管用
这个属性只作用于 CSS 渲染层，而 <canvas></canvas> 内部绘制走 JS 光栅管线，CSS 对 ctx.drawImage() 的插值逻辑毫无干预能力。
- ❌ 错误：设
<canvas width="32" height="32"></canvas>，再用 CSS 拉伸到 128×128，指望image-rendering救场 - ✅ 正确：保持
canvas.width/canvas.height为原始尺寸（如 32×32），然后 JS 中设ctx.imageSmoothingEnabled = false - ✅ 动态缩放时：用
ctx.scale(4, 4)+ctx.drawImage(img, 0, 0)，而不是拉伸<canvas></canvas>元素本身
真正容易被忽略的是：哪怕 crisp-edges 写对了，如果图片本身是 JPEG 压缩过度、PNG 没 alpha 却被半透明混合，或者容器 flex 布局导致非整数像素渲染，模糊感依然存在——这时候换图源或调布局，比反复改 CSS 更有效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
