一、首先我们来介绍下矢量图和位图

矢量图和位图，一般情况下我们都使用位图；

矢量图的优点在于文件相对较小，并且放大缩小不会失真。缺点则是这些完美的几何图形很难表现自然度高的写实图像。

位图的优点是利于显示色彩层次丰富的写实图像。缺点则是文件大小较大，放大和缩小图像会失真；位图又叫 像素图或栅格图。

尽管我们在web页面中所使用的JPG、PNG、GIF格式的图像都是位图，即他们都是通过记录像素点的数据来保存和显示图像，但这些不同格式的图像在记录这些数据时的方 式却不一样，这就是涉及到有损压缩和无损压缩的区别。

二、我们再来介绍有损压缩和无损压缩

有损压缩-你看到的不一定是真实的 JPG是我们最常见的采用有损压缩对图像信息进行处理的图片格式。

无损压缩-最精确的拼图 PNG是我们最常见的一种采用无损压缩的图片格式。

这里我们不妨把JPG和PNG的一些特性进行一个简单对比：

格式 压缩模式 交错支持 透明支持 动画支持 JPG 有损压缩 支持 不支持 不支持 PNG 无损压缩 支持 支持 不支持

三、 JPG的特性 1

、支持摄影图像或写实图像的高级压缩，并且可利用压缩比例控制图像文件大小。

2、有损压缩会使图像数据质量下降，并且在编辑和重新保存JPG格式图像时，这种下降损失会累积。

3、JPG不适用于所含颜色很少、具有大块颜色相近的区域或亮度差异十分明显的较简单的图片。

PNG的特性

1、能在保证最不失真的情况下尽可能压缩图像文件的大小。

2、PNG用来存储灰度图像时，灰度图像的深度可多到16位，存储彩色图像时，彩色图像的深度可多到48位，并且还可存储多到16位的α通道数据。

3、对于需要高保真的较复杂的图像，PNG虽然能无损压缩，但图片文件较大，不适合应用在Web页面上。

四、应用

什么时候应该使用PNG

根据经验具备上述条件的图像一般是使用photoshop或其他软件中的矢量工具进行绘制然后再保存成位图的图像。

什么时候应该使用JPG

对于写实的摄影图像或是颜色层次非常丰富的图像采用JPG的图片格式保存一般能达到最佳的压缩效果。

根据经验我们在页面中使用的商品图片、采用人像或者实物素材制作的广告Banner等图像更适合采用JPG的图片格式保存。

技术博客大牛： a、https://link.zhihu.com/?target=http%3A//www.ibm.com/developerworks/都是一线工程师，技术性很强。

b、https://link.zhihu.com/?target=http%3A//www.infoq.com/都是大牛写的文章

c、https://link.zhihu.com/?target=http%3A//www.oracle.com/technetwork/java/javase/overview/index.html/Java 官网，工具，资料下载。

d、https://link.zhihu.com/?target=http%3A//www.tutorialspoint.com/java/Java 教程，什么框架都有。

png、jpg、gif三种图片格式的区别