image-rendering 不能解决锯齿，仅提供插值算法选择；pixelated 仅放大生效，缩小退至双线性插值；crisp-edges 是唯一支持缩放双向禁用平滑的通用解；canvas 中该属性无效，需用 ctx.imagesmoothingenabled = false。
image-rendering 不能“解决”锯齿，它只是让你选一种插值算法——选错值或用错场景，反而会让锯齿更刺眼、模糊更顽固。
为什么加了 image-rendering: pixelated 还是糊？
因为 pixelated 只在放大时生效，缩小直接退回到 auto（双线性插值），浏览器照常把你的 64×64 像素图缩成 32×32，边缘发灰、颜色漂移。这不是 bug，是规范明确定义的行为。
常见错误现象：
- 响应式布局中
@media把图片从100px缩到50px，以为pixelated能保锐利，结果更糊 - 在 Retina 屏上显示小图标，
srcset没配@2x图，只靠 CSS 属性硬扛，越调越虚 - Tailwind 或 CSS 重置库悄悄注入
image-rendering: smooth，覆盖了你写的crisp-edges
crisp-edges 才是缩小+放大的通用解
crisp-edges 是目前唯一能在放大和缩小两个方向都禁用平滑插值的标准值，效果接近最近邻（nearest-neighbor），强制保留硬边缘与高对比度。
实操建议：
- 所有需保持锐利的位图（像素图、UI 图标、文字截图）优先写
image-rendering: crisp-edges - 为兼容旧版 Safari，补一行
image-rendering: -webkit-optimize-contrast - 不要写
pixelated用于缩小场景——Chrome/Firefox 明确不支持，Safari 则压根忽略 - 若必须用
pixelated（比如做复古马赛克动效），确保只用于整数倍放大（2×、3×），并禁止任何缩小逻辑
Canvas 里设 image-rendering 是白忙活
image-rendering 是 CSS 渲染层控制项，只影响 <img> 或背景图这类合成阶段的缩放；<canvas></canvas> 内部绘制走 JS 光栅管线，CSS 对 ctx.drawImage() 的插值逻辑完全失能。
错误做法：
- 给
<canvas width="32" height="32"></canvas>加image-rendering: pixelated，再用 CSS 拉伸到128px × 128px - 把
image-rendering: pixelated设置在<img>上，以为会影响 canvas 绘制
正确做法：
- 保持
canvas.width/canvas.height为原始尺寸（如 32×32） - JS 中设
ctx.imageSmoothingEnabled = false - 若需动态缩放，用
ctx.scale(4, 4)+ctx.drawImage(img, 0, 0)，而非拉伸<canvas></canvas>元素本身
真正容易被忽略的是：插值算法只是最后一道开关，前提是图片已正确加载（img.onload 后设置样式才生效）、没被 transform 干扰、容器没触发隐式缩放（比如 flex 布局挤压导致非整数像素渲染）。盯着 image-rendering 调，不如先检查 srcset 和父容器的 overflow、background-color 是否漏设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
