image-rendering能缓解低分辨率图缩放模糊，但必须配合整数倍缩放和正确资源加载，否则仅锐化模糊图；pixelated仅放大生效且兼容性弱，crisp-edges是当前最可靠、全场景兼容的像素友好方案。
直接说结论：image-rendering 能缓解低分辨率图片（如像素图、UI图标）在缩放时的模糊，但**必须配合整数倍缩放 + 正确的资源加载逻辑**，否则它只是给一张模糊图“画个锐利边框”，救不回原始清晰度。
为什么加了 image-rendering: pixelated 还是糊？
常见错误现象：<img src="icon.png" width="64" height="64"> 明明是 16×16 像素图，拉伸到 64×64 后仍发虚；检查 computed styles 发现 image-rendering 已生效，但没用。
-
image-rendering只对「浏览器直接重采样位图」起作用，比如<img>的width/height属性缩放 —— 它不干预background-image、transform: scale()或高 DPR 屏幕下的物理像素映射 - 如果原始图就是 16×16，而你用 CSS 拉伸到非整数倍（比如
width: 65px），pixelated会失效，浏览器悄悄回退到auto - 移动端 Retina 屏上，即使写了
pixelated，若没配srcset和sizes，浏览器可能仍加载 @1x 图，再锐化也没用
crisp-edges 和 pixelated 到底该选哪个？
别被名字带偏：pixelated 是语义最准的值，但支持有限；crisp-edges 是目前最稳的“像素友好型” fallback。
-
crisp-edges：所有现代浏览器行为一致，实际效果 ≈ 最近邻插值，适合 2×、4× 等整数倍缩放，边缘锐利不糊 -
pixelated：Chrome 89+、Firefox 78+、Safari 15.4+ 支持，但 Safari 14 及更早仅认-webkit-optimize-contrast；且规范明确它“只用于放大”，缩小场景下部分浏览器会退化为auto - 绝对不要用
smooth或留空 —— 这是默认双线性插值，正是模糊源头
怎么写才真正生效？
关键不是单写一个值，而是覆盖主流浏览器 + 锁定渲染路径：
立即学习“前端免费学习笔记（深入）”；
- 必须作用于
<img>元素本身（不是父容器，也不是background-image） - 用多前缀声明，尤其不能漏掉
-webkit-optimize-contrast（Safari 旧版唯一有效项） - 示例写法：
img.pixel-art {
image-rendering: -webkit-optimize-contrast;
image-rendering: -moz-crisp-edges;
image-rendering: -o-crisp-edges;
image-rendering: crisp-edges;
image-rendering: pixelated;
}
- 同时确保 HTML 中用
width/height控制尺寸（而非max-width或transform），且值为原始图尺寸的整数倍 - 如果是 Canvas 渲染像素图，
image-rendering必须设在<canvas>上，且要搭配ctx.imageSmoothingEnabled = false
最容易被忽略的一点：无论你把 image-rendering 配得多完美，只要 srcset 写错、sizes 缺失，或者图片本身分辨率太低（比如拿 100×100 图硬拉到 800×600），它就只是在给模糊做表面处理。清晰度的起点永远是资源选择，不是渲染参数。
