image-rendering 在表格中对小图标生效的前提是：必须为 元素且真实发生缩放；crisp-edges 是首选值，需显式设置宽高以触发缩放识别，而 pixelated 仅适用于放大场景且 safari 不支持。
image-rendering 在表格中对小图标生效的前提很窄：必须是 <img> 元素、且真实发生了缩放。表格本身不改变这个逻辑，但容易因布局方式误判“是否缩放”。
为什么表格里加 image-rendering 常常没反应
表格单元格（<td>）默认不会触发 <code>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> 中 → 实际是等比渲染，没插值，<code>image-rendering不介入 - 给整个
<table> 或 <code><td> 设置 <code>image-rendering→ 属性只作用于后代<img>，且仅当它们自身满足缩放条件image-rendering: crisp-edges是表格图标的首选值表格图标通常是线条图、单色 icon 或文字截图，
crisp-edges能抑制模糊、强化边缘对比，且兼容性好（Chrome 122+、Firefox、Edge、Safari 15.4+ 均一致支持）。它在放大和缩小两种方向都禁用平滑插值，效果接近最近邻算法。写法示例：
<td> @@##@@ </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 src="edit.svg" style="max-width:90%" style="max-width:90%" style="image-rendering: crisp-edges;">被拉伸变形，此时image-rendering无法挽回失真 - 用了
object-fit: contain或cover→ 这些属性绕过image-rendering控制路径，插值由渲染引擎内部决定
先检查是否真在缩放，再决定要不要加
image-rendering；否则优先换高清源图、或改用 SVG。 - 必须显式写
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
