image-rendering: pixelated 对小图标无效，因它仅在放大时强制最近邻插值，缩小退化为双线性插值；真正有效的是 crisp-edges + 整数宽高 + srcset 适配 DPR，并避开 transform 和 background-image。
直接给 <img alt="如何使用CSS image-rendering属性解决低像素图标模糊问题？" > 加 image-rendering: pixelated 基本无效，尤其在移动端或缩小时；真正起效的路径是：用 crisp-edges + 整数倍 width/height + srcset 适配 DPR，且必须避开 transform 和 background-image。
为什么 image-rendering: pixelated 对小图标没用？
它只在放大时强制最近邻插值，缩小就退化为 auto（双线性插值），结果边缘发灰、颜色融化。常见错误包括：
- 给 16×16 图标设
width: 8px，以为pixelated能保锐利——实际完全不生效 - 在
@media中响应式缩小尺寸，却没换用crisp-edges - 依赖它解决 Retina 屏模糊，但
srcset没配，加载的仍是 @1x 图
crisp-edges 才是像素图的稳妥选择
它在放大和缩小两个方向都禁用平滑插值，效果接近最近邻算法，对低分辨率图标、文字截图、UI 精灵图最稳：
- 现代浏览器（Chrome 89+、Firefox 78+、Safari 15.4+）均支持
crisp-edges，行为一致 - 必须搭配
width/height属性（不是max-width或transform）才能触发重采样 - 旧版 Safari（≤14）需补
image-rendering: -webkit-optimize-contrast，否则失效 - 示例写法：
img.pixel-icon {<br> image-rendering: -webkit-optimize-contrast;<br> image-rendering: crisp-edges;<br> width: 32px;<br> height: 32px;<br>}
移动端模糊别怪 image-rendering，先查 srcset 和 DPR
iPhone 或 MacBook 上仍模糊，大概率不是 CSS 失效，而是资源没换：
立即学习“前端免费学习笔记（深入）”；
- 检查 Network 面板：是否加载了
icon@2x.png？若始终是@1x，image-rendering再强也救不回原始分辨率 -
srcset必须带x描述符，如<img src="icon.png" srcset="icon.png 1x, icon@2x.png 2x" alt="如何使用CSS image-rendering属性解决低像素图标模糊问题？" > - 不要用
transform: scale(2)拉伸图片——该操作绕过image-rendering，浏览器在合成层直接插值 - 第三方 CSS（如 Tailwind、Normalize）可能注入
image-rendering: smooth，需用!important或更高优先级覆盖
<canvas></canvas> 里画像素图，image-rendering 完全不相关
这是最容易踩的坑：image-rendering 是 CSS 渲染层属性，对 <canvas></canvas> 内部绘制零影响：
- 错误做法：给
<canvas width="32" height="32"></canvas>设image-rendering: pixelated，再用 CSS 拉伸到 128×128 - 正确做法：保持 canvas 物理尺寸为原始像素（如 32×32），然后 JS 中设置
ctx.imageSmoothingEnabled = false，再用ctx.scale(4, 4)或整数倍drawImage() - 若 canvas 被 CSS 缩放（如
width: 128px），浏览器会对整个 canvas 输出做二次插值——此时image-rendering只作用于 canvas 元素本身，无法干预内部绘制
真正决定清晰度的，从来不是单个 CSS 属性，而是「资源分辨率 + 缩放方式 + 插值控制」三者配合。漏掉任意一环，image-rendering 就只是贴在错误对象上的创可贴。
