crisp-edges 是低分辨率位图最稳选择，chrome 122+、firefox、edge 强制禁用双线性插值，safari ≤14 需补 -webkit-optimize-contrast 兼容。
image-rendering: crisp-edges 是像素图最稳选择
对 64×64 图标、16×16 文字截图、8-bit 游戏精灵图这类低分辨率位图，image-rendering: crisp-edges 是目前兼容性最好、效果最可控的取值。它在 Chrome 122+、Firefox、Edge 中均强制禁用双线性插值，放大和缩小都接近最近邻算法，边缘锐利、色边少。
但旧版 Safari（≤14）不识别 crisp-edges，必须补一行兼容声明：
img.pixel-art {
image-rendering: crisp-edges;
image-rendering: -webkit-optimize-contrast;
}
注意：-webkit-optimize-contrast 会被现代浏览器忽略，只对 Safari 生效；不要反过来写，否则 Safari 会优先取 crisp-edges（若支持）而跳过兼容项。
pixelated 只在整数倍放大时有效，缩小必糊
image-rendering: pixelated 的语义就是“仅放大时启用最近邻”，规范明确定义其在缩小场景下回退到 auto（即双线性插值）。这意味着：
- 64×64 图设
width: 32px; height: 32px→ 即使加了pixelated，照样发灰、颜色漂移 - 响应式中用
@media (max-width: 768px)把图从 100px 缩到 50px →pixelated完全失效 - Safari 基本不支持
pixelated，Chrome 122+ 才开始稳定支持，Firefox 支持但行为略有差异
真要用 pixelated，只限明确控制的整数倍放大（如 2×、3×、4×），且必须确保 CSS 或 JS 不引入任何缩小逻辑。
为什么给
image-rendering 是 CSS 渲染层属性，只干预 <img> 或背景图的合成阶段缩放；<canvas></canvas> 内部绘制由 JS 光栅管线控制，CSS 完全无法触达 ctx.drawImage() 的插值行为。
常见错误写法：
-
<canvas width="32" height="32"></canvas>+ CSS 拉伸到128px × 128px+image-rendering: pixelated→ 必糊 - 把
image-rendering设在<img>上，以为能影响 canvas 绘制 → 无效
正确做法：
- 保持
canvas.width/canvas.height为原始尺寸（如 32×32） - JS 中显式关闭平滑：
ctx.imageSmoothingEnabled = false - 需动态缩放时，用
ctx.scale(4, 4)+ctx.drawImage(img, 0, 0)，而非拉伸<canvas></canvas>元素本身
background-image 和 transform: scale() 都不认 image-rendering
image-rendering 对 background-image 基本无效——Chrome/Edge 需额外加 -webkit-optimize-contrast 才可能响应，Firefox 和 Safari 则完全无视。而 transform: scale() 触发的是合成层缩放，插值发生在 GPU 合成阶段，CSS 层已无权干预。
所以这些写法全无效：
div { background: url(icon.png); background-size: 32px; image-rendering: crisp-edges; }img { transform: scale(2); image-rendering: pixelated; }-
img { width: 100vw; image-rendering: crisp-edges; }但实际加载的是srcset中的 @1x 图 → 没被缩放，属性被跳过
真正起效的前提是：图片已被浏览器判定为「需要重采样」，且缩放行为发生在 CSS 渲染层（即通过 width/height 或 style="width:..." 强制缩放），同时没有其他更高优先级样式（如 Tailwind 的 image-rendering: smooth）覆盖你设置的值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
