一、位图
1、位图简介
位图，又称为点阵图像，是由称作像素（图片元素）的单个点组成的。
通常位图又分为8位、16位、24位和32位。
所谓8位图并不是图像只有8种颜色，而是28（即256）种颜色，8位图指的是用8个bits来表示颜色。从人眼的感觉来说，16位色基本能满足需要了。
24位色又称为“真彩色”。224，大概是1600万之多，这个数字差不多是人眼可以分辨颜色的极限了。
32位色并不是232的发色数，其实也是224种颜色，不过它增加了28阶颜色的灰度，也就是8位透明度，因此就规定它为32位色。
在制作页面的时候，设计者一般选择24位图像。32位图像虽然质量好，但同时也带来更大的图像容量。如果一个页面使用体积过大的画，会使得浏览器加载页面速度变慢，事实上，一般肉眼也很难分辨24位图和32位图的区别。
放大原始位图，会使图像效果失真，缩小原始位图，同样会使图像效果失真，这是因为缩小图像，减少的是图像中像素的数量。
2、位图格式
位图3种格式：“.jpg”、“.png”、“.gif”。
（1）JPG格式
JPG可以很好处理大面积色调的图像，如相片、网页一般的图片。
（2）PNG格式
PNG支持透明信息。所谓透明，即图像可以浮现在其他页面文件或页面图像之上。可以说，PNG是专门为web创造的图像，通常大部分页面设计者在页面中加入lLogo或者是一些点缀的小图像时，都会选择使用PNG格式。
由于JPG格式容量较大，在保证图片清晰、逼真的前提下，网页中不可能大范围使用文件较大的jpg格式图片。PNG格式图片体积小，而且无损压缩，能保证网页的打开速度，所以PNG格式图片是很好的选择。
由于PNG优秀的特点，PNG格式图片可以称为“网页设计专用格式”。
（3）GIF格式
GIF只支持256色以内的图像。所以，GIF格式的图片效果是很差的。但是，GIF有一个最大的特点，就是可以制作动画，图像作者利用图像处理软件，将静态的GIF图像设置为单帧画面，然后把这些单帧画面连在一起，设置好一个画面到下一个画面的间隔时间，最后保存为GIF格式就可以了。可以说，这就是简单的逐帧动画。目前这种格式的动画在互联网上广为流行。
3、位图绘制工具
（1）Adobe公司的Photoshop软件；
（2）Windows系统的画图；
二、矢量图
1、矢量图简介
矢量图最大的优点是无论放大、缩小或旋转等不会失真；最大的缺点是难以表现色彩层次丰富的逼真图像效果（图片效果差）。一般在网页logo和矢量插图我们才有可能用到矢量图。
2、矢量图格式
矢量图的后缀一般有“.ai”、“.cdf”、“.fh”、“.swf”。“.ai”后缀的文件是一种静帧的矢量文件格式，“.cdf”后缀的文件多以工程图为常见。而“.swf”格式文件其实指的是flash，flash也是页面中最常见的一种动画。
3、矢量图绘制工具
（1）Adobe公司的illustrator
（2）Corel公司的CorelDRAW
三、位图与矢量图的区别
1、位图受分辨率的影响，而矢量图不受分辨率影响。因此，当图片放大时，位图清晰度会变低，而矢量图清晰度不变。
2、位图组成单位是“像素”，而矢量图组成单位是“数学向量”；
3、位图适用于色彩丰富的图片，而矢量图却不适用于色彩丰富的图片；
4、位图常用于网页中的照片等，容量较大；矢量图常用于印刷行业、网页logo或矢量插图。