表格小图标应使用 image-rendering: crisp-edges 而非 pixelated，因后者仅在放大时生效，而表格场景多为缩小；crisp-edges 在放大和缩小方向均禁用平滑插值，配合 table-layout: fixed、整数倍缩放及 canvas 的 ctx.imageSmoothingEnabled = false 才能确保锐利显示。
image-rendering: pixelated 在表格图标里根本不起作用
它只在放大时生效，而表格里小图标几乎全是缩小场景——比如把 64×64 的图标塞进 16×16 的 <td>，浏览器直接忽略 pixelated，退回到双线性插值，结果就是灰边、发虚、颜色漂移。
这不是你写错了，是规范明确定义的行为：CSS 规范里 pixelated 的语义就是“仅放大”，缩小不归它管。
- 常见错误：给
<img>加image-rendering: pixelated，再放进<table>的单元格里，以为能保锐利 - 更隐蔽的问题：用
background-image配background-size: contain或cover，同样绕过pixelated控制 - 表格布局本身容易触发非整数像素渲染（比如
table-layout: auto下列宽计算出 15.3px），进一步加剧模糊
表格小图标该用 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—— 后者会覆盖前者，且语义更匹配表格图标常需缩小的现实 - 示例写法：
td img.icon {<br> image-rendering: crisp-edges;<br> image-rendering: -webkit-optimize-contrast;<br>}
表格容器本身会破坏 image-rendering 效果
image-rendering 只在图片真被缩放时才触发，而表格布局可能让浏览器误判“没缩放”或触发隐式缩放。
立即学习“前端免费学习笔记（深入）”；
- 避免用
max-width或width: 100%控制图标尺寸——它们不保证整数倍缩放，容易产生亚像素渲染 - 禁止用
transform: scale()缩放图标，它绕过image-rendering控制，直接走合成器插值 - 设置
table-layout: fixed，并为列指定明确宽度（如width: 24px），防止自动计算导致非整数尺寸 - 确保图标原始尺寸是目标显示尺寸的整数倍（例如图标 48×48，单元格固定宽高 24×24 → 缩小 2×，
crisp-edges才能稳定生效）
Canvas 渲染表格图标时 image-rendering 完全无效
如果你用 <canvas> 动态绘制表格内图标（比如状态指示器），给 <canvas> 元素加 image-rendering: pixelated 是白忙活——这个属性只影响 CSS 合成层，对 ctx.drawImage() 内部插值无任何作用。
- 正确做法：保持
canvas.width/canvas.height为原始尺寸（如 24×24），JS 中设ctx.imageSmoothingEnabled = false - 若需放大显示，用
ctx.scale(2, 2)+ctx.drawImage(img, 0, 0)，而不是拉伸<canvas>元素本身 - 别在
<img>上设样式再传给 canvas——this.iconImg.style.imageRendering = 'pixelated'不影响 drawImage 行为
真正起效的前提是：图标已加载完成、没被 transform 干扰、表格列宽精确匹配缩放比、DPR 适配到位（比如 @2x 图源未配 srcset，单靠 CSS 属性硬扛必糊）。
