位图制作矢量图教程（了解位图和矢量图概念）

工作中，产品上线后，常常因图像使用不当让页面性能降低，造成页面卡顿。这是因为没有分清图像中的基本概念。

位图就是点阵图，由像素染色、排列而成，位图放大时，会看到很多小方块，从很远的地方看，位图看起来连续性比较好，从这一点来看，位图很像我们平时玩的拼图。

位图放大时

远处看位图的效果

矢量图是由一系列线、圆等元素构成的图像，矢量图无论拉伸多大，都不会失真。我们在网页和手机上看到的图像都是位图，有很多是矢量图转化成位图的。矢量图缺点是很难描述非常复杂的写实图像。

位图常见格式有JPG PNG TIF GIF BMP

矢量图有AI CDR

各格式位图对比

各种矢量图

在UI设计中，常用的格式JPG和PNG，JPG采用高级压缩方式，能很好地还原图像的真实性，适合显示颜色多、构成复杂的图像，JPG还可通过压缩比例控制图像大小。PNG采用无损压缩，能尽可能的压缩图像大小，还能储存alpha通道，它的颜色层次非常丰富，PNG图像较大，不适合在网页展示。简单的图像可以采用PNG格式存储，用于UI设计。

PNG最常用的保存格式为PNG8和PNG24，8和24代表色彩分辨率，PNG8支持1位布尔alpha通道，PNG24支持8位alpha通道，有256种透明度信息。

在图像保存、选择参数时，会遇到以下参数类型：

颜色表类型：

可感知：对人眼敏感的颜色赋予优先权

可选择：创建颜色表，一般尽量保存更多颜色信息

随样性：主要由绿色和蓝色

仿色：模拟计算机颜色系统中未提供的颜色，有扩散、图像、杂色三种类型。