你必须知道的网页设计图片常识

矢量图：

通过点、线等来显示图像；

优点是文件小，放大和缩小都不会失真；

缺点是很难表现色彩层叠丰富的写实图片。

位图：

通过每个像素的颜色、深度等显示图像；

优点是利于显示色彩层叠丰富的写实图像；

缺点是文件较大，放大缩小会失真。

在web网页中看到的都是位图。

有损压缩就是在存储图像的时候并不完全真实的记录图像上每个像素点的数据信息，它会根据人眼观察现实世界的特性（人眼对光线的敏感度比对颜色的敏感度要高，生物实验证明当颜色缺失时人脑会利用与附近最接近的颜色来自动填补缺失的颜色）对图像数据进行处理，去掉那些图像上会被人眼忽略的细节，然后使用附近的颜色通过渐变或其他形式进行填充。

无损压缩则会真实的记录图像上每个像素点的数据信息，但为了压缩图像文件的大小会采取一些特殊的算法。无损压缩的压缩原理是先判断图像上哪些区域的颜色是相同的，哪些是不同的，然后把这些相同的数据信息进行压缩记录，（例如一片蓝色的天空之需要记录起点和终点的位置就可以了），而把不同的数据另外保存（例如天空上的白云和渐变等数据）。

JPEG：

特点：有损压缩图像格式，高压缩比，文件质量较低（有失真），文件较小

场景：适合允许轻微失真的像素色彩丰富的图片，更适合用来存储摄影或写实图像或是颜色层次非常丰富的图像，JPG不适用于所含颜色很少、具有大块颜色相近的区域或亮度差异十分明显的较简单的图片，不适合做色彩较少的图片，比如logo，小图标

GIF：

特点：无损压缩图像格式（无失真），8位图片格式，最多支持256种颜色（若多于256种颜色的图片用gif保存会失真）；

支持基本的透明特性，隔行扫描可以更快的加载和显示图片

场景：不适合色彩过于丰富的图片，但非常适合色彩较少的logo、小图标

PNG-8：

特点：无损压缩图像格式，8位图片格式（最多支持256种颜色，否则会失真），支持布尔透明（要么全透明，要么不透明），除了压缩算法不同外，几乎和GIF相同

场景：和GIF相同

PNG-24：

特点：无损压缩图像格式，24位图片格式（最多支持1600多万种颜色），支持alpha通道透明（支持完全透明到完全不透明的256阶透明度即半透明）