image-rendering: pixelated在缩小图片时完全无效，这是css规范明确定义的行为，浏览器均按此执行；缩小场景应使用crisp-edges（配合-webkit-optimize-contrast兼容旧版safari），它能在放大和缩小两个方向都禁用平滑插值，效果接近最近邻算法。
image-rendering 在缩小图片时根本不会生效——这不是兼容问题，是规范行为。想靠 pixelated 解决“缩小后发虚”，方向就错了。
为什么 pixelated 对缩小无效
这是 CSS 规范明确定义的：pixelated 语义就是“仅在图像被放大时启用最近邻插值”。浏览器（Chrome、Firefox、Safari）全部按规范执行，不是 bug，是设计。
- 给一张
64×64图设置width: 32px; height: 32px，加了image-rendering: pixelated依然模糊 - 响应式中用
@media把图片从100px缩到50px，期望保持块感，实际完全没反应 - 缩小场景下，浏览器自动退回到
auto（通常是双线性插值），结果边缘糊、颜色灰、细节融掉
缩小场景该用 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>}
image-rendering 不是万能开关，真正在意清晰度得看这三点
很多人调半天没效果，问题根本不在这个属性身上。它只是“最后一道渲染开关”，前提是：
- 图片已被正确加载（避免 base64 或懒加载未触发导致样式提前应用）
- 容器尺寸未触发隐式缩放（比如父容器
flex或grid拉伸导致图片被二次缩放） - 没被
transform: scale()干扰——该操作绕过image-rendering，直接走 GPU 插值
真正容易被忽略的是：哪怕用了 crisp-edges，如果图片本身是 JPEG 压缩过度或 PNG 无 alpha 通道但被强制半透明混合，也会在边缘产生灰边或模糊感——这时候换图源比调 CSS 更有效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
