今天早晨收到了微软 Win 10 一周年更新(代号 1607 )的推送,让我意识到了一些问题……

花了一下午 + 一晚上的时间,将工作室网站主页 www.fcy.me 中的图标由原先的位图 PNG 变成了矢量图 SVG;

什么是位图?什么是矢量图?什么是 PNG ?什么是 SVG ?为什么要做这个改变?

接下来,我将会通过实例逐一来讲述这些问题;

1,位图与矢量图的区别

先来看看比较专业性的解释:

矢量图(Vector):

也称为面向对象的图像或绘图图像,在数学上定义为一系列由线连接的点。矢量文件中的图形元素称为对象。每个对象都是一个自成一体的实体,它具有颜色、形状、轮廓、大小和屏幕位置等属性。
矢量图是根据几何特性来绘制图形,矢量可以是一个点或一条线,矢量图只能靠软件生成,文件占用内在空间较小,因为这种类型的图像文件包含独立的分离图像,可以自由无限制的重新组合。它的特点是放大后图像不会失真,和分辨率无关,适用于图形设计、文字设计和一些标志设计、版式设计等。

位图图像(Bitmap):

亦称为点阵图像或绘制图像,是由称作像素(图片元素)的单个点组成的。这些点可以进行不同的排列和染色以构成图样。当放大位图时,可以看见赖以构成整个图像的无数单个方块。扩大位图尺寸的效果是增大单个像素,从而使线条和形状显得参差不齐。然而,如果从稍远的位置观看它,位图图像的颜色和形状又显得是连续的。

看到这里,对于没接触过这设计方面的朋友们,可能还是觉得看不太懂;

那么,用简单的话理解为:

失量图可以无限放大,而且不会失真。

而位图而不能,一旦超过自己的100%的比例,那么每个像素就会被放大,所以会觉得“虚”。

2,什么是 PNG ?什么是 SVG ?

好了,如果理解了之前的矢量图与位图的区别,那在电脑中,保存出来的图片类型,就会有差别;

位图有很多种不同的格式,每种格式各有利弊,常见的有 JPG,PNG,BMP 等,具体的区别这里不多做阐述;

矢量图当然也是有很多不同的格式,比如今天使用的 SVG,还有 CDR, AI, WMF, EPS 等等,每种格式因为使用环境和软件不同,也有不同的具体用途;

在这里,我们只是用于网页显示,所以,根据 W3C 推荐标准,SVG Version 1.1 已经成为互联网通用的矢量图片格式;

所以,我们最终图片输出的时候,选择了 SVG 矢量输出。

3,为什么要做这个改变?

可能你用电脑端PC打开我们的工作室主页www.fcy.me的时候,并没有发现有什么区别,完全就是一模一样,改它还有什么意义呢?

说到这个,我们又得提及一个设备分辨率的问题;

如今,越来越多的高分辨率设备出现在我们的生活中,比如iPhone,iPad,还有现在的智能手机基本上都是1080p甚至2K的高分辨率;

那么,这个时候,位图的劣势就显现出来了,当你仔细看的时候,会发现在这些高分辨率设备上,位图由于分辨率的限制,会觉得有点不太清晰;

这里,通过实例来看一下,先看一下下面的两个图:

图一

图二

咦,感觉好像没啥区别嘛,完全一样,看不出来啊~

是的,没错,这个是在当前的分辨率下,都是96*134的大小;

可是,如果显示的设备的分辨率很高,比如手机的DPI很高(每英寸的像素,相当于密度);

那么如果要显示同样的大小尺寸,图片尺寸必然会在设备中被放大,那么我们我们再看一下,将图片放大后两个图片的区别:

图一

图二

这下很明显了吧,现在的分辨率是 384*536,比之前的 96*134 整整大了 4 倍;

也就是说,现在的智能手机有着非常高的分辨率,在手机屏上显示,就有着非常高的 DPI,这样如果是位图分辨率较低,就会很明显的看到上图中的“虚”与“龋齿”的感觉,降低质感;

随着4K设备的普及,电脑的显示器,笔记本的显示器也逐渐迈向高清,这样,将网站图标的位图转换为矢量图,是以后的大趋势。

可是有朋友会说,那为什么当初做的时候,就不直接做成矢量的,非要现在改?

其实,我意识到这个问题的时候,已经是好几年前的事儿了,那时候在新出的 iPad 3 上看这些图标的时候,就会有那么一点不清晰;

不知道大家还是否记得,iPad 3 刚推出的时候,宣传词所用的就是“视网膜屏”;

什么意思呢?其实就是高 DPI,高分辨率屏幕;让你觉得每个图像都非常的细腻,感觉是“视网膜”看到的真实物体。

如今,除了 PC 显示器因为尺寸较大,4K 的显示器价格还比较高,没有普及以外;

其他几乎所有设备都用上了所谓的“视网膜屏”,都用上了高 DPI,也就是大家买到新的手机,都会觉得比以前的老手机清晰了不少的原因。

所以说,这个是新鲜玩意,以前呢,并没有这方面的意识;

那时候各大浏览器对于 SVG 的支持并不是很好,IE 8 以下以及 Android 2.3 默认浏览器是不支持 SVG 的;

Chrome 和 Firefox 是走在前列,但当时为了照顾到更多数浏览者的使用,我迟迟未将本站的图标改为矢量图。

但如今几年过去了,苹果手机成为了街机,Android 2.3 以下的使用者也寥寥无几(如果还在用,那也是慢到想砸手机的地步了吧……);

PC 端 WIN 10 自带的 Edge,还有 IE 11,Chrome, Firefox 等都对 SVG 有着良好的支持;

即使是上上一代的 WIN7,也是 IE 9 的默认;而且微软官方会强烈提示仍然在使用 IE 8 以下的 WIN 7 系统进行升级;

所以,只有仍然坚守 Win XP 的用户们,并且使用 IE8 以下浏览器的用户们,看不到本站里的图标了;

那 Win XP 现在已经成为业界毒瘤……也是该到了被抛弃的时候!

所以,我觉得现在时间差不多了,高清时代来临!本站从今日起,图标全面转向矢量,转变成为全高清(Hi-Res)的网站。