image-rendering 在表格中对小图标生效的前提是：必须为 <img> 元素且真实发生缩放；crisp-edges 是首选值，需显式设置宽高以触发缩放识别，而 pixelated 仅适用于放大场景且 Safari 不支持。
image-rendering 在表格中对小图标生效的前提很窄：必须是 <img> 元素、且真实发生了缩放。表格本身不改变这个逻辑，但容易因布局方式误判“是否缩放”。
为什么表格里加 image-rendering 常常没反应
表格单元格（<td>）默认不会触发 image-rendering，除非里面放的是 <img> 且尺寸被强制改变。常见失效场景：
- 用
background-image放图标 → 属性基本被忽略，Chrome/Edge 需额外加-webkit-optimize-contrast才可能响应，Firefox 不稳定 -
<img src="icon.png">没设width/height，靠 CSSmax-width: 16px限制 → 若原图就是 16×16，浏览器认为“未缩放”，属性不触发 - 用了
srcset，高 DPR 设备加载了 @2x 图（如 32×32），再显示在 16×16 的<td>中 → 实际是等比渲染，没插值，image-rendering不介入 - 给整个
<table>或<td>设置image-rendering→ 属性只作用于后代<img>，且仅当它们自身满足缩放条件
image-rendering: crisp-edges 是表格图标的首选值
表格图标通常是线条图、单色 icon 或文字截图，crisp-edges 能抑制模糊、强化边缘对比，且兼容性好（Chrome 122+、Firefox、Edge、Safari 15.4+ 均一致支持）。它在放大和缩小两种方向都禁用平滑插值，效果接近最近邻算法。
写法示例：
立即学习“前端免费学习笔记（深入）”；
<td> <img src="edit.svg" width="16" height="16" style="image-rendering: crisp-edges;"> </td>
注意点：
- 必须显式写
width/height（或等效 CSS 尺寸），让浏览器明确识别“缩放发生” - 避免混用
transform: scale()—— 此时插值发生在合成层，image-rendering完全失能 - SVG 图标不需要
image-rendering，它是矢量的；该属性只对位图（PNG/JPEG/GIF）有效
表格中用 pixelated 反而容易出问题
pixelated 名字有误导性，它规范定义为“仅放大时启用最近邻”，表格图标多数是缩小显示（比如 32×32 图缩到 16×16 单元格），此时它会退回到 auto，结果更糊。
适用场景极窄：
- 你明确需要像素块放大效果（如表格里嵌了一个可点击的像素风状态指示器）
- 且该图标一定是被放大的（
width> 原图宽） - 确认目标浏览器支持（Safari 至今不支持
pixelated，旧版需 fallback）
否则一律用 crisp-edges 更稳妥。
真正影响表格图标清晰度的，往往不是 image-rendering
很多“调了没用”的情况，根源不在 CSS 属性本身：
- 原始图标分辨率太低（比如只有 16×16），再怎么设
crisp-edges也撑不起 24×24 的单元格 - 表格设置了
table-layout: fixed但列宽没配好，导致<img>被拉伸变形，此时image-rendering无法挽回失真 - 用了
object-fit: contain或cover→ 这些属性绕过image-rendering控制路径，插值由渲染引擎内部决定
先检查是否真在缩放，再决定要不要加 image-rendering；否则优先换高清源图、或改用 SVG。
