像素点阵图标（ pixel icons）怎么解决清晰度的问题？

[xyjtou]

同一个图标，在不同的设备分辨率下面，有的清晰，有模糊。

特别是现在移动设备越来越高的分辨率，以前做的点阵图标（位图），在移动屏幕上都是靠 CSS 控制模拟放大的，边缘会长毛，没有像素点阵的原始图片清晰。如果再绘制一个 2X 放大的图标，工作量大，和单线像素点阵的图标差别也大，有考虑用 svg 重绘，不知道实际情况在各种不同的分辨率的设备上，是否都能保持比较好的清晰度？

[xyjtou]

补充：比如这类的像素图标 http://i1.piimg.com/1949/260d91a5c08d2e76.jpg

[maplerecall]

最简单的方法是直接近邻取样放大整数倍就好，不用重绘高 dpi 的图标，因为这种图标实际上就是一堆正方形组成的，无论图标分辨率多少，实际在屏幕上显示的视觉物理尺寸在所有设备上可以认为是相同的。当然有空重绘 svg 也是没问题的。

另外有个 css 属性 image-rendering ，设置 image-rendering:pixelated 可以让图片像素化缩放，在现代浏览器上兼容性还可以。

[fffflyfish]

waifu2x? 现在很多 Super Resolution 做的都不错呢