作为一名前端开发工程师，或是UI设计师，对网页图片格式需要有一定的了解。
网页图片格式分为2种：一种是位图，另一种是矢量图。
一、位图
位图3种格式：“.jpg”、“.png”、“.gif”。
位图，又称为点阵图像，是由称作像素（图片元素）的单个点组成的。
通常位图又分为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位图的区别。
（1）JPG格式
JPG可以很好处理大面积色调的图像，如相片、网页一般的图片。
（2）PNG格式
PNG支持透明信息。所谓透明，即图像可以浮现在其他页面文件或页面图像之上，如图1。可以说，PNG是专门为web创造的图像，通常大部分页面设计者在页面中加入Logo或者是一些点缀的小图像时，都会选择使用PNG格式。
由于JPG格式容量较大，在保证图片清晰、逼真的前提下，网页中不可能大范围使用文件较大的jpg格式图片。PNG格式图片体积小，而且无损压缩，能保证网页的打开速度，所以PNG格式图片是很好的选择。
由于PNG优秀的特点，PNG格式图片可以称为“网页设计专用格式”。
我们在同一个网页中放入同样的jpg图片与png图片。为了明显区分，我们为每个图片加了一个边框，效果如下：
（3）GIF格式
GIF只支持256色以内的图像。所以，GIF格式的图片效果是很差的。但是，GIF有一个最大的特点，就是可以制作动画，图像作者利用图像处理软件，将静态的GIF图像设置为单帧画面，然后把这些单帧画面连在一起，设置好一个画面到下一个画面的间隔时间，最后保存为GIF格式就可以了。可以说，这就是简单的逐帧动画。目前这种格式的动画在互联网上广为流行。
总结**：当处理色调复杂、绚丽的图像时，如照片、图画等，适合使用JPG格式；而处理一些logo、banner、简单线条构图的时候，适合使用PNG格式；GIF格式通常只适合表达动画效果。**
二、矢量图
矢量图，又称为“向量图”。矢量图是计算机图形学中用点、直线或者多边形等基于数学方程的几何图元表示图像。
矢量图是以一种数学描述的方式来记录图像内容的图像格式。如一个方程y=kx，当这个小方程体现在坐标系上的时候，设置不同的参数可以绘制不同角度的直线，这就是矢量图的构图原理。
矢量图最大的优点是无论放大、缩小或旋转等不会失真；最大的缺点是难以表现色彩层次丰富的逼真图像效果（图片效果差）。
在网页中，比较少用到矢量图，一般在网页logo和矢量插图我们才有可能用到矢量图。矢量图主要用于印刷行业，因为矢量图放大并不会失真，这样在印刷时就不会出现毛边或者模糊的情况，这一点是Photoshop都比不上的。随着3D和Flash发展，我们主要利用矢量图来造型，然后导入到3D MAX放样或者在Flash动画中使用。
矢量图格式
矢量图的后缀一般有“.ai”、“.cdf”、“.fh”、“.swf”。“.ai”后缀的文件是一种静帧的矢量文件格式，“.cdf”后缀的文件多以工程图为常见。而“.swf”格式文件其实指的是flash，flash也是页面中最常见的一种动画。
三、位图与矢量图的区别
1、位图受分辨率的影响，而矢量图不受分辨率影响。因此，当图片放大时，位图清晰度会变低，而矢量图清晰度不变。
2、位图组成单位是“像素”，而矢量图组成单位是“数学向量”；
3、位图适用于色彩丰富的图片，而矢量图却不适用于色彩丰富的图片；
4、位图常用于网页中的照片等，容量较大；矢量图常用于印刷行业、网页logo或矢量插图。
（备注：文章内容摘自绿叶学习网）
