pixelated在图片缩小时完全无效，因其规范明确定义仅用于放大；缩小应改用crisp-edges（配合-webkit-optimize-contrast兼容旧版safari），且需确保图片正确加载、未被transform干扰、容器布局合理。
因为 image-rendering 不是“全局清晰开关”，它只在特定缩放场景下生效，且不同取值对放大和缩小的处理逻辑根本不同——用错值或用错地方，模糊就躲不掉。
为什么 pixelated 在图片缩小时完全没用？
这不是 bug，是规范明确定义的行为：pixelated 语义就是“仅在图像被放大时启用最近邻插值”，缩小场景下浏览器直接退回到 auto（通常是双线性插值），结果就是边缘发虚、颜色灰、细节融掉。
- 常见现象：给 64×64 像素图设
width: 32px; height: 32px，加了image-rendering: pixelated依然模糊 - 更隐蔽的情况：响应式布局中用
@media把图片从 100px 缩到 50px，期望保持块感，实际失效 - 别怪浏览器——Chrome、Firefox、Safari 都按规范执行，这不是兼容性问题，是设计如此
crisp-edges 才是缩小场景的可靠选择
crisp-edges 是目前唯一能在放大和缩小两个方向都禁用平滑插值的取值，效果接近最近邻算法，对像素图、UI 图标、文字截图等低分辨率素材更稳妥。
- 必须补一行
image-rendering: -webkit-optimize-contrast兼容旧版 Safari（≤14） - 不要混用
pixelated和crisp-edges——后者会覆盖前者，且语义更匹配缩小需求 - 示例写法：
img.pixel-art {<br> image-rendering: crisp-edges;<br> image-rendering: -webkit-optimize-contrast;<br>}
为什么给 <canvas></canvas> 加 image-rendering 没反应？
image-rendering 是 CSS 渲染层控制项，只影响 <img> 或背景图这类合成阶段的缩放；而 <canvas></canvas> 内部绘制走 JS 光栅管线，CSS 对其内部 drawImage 的插值逻辑完全失能。
- 错误做法：给
<canvas width="32" height="32"></canvas>加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
很多人调了半天没效果，问题根本不在这个属性身上。它只是“最后一道渲染开关”，但前提是：
- 图片已被正确加载（比如未被
display: none或懒加载拦截） - 未被
transform: scale()干扰——此时插值发生在合成层，CSS 层已无权干预 - 容器尺寸未触发隐式缩放（比如父容器用了
flex或grid自动拉伸） - 高 DPR 屏幕（如 iPhone）下，浏览器先按物理像素渲染再缩放，
image-rendering拦不住底层插值
这些隐藏条件比选哪个值更容易被忽略，也更常成为模糊的真正源头。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
