对低分辨率位图，crisp-edges是最可靠选择；pixelated仅在整数倍放大时生效，缩小即退化为双线性插值，safari支持差，需兼容写法；canvas需禁用imagesmoothingenabled而非依赖css。
直接结论：对像素图、UI图标、文字截图这类低分辨率位图，image-rendering: crisp-edges 是目前最可靠的选择；pixelated 只在整数倍放大时有效，缩小场景下完全失效，别乱用。
为什么 pixelated 在缩小图片时还是糊？
这不是浏览器 bug，而是规范明确定义的行为：pixelated 语义就是“仅放大时启用最近邻插值”，缩小一律退回到 auto（通常是双线性插值）。结果就是：64×64 的图设成 width: 32px; height: 32px，再加 pixelated，照样边缘发灰、颜色漂移。
- 响应式布局中用
@media把图片从 100px 缩到 50px，pixelated不起作用 - 想靠它保锐度？必须确保是 2×、3×、4× 这类整数倍放大，且禁止任何缩小逻辑
- Safari 对
pixelated支持极差，基本忽略，别指望跨端一致
该用 crisp-edges 还是 -webkit-optimize-contrast？
crisp-edges 是唯一能在放大和缩小两个方向都禁用平滑插值的标准值，效果接近最近邻，适合像素图、小图标、文字截图。但它在旧版 Safari（≤14）里不被识别，所以必须补兼容写法。
- 正确写法：
image-rendering: crisp-edges;后紧跟image-rendering: -webkit-optimize-contrast;（后者会被现代浏览器忽略，但 Safari 会认） - 不要混用：
crisp-edges会覆盖pixelated，语义也不匹配 - 别写
image-rendering: smooth或留空——那是默认双线性插值，正是模糊源头
为什么给 <canvas></canvas> 加 image-rendering 没反应？
image-rendering 是 CSS 渲染层属性，只影响 <img> 或背景图这类合成阶段的缩放；<canvas></canvas> 内部绘制走 JS 光栅管线，CSS 完全无法干预 ctx.drawImage() 的插值行为。
- 错误做法：
<canvas width="32" height="32"></canvas>+ CSS 拉伸到 128×128 +image-rendering: pixelated→ 必糊 - 正确做法：保持
canvas.width/canvas.height为原始尺寸（如 32×32），然后 JS 中设ctx.imageSmoothingEnabled = false - 需动态缩放？用
ctx.scale(4, 4)+ctx.drawImage(img, 0, 0)，而不是拉伸<canvas></canvas>元素本身
容易被忽略的前提条件
image-rendering 是“最后一道开关”，不是万能修复。它只在图片已被缩放、且样式已生效的前提下起效。很多“无效”案例，问题根本不在这个属性身上。
- 图片没正确加载：比如被
display: none拦截、懒加载未触发、img.onload后才设样式 - 被
transform: scale()干扰：此时插值发生在合成层，CSS 层已无权干预 - 第三方 CSS 覆盖：Tailwind、Normalize.css 或 UI 库可能悄悄注入
image-rendering: smooth，得用!important或更高优先级选择器覆盖 - 图源分辨率太低：16×16 像素硬拉到 128×128，
pixelated只是放大马赛克，不是变高清
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
