工作中，产品上线后，常常因图像使用不当让页面性能降低，造成页面卡顿。这是因为没有分清图像中的基本概念。
位图和矢量图位图就是点阵图，由像素染色、排列而成，位图放大时，会看到很多小方块，从很远的地方看，位图看起来连续性比较好，从这一点来看，位图很像我们平时玩的拼图。
位图放大时
远处看位图的效果
矢量图是由一系列线、圆等元素构成的图像，矢量图无论拉伸多大，都不会失真。我们在网页和手机上看到的图像都是位图，有很多是矢量图转化成位图的。矢量图缺点是很难描述非常复杂的写实图像。
常见图片格式位图常见格式有JPG PNG TIF GIF BMP
矢量图有AI CDR
各格式位图对比
各种矢量图
在UI设计中，常用的格式JPG和PNG，JPG采用高级压缩方式，能很好地还原图像的真实性，适合显示颜色多、构成复杂的图像，JPG还可通过压缩比例控制图像大小。PNG采用无损压缩，能尽可能的压缩图像大小，还能储存alpha通道，它的颜色层次非常丰富，PNG图像较大，不适合在网页展示。简单的图像可以采用PNG格式存储，用于UI设计。
PNG8和PNG24PNG最常用的保存格式为PNG8和PNG24，8和24代表色彩分辨率，PNG8支持1位布尔alpha通道，PNG24支持8位alpha通道，有256种透明度信息。
图片参数设置在图像保存、选择参数时，会遇到以下参数类型：
颜色表类型：
可感知：对人眼敏感的颜色赋予优先权
可选择：创建颜色表，一般尽量保存更多颜色信息
随样性：主要由绿色和蓝色
仿色：模拟计算机颜色系统中未提供的颜色，有扩散、图像、杂色三种类型。
什么是位图?什么是矢量图??
位图亦称为点阵图像或绘制图像，是由称作像素(图片元素)的单个点组成的。矢量图是根据几何特性来绘制图形，矢量可以是一个点或一条线，矢量图只能靠软件生成，文件占用内在空间较小，因为这种类型的图像文件包含独立的分离图像，可以自由无限制的重新组合。
位图这些点可以进行不同的排列和染色以构成图样。当放大位图时，可以看见赖以构成整个图像的无数单个方块。
Photoshop(除了包含路径部分)、ACDSee、美图秀秀主要处理的是位图效果。
矢量图的特点是放大后图像不会失真，和分辨率无关。
CorelDRAW、AI、ID、FIT都是矢量软件，主要处理矢量图效果。
位图和矢量图的区别
1、直观的区别
位图显示的效果非常真实，但放大之后就闭枣不精细了。这就是位图可以达到的效果。矢量图效果有线块组成，像手绘出来的效果，它的图案可以很精细，笔画很精细，每个拐角都可以很精细，但它是一个不真实的效轿丛拆果，更像一种美术效果。
2、本质的区别
位图由像素组成放大后失郑余真，矢量图不以像素为单位，由线条组成放大后无影响。
3、文件格式的不同
位图格式：JPG、BMP、TIFF、PSD等。
矢量格式：CDR、AI、EPS、PS、PDF等。
温馨提示：一般矢量格式里可以兼容位图格式。
4、文档容量的区别
位图是幅画越大(像素越多)文件容量越大。
矢量图是图形越复杂(曲线节点越多)容量越大。
温馨提示：这一特点也是我们设计制作过程中选择软件的依据，如果制作幅较大，内容只有几个图形和文字时，就要选择矢量软件进行制作，这样效率更好。
矢量图和位图是什么？
位图和矢量图是计算机图形中的两大概念，这两种图形都被广泛应用到出版，印刷，互联网[如flash和svg]等各个方面，他们各有优缺点，两者各自的好处几乎是无法相互替代的，所以，长久以来，矢量跟位图在应用中一直是平分秋色。位图[bitmap]，也叫做点阵图，删格图象，像素图，简单的说，就是最小单位由象素构成的图，缩放会失真。构成位图的最小单位是象素，位图就是由象素阵列的排列来实现其显示效果的，每个象素有自己的颜色信息，在对位图图像进行编辑操作的时候，可操作的对象是每个象素，我们可以改变图像的色相、饱和度、明度，从而改变图像的显示效果。举个例子来说，位图图像就好比在巨大的沙盘上画好的画，当你从远处看的时候，画面细腻多彩，但是当你靠的非常近的时候，你就能看到组成画面的每粒沙子以及每个沙粒单纯的不可变化颜色。
矢量图[vector]，备此也叫做向量图，简单禅袭的说，就是缩放不失真的图像格式。矢量图是通过多个对象的组合生成的，对其中的每一个对象的纪录方式，都是以数学函数来实现的，也就是说，矢量图实际上并不是象位图那样纪录画面上每一点的信息，而是纪录了元素形状及颜色的算法，当你打开一付矢量图的时候，软件对图形象对应的函数进行运算，将运算结果[图形的形状和颜色]显示给你看。无论显示画面是大还是小，画面上的对象对应的算法是不变的，所以，即使对画面进行倍数相当大的缩放，其显示效果仍然相同[不失真]。举例来说，矢量图就好比画仿袭迅在质量非常好的橡胶膜上的图，不管对橡胶膜怎样的常宽等比成倍拉伸，画面依然清晰，不管你离得多么近去看，也不会看到图形的最小单位。