对像素图应使用 image-rendering: crisp-edges 而非 pixelated，因 crisp-edges 是唯一在放大和缩小两个方向均禁用平滑插值、且主流浏览器行为一致的可靠方案；pixelated 仅放大生效，缩小时所有浏览器按规范退至双线性插值，导致发虚发灰。
直接结论：对像素图用 image-rendering: crisp-edges，不是 pixelated；它才是当前唯一在放大和缩小两个方向都禁用平滑插值、且主流浏览器行为一致的可靠方案。
为什么 pixelated 不适合像素图常规显示？
很多人看到“pixelated”就以为是像素图专属，其实它只在放大时生效，缩小直接退回到 auto（双线性插值），结果更糊。规范明确写死：缩小场景下所有浏览器都忽略该值。
- 常见错误现象：
@media把64×64图缩成32×32，加了pixelated反而边缘发灰、颜色漂移 - Retina 屏上只靠
pixelated硬扛小图标，但srcset没配@2x图 → 实际加载的是低分图，再怎么插值也救不回细节 - Safari 完全不支持
pixelated，写了等于白写
正确写法：优先用 crisp-edges + 兼容前缀
crisp-edges 是目前最稳妥的选择：Chrome 122+、Firefox、Edge 行为一致，放大/缩小都强制禁用平滑，效果接近最近邻（nearest-neighbor），保留硬边缘与高对比度。
- 必须写的最小兼容组合：
image-rendering: -webkit-optimize-contrast;（Safari/iOS 旧版） +image-rendering: crisp-edges; - 不要写
image-rendering: pixelated用于缩小或响应式尺寸变化场景 - 避免被第三方 CSS 覆盖：Tailwind、Normalize.css 等可能注入
image-rendering: smooth，建议用更具体选择器或!important（仅限必要时）
哪些地方加才真正起作用？
image-rendering 只对 <img> 的 width/height 缩放生效，对以下情况完全无效：
-
background-image+background-size：Chrome/Edge 需额外加-webkit-optimize-contrast才可能响应，Firefox/Safari 基本无视 -
transform: scale()：插值发生在合成层，CSS 层已无权干预 -
srcset加载了匹配 DPR 的高分图（如 iPhone 加载icon@2x.png显示在32px容器里）→ 实际未缩放 → 属性被跳过 -
<canvas></canvas>元素上设置该属性：完全无效；ctx.drawImage()插值由 JS 控制，需设ctx.imageSmoothingEnabled = false
真正容易被忽略的前提条件
插值算法只是最后一道开关。如果图片还没加载完成就设置样式、容器被 flex 挤压导致非整数像素渲染、或者用了 max-width 替代 width，crisp-edges 就不会触发。
- 确保
<img>有明确的width和height属性（或内联style），且值为原始图尺寸的整数倍 - 样式应在
img.onload后应用，否则可能错过首次渲染时机 - 避免用
transform或scale()替代尺寸控制；不要依赖max-width做响应式缩放
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
