同一个图标,在不同的设备分辨率下面,有的清晰,有模糊。
特别是现在移动设备越来越高的分辨率,以前做的点阵图标(位图),在移动屏幕上都是靠 CSS 控制模拟放大的,边缘会长毛,没有像素点阵的原始图片清晰。如果再绘制一个 2X 放大的图标,工作量大,和单线像素点阵的图标差别也大,有考虑用 svg 重绘,不知道实际情况在各种不同的分辨率的设备上,是否都能保持比较好的清晰度?
1
xyjtou OP 补充:比如这类的像素图标 http://i1.piimg.com/1949/260d91a5c08d2e76.jpg
|
2
maplerecall 2017-04-05 13:01:22 +08:00 5
最简单的方法是直接近邻取样放大整数倍就好,不用重绘高 dpi 的图标,因为这种图标实际上就是一堆正方形组成的,无论图标分辨率多少,实际在屏幕上显示的视觉物理尺寸在所有设备上可以认为是相同的。当然有空重绘 svg 也是没问题的。
另外有个 css 属性 image-rendering ,设置 image-rendering:pixelated 可以让图片像素化缩放,在现代浏览器上兼容性还可以。 |
3
fffflyfish 2017-04-05 18:59:24 +08:00
waifu2x? 现在很多 Super Resolution 做的都不错呢
|