图片格式：gif / png / pg / webp 介绍

本文引自：https://www.cnblogs.com/changyangzhe/articles/5718285.html

GIF介绍

GIF 意为Graphics Interchange format（图形交换格式），GIF图片的扩展名是gif。现在所有的图形浏览器都支持GIF格式，而且有的图形浏览器只熟悉GIF格式。
GIF 是一种索引颜色格式，在颜色数很少的情况下，产生的文件极小，它的优点主要有：

.GIF格式支持背景透明。

.GIF格式支持动画。

.GIF格式支持图形渐进。

.GIF格式支持无损压缩。

.水平扫描。

缺点：GIF这种索引颜色格式最大的缺点就是它只有256种颜色，这对于照片质量的图片是显然不够的。

JPG介绍

JPEG 代表Joint Photograhic Experts Group（联合图像专家组），这种格式经常写成JPG，JPG图片的扩展名为jpg。

JPG 最主要的优点是能支持上百万种颜色，从而可以用来表现照片。此外，由于JPG图片使用更有效的有损压缩算法，从而使文件长度更小，下载时间更短。
有损压缩会放弃图像中的某些细节，以减少文件长度。它的压缩比相当高，使用专门的JPG压缩工具其压缩比可达180：，而且图像质量从浏览角度来讲质量受损不会太大。
这样就大大方便了网络传输和磁盘交换文件。
JPG较GIF更适合于照片，因为在照片中损失一些细节不像对艺术线条那么明显。另外，JPG对照片的压缩比例更大，而最后的质量也更好。

缺点：但是从长远来看，JPG随着带宽的不断提高和存储介质的发展，它也应该是一种被淘汰的图片格式，因为有损压缩对图像会产生不可恢复的损失。
所以经过压缩的JPG的图片一般不适合打印，在备份重要图片时也最好不要使用JPG。还有，JPG也不如GIF图像那么灵活，它不支持图形渐进、背景透明，更不支持动画。

PNG介绍

PNG 是20世纪90年代中期开始开发的图像文件存储格式，其目的是企图替代GIF和TIFF文件格式，同时增加一些GIF文件格式所不具备的特性。
流式网络图形格式(Portable Network Graphic Format，PNG)名称来源于非官方的“PNG's Not GIF”，是一种位图文件(bitmap file)存储格式，读成“ping”。
PNG用来存储灰度图像时，灰度图像的深度可多到16位，存储彩色图像时，彩色图像的深度可多到48位，并且还可存储多到16位的α通道数据。PNG使用从LZ77派生的无损数据压缩算法。

三种图片格式应用

这三种格式各有优缺点，其中PNG优点多多。虽然普及得还很一般，但是其非凡的优越性已经让我们对其产生非常大的爱好。
至少我现在很喜欢这种格式。当然了对于制作页面的制作人员来说，页面总体积的大小那就是竞争力。
所以我们还是必需要注重这三种格式的混合使用。那以什么时候用GIF什么时候用PNG 什么时候用JPG呢？我们下面一一来分析。

在实际的工作中，我发现一般的纯色的图形，比如一些小图标、平铺背景其中的色彩比较少，那么作为GIF格式虽然只有256种色彩，但是应对这种类型的图片那一定是非常的合适的。
当然了，不排除有一些非凡的小图标色彩的丰富性，但是相信作为小图标其色彩有点损失也不会影响到整体的视觉效果，
所以GIF 的适用范围是：小图标、平铺背景等色彩比较少的小型图片。

那么大图片又怎么选择呢，首先我们先了解一下JPG，我们使用Photoshop的朋友都知道，在最后导出图片时会有一个地方让我们选择这个JPG 图片的图片品质，
%是表示无压缩，当我们拿同一张图片导出不同的品质图片对比时我们发现品质低的很明显会比品质高的脏了很多，
这样照片看起来就很不好，当然我们也发现这种情况在偏大色块的图片中犹为突出。所以比如天空、人像。
非凡人像面部就会出现很难看的黑斑。当然假如对于照片质量要求不严格可以使用JPG并且降低品质。但是不适用于背景、小图标。

最后：介绍WEBP格式

Webp格式：
Google开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/，
并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。
当然其也是一种有损压缩，其主要目的就是加快网络图片的传输效率，让图片能更快的显示在用户的眼前。
目前所知道的只有高版本的W3C浏览器才支持这种格式，比如chorme39+，safari7+等等。