image-rendering: pixelated 仅在放大时生效，缩小无效；应改用 crisp-edges（配合 -webkit-optimize-contrast 兼容旧版 Safari），且需确保图片尺寸、加载方式及容器布局正确。
image-rendering: pixelated 在图片缩小时完全不生效，不是配置错了，是规范如此——它只管放大，不管缩小。 想靠它解决“缩小后发虚”，从一开始方向就偏了。
为什么 pixelated 缩小图片时没反应
这是 CSS 规范明确定义的行为：pixelated 语义就是“仅在图像被放大时启用最近邻插值”，缩小场景下浏览器直接退回到 auto（通常是双线性插值），结果就是边缘糊、颜色灰、细节融掉。
- 常见现象：给 64×64 像素图设
width: 32px; height: 32px，加了image-rendering: pixelated依然模糊 - 更隐蔽的情况：响应式布局中用
@media把图片从 100px 缩到 50px，期望保持块感，实际失效 - 别怪浏览器——Chrome、Firefox、Safari 都按规范执行，这不是 bug，是设计
缩小场景该用 crisp-edges 而不是 pixelated
crisp-edges 是目前唯一能在**放大和缩小两个方向**都禁用平滑插值的可靠取值，效果接近最近邻算法，对像素图、UI 图标、文字截图等低分辨率素材更稳妥。
- 现代浏览器（Chrome 122+、Firefox 78+、Safari 15.4+）原生支持
crisp-edges - 为兼容旧版 Safari（≤14），必须补一行
image-rendering: -webkit-optimize-contrast - 不要混用
pixelated和crisp-edges—— 后者会覆盖前者，且语义更匹配缩小需求 - 示例写法：
img.pixel-art {<br> image-rendering: crisp-edges;<br> image-rendering: -webkit-optimize-contrast;<br>}
Canvas 里设 pixelated 是无效操作
image-rendering 是 CSS 渲染层控制项，只影响 <img> 或背景图这类合成阶段的缩放；而 <canvas> 内部绘制走 JS 光栅管线，CSS 对其内部 drawImage 的插值逻辑完全失能。
立即学习“前端免费学习笔记（深入）”；
- 错误做法：给
<canvas width="32" height="32">加image-rendering: pixelated，再用 CSS 拉伸到 128px × 128px - 正确做法：保持
canvas.width/canvas.height为原始尺寸（如 32×32），然后 JS 中设ctx.imageSmoothingEnabled = false - 若需动态缩放，用
ctx.scale(4, 4)+ctx.drawImage(img, 0, 0)，而非拉伸 canvas 元素本身
真正决定清晰度的，往往不是 image-rendering
很多人调了半天没效果，问题根本不在这个属性身上。它只是“最后一道渲染开关”，但前提是：图片已被正确加载、未被 transform 干扰、容器尺寸未触发隐式缩放。
- 移动端 Retina 屏模糊？大概率是
srcset写错或缺失sizes，导致浏览器加载了 @1x 图，crisp-edges只能把糊图“锐化显示”，不是变高清 - 用了
max-width: 100%却忘了父容器有transform: scale()或 flex 布局偏差，图片实际渲染尺寸 ≠ 自然尺寸，image-rendering就不会触发 -
background-image完全不响应该属性，必须改用<img>标签 + CSS 容器控制，或媒体查询手动切换资源
