像素画为什么会模糊？从缩放到 CSS 的修复方法

像素画经常不是在制作时变糊，而是在显示时变糊。源文件可能完全锐利，浏览器、设计软件或游戏引擎却用非整数尺寸展示，并混合了相邻像素。

修复的关键是找到：插值从哪一环进入了流程。

先用 100% 查看源文件

按原始尺寸打开 PNG。如果每个色块边缘都硬朗，说明导出没有问题；如果此时已经发软，就回到源文件重新导出，避免重采样。

不要让图片查看器把 128×128 的图自动铺到 700 像素窗口。使用 100%、200% 等整数倍缩放。

只按整数倍放大

64 像素可以干净地变成 128、192 或 256。变成 150 时，每个源像素无法占据相同数量的屏幕像素，渲染器只能混合或不均匀分配。

布局允许时尽量用 2×、3×、4×。目标尺寸固定且很别扭时，最好针对目标重新设计内部网格。

关闭浏览器平滑

网页中的像素画可以用 CSS 请求硬边缩放：

.pixel-art {
  image-rendering: pixelated;
}

同时仍要设置合理的宽高。image-rendering 只能改善采样方法，无法让错误的非整数几何变得完美。

还要检查父元素有没有 scale(0.9) 一类变换。即使图片宽度是整数，变换也可能让它落在半像素位置。

检查设计软件与游戏引擎

许多编辑器默认使用双线性或双三次缩放，因为它们适合照片。缩放像素画时要选最近邻。

游戏引擎还应检查：

• 非整数相机缩放；
• 精灵位于屏幕像素之间；
• 纹理压缩；
• 自动 mipmap；
• UI 画布使用了小数比例。

不要用截图代替导出

不要截取预览来制作成品。浏览器可能已经缩放预览，操作系统也可能叠加显示缩放。

从 PixelTool 直接导出 PNG 或 SVG。需要大 PNG 时选择合适的输出尺寸，不要放大截图。

透明边缘出现浅色或深色光圈，也属于相近问题。把作品分别放在黑底和白底上检查。传统硬边精灵的边缘通常应全透明或全不透明。

推荐排查顺序

1. 以 100% 查看导出文件；
2. 确认显示尺寸为整数倍；
3. 开启最近邻或 pixelated；
4. 移除小数变换和相机位置；
5. 按需关闭过滤、压缩和 mipmap；
6. 重新导出，不用截图。

每次只改一个环节。模糊消失的那一步，就是需要永久修正的位置。