前端项目中位图和矢量图的优缺点及iconfont小图标制作流程

1、BMP图

              BMP格式的图片，取自英文单词Bitmap，Windows中文版翻译文‘位图’

              支持四种的BPM格式的图

l   单色位图（1位）——1字节记录8个像素，图片一般只有黑和白。

l   16色位图（4位）——1字节记录2个像素，图片有16种颜色

l   256色位图（8位）——1字节记录1个像素，256种颜色。

l   24位位图——3个字节记录1个像素，红、绿、蓝三原色各占一个字节，总共大约1670万色，即真彩色。

              对于 BMP 图片来说，若图片尺寸相等，16 色 BMP 的文件大小当然比 256 色 BMP 要少一半，因为可以用更少的字数（位数）来存储一个像素。

              而 GIF 和 PNG 图片更高端，除了支持16色、256色的颜色表之外，还可以支持256色以内的任意颜色数。例如222色、111色、6色7色8色……它们都能支持。颜色数越少，文件体积越小。

2、PNG图

l   PNG可以大致分为3种：PNG-8、PNG-24、PNG-32。

              其中后面那个数字8、24、32代表位数，就像上述的BMP分4位（16色）、8位（256色）、24位（真彩色）一样。

              PNG 除了24位外还能有32位，除了红、绿、蓝三原色之外，还有个透明通道，从0-255表示从透明到半透明到不透明。

              PNG-8 带颜色表，而且不像 BMP 只有固定的16色、256色，PNG-8 的颜色数可以从2种到256种之间任意种，像123种、10种颜色之类的颜色数，PNG-8 都是支持的。而且通过强大的压缩算法，PNG-8 可以真正做到颜色数越少，文件体积越小。

l   和gif相比，优势在于失真小，没锯齿，劣势在于不支持动画

 

 

3、peg（jpg）

         JPG的特性是有损压缩。对于网络传输来说，有损压缩是个优点。它可以削减一些肉眼难以察觉的细节，让图片体积大大减小。有损压缩特别适用于相机拍摄的照片。

              Photoshop 另存为JPG的选项对话框（如上图）中，有个“连续”选项。这是什么意思呢？

“基线”和“连续”格式的JPG，主要是在网速比较慢的时候，图片加载方式不同。

              ‘连续’格式：

                            是先加载整个图片，由模糊到清晰

              ‘基线’格式：

                            图片由上至下缓慢加载，如首次打开candtu系统的背景图加载方式一致

 

 

3、GIF

l   GIF 图片是带颜色表的，它最多支持256色，也支持256以内任意数量的颜色表，但是不支持真彩色。

l   GIF 的特性是帧动画。

l   透明性：Gif是一种布尔透明类型，既它可以是全透明，也可以是全不透明，但是它并没有半透明（alpha透明）

l   无损耗性：Gif是一种无损耗的图像格式，这也意味着你可以对gif图片做任何操作也不会使得图像质量产生损耗

l   水平扫描：Gif是使用了一种叫作LZW的算法进行压缩的，当压缩gif的过程中，像素是由上到下水平压缩的，这也意味着同等条件下，横向的gif图片比竖向的gif图片更加小。例如500*10的图片比10*500的图片更加小

l   间隔渐进显示：Gif支持可选择性的间隔渐进显示

4、webP

l   WebP是谷歌开发的一种新图片格式，WebP是同时支持有损和无损压缩的、使用直接色的、点阵图。

l   优点：相同质量的图片，WebP具有更小的文件体积。现在网站上充满了大量的图片，如果能够降低每一个图片的文件大小，那么将大大减少浏览器和服务器之间的数据传输量，进而降低访问延迟，提升访问体验。

l   缺点：浏览器兼容不行

5、svg矢量图

l   SVG全称Scalable Vector Graphics，是无损的、矢量图。

l   SVG跟上面这些图片格式最大的不同，是SVG是矢量图。这意味着SVG图片由直线和曲线以及绘制它们的方法组成。当你放大一个SVG图片的时候，你看到的还是线和曲线，而不会出现像素点。这意味着SVG图片在放大时，不会失真，所以它非常适合用来绘制企业Logo、Icon等。SVG是很多种矢量图中的一种，它的特点是使用XML来描述图片。

l   借助于XML技术的流行，SVG也流行了很多。使用XML的优点是，任何时候你都可以把它当做一个文本文件来对待，也就是说，你可以非常方便的修改SVG图片，你所需要的只需要一个文本编辑器。

6、iconfont

         就是用自体文件取代图片文件，来展示图标、特殊自体等严肃的一种方法。

l   优点：

                            1）加载文件体积小

                         2）可以直接通过css的font-size, color修改它的大小和颜色，对于需要缩放多个尺寸的图标，是个很好的解决方案。

                            3）支持css3对文字的效果，例如：阴影、旋转、透明度

                            4）兼容低版本浏览器（兼容IE7以上）

l   缺点：矢量图只能是纯色的，制作门槛高，耗时长，不能替代sprite雪碧图

l   制作流程：

1)         把需要的小图片做成用ai(Adobe Illustrator)软件做成svg矢量图，保存在一个单独的文件夹里面

2)         在 阿里巴巴矢量图标官网 建立自己的项目，制作成字体（以后每次有新图标增加，直接在建好的项目中上传新图标就可以了，然后重新生成字体图标文件，在项目中直接替换成新文件就可以了）

3)         下载制作好的字体图标文件，下载的字体图标文件夹中的使用指引，放在项目中使用就可以了。