image-rendering: pixelated仅在放大时生效，缩小则退化为auto；应改用crisp-edges实现放大和缩小均禁用插值，确保像素图边缘锐利。
它只在放大时生效，缩小就退回到 auto —— 这是规范定义的行为，不是 bug。
image-rendering: pixelated 在缩小场景下完全不工作
根据 CSS 规范，pixelated 的语义是：“当图像被放大时，使用最近邻插值；当图像被缩小时，行为等同于 auto”。也就是说，你给一张 64×64 的像素图设置 width: 32px; height: 32px（即缩小），image-rendering: pixelated 不会起任何作用，浏览器仍按默认双线性插值下采样，结果就是边缘糊、颜色发灰。
常见错误现象：
- 用
pixelated处理小图标，在 Retina 屏或响应式布局中缩小后明显发虚 - 在
@media中把图片从 100px 缩到 50px，期望保持块状感，实际变模糊 - 以为加了
pixelated就一劳永逸，没验证缩小路径
缩小场景该用 crisp-edges 而不是 pixelated
crisp-edges 是目前唯一能在**放大和缩小两个方向**都禁用平滑插值的可靠取值。它的实际效果接近最近邻（nearest-neighbor）算法，强制保留对比度与硬边缘，对像素图、线条图标、文字截图等低分辨率素材更稳妥。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 所有需保持锐利边缘的位图（无论放大还是缩小），优先写
image-rendering: crisp-edges - 为兼容旧版 Safari，补一行
image-rendering: -webkit-optimize-contrast - 不要依赖
pixelated做缩小优化 —— 它在 Chrome/Firefox 缩小时已明确回退，Safari 则压根不支持该值用于缩小 - 若必须用
pixelated（比如要突出复古马赛克感），确保只用于整数倍放大（2×、3×、4×），并禁止任何缩小逻辑
Canvas 绘制像素图时 image-rendering 完全无效
image-rendering 是 CSS 渲染层控制项，只影响 <img>、<div> 背景图等最终合成阶段的缩放行为。而 <canvas> 内部绘制是 JS 控制的光栅操作，CSS 对 canvas 元素本身的 width/height 拉伸只会导致浏览器对整个 canvas 输出做二次插值 —— 这正是模糊根源。
正确做法：
- 保持
<canvas>的width和height属性值等于原始像素尺寸（如 32×32） - 用 CSS 的
transform: scale(2)或width/height放大 canvas 元素容器，而非拉伸 canvas 自身 - JS 绘制时，用
ctx.imageSmoothingEnabled = false关闭插值（这是 canvas 级别开关） - 避免把
image-rendering加在 canvas 上 —— 它不会改变内部绘制逻辑
SVG 图标模糊和 image-rendering 无关
如果你在处理的是 SVG，但设置了 image-rendering: pixelated 却没效果，那说明你根本没走对路：SVG 是矢量格式，模糊通常来自被当作位图加载（如 <img src="icon.svg">）或 viewBox / 尺寸控制不当，此时 image-rendering 压根不适用。
关键判断点：
- 用
<img>引入 SVG → 浏览器会先光栅化再缩放 → 模糊不可逆，image-rendering无效 - 用内联
<svg>→ 删除原始width/height属性，只留viewBox，再用 CSS 控制尺寸 → 真正矢量缩放，无需image-rendering - 用
background-image: url(icon.svg)→ 确保 SVG 文件里有viewBox且无固定宽高 → 否则同样被光栅化
最常被忽略的一点：缩放是否真的发生？image-rendering 对未缩放图像无效 —— 如果元素尺寸刚好等于图片原始分辨率，加任何值都没反应。务必确认 DevTools 中 computed 样式里 width/height 和图片 intrinsic size 是否存在差异。
