# 图片文件格式
本文介绍和比较几种常见图片文件格式的优缺点，并介绍不同的文件格式对 Web 应用程序性能的影响。
# 有损 vs 无损
图片文件格式有可能会对图片的文件大小进行不同程度的压缩，图片的压缩分为有损压缩和无损压缩两种。
有损压缩。指在压缩文件大小的过程中，损失了一部分图片的信息，也即降低了图片的质量，并且这种损失是不可逆的，我们不可能从有一个有损压缩过的图片中恢复出全来的图片。常见的有损压缩手段，是按照一定的算法将临近的像素点进行合并。
无损压缩。只在压缩文件大小的过程中，图片的质量没有任何损耗。我们任何时候都可以从无损压缩过的图片中恢复出原来的信息。
# 索引色 vs 直接色
计算机在表示颜色的时候，有两种形式，一种称作索引颜色(Index Color)，一种称作直接颜色(Direct Color)。
索引色。用一个数字来代表（索引）一种颜色，在存储图片的时候，存储一个数字的组合，同时存储数字到图片颜色的映射。这种方式只能存储有限种颜色，通常是 256 种颜色，对应到计算机系统中，使用一个字节的数字来索引一种颜色。
直接色。使用四个数字来代表一种颜色，这四个数字分别代表这个颜色中红色、绿色、蓝色以及透明度。现在流行的显示设备可以在这四个维度分别支持 256 种变化，所以直接色可以表示 2 的 32 次方种颜色。当然并非所有的直接色都支持这么多种，为压缩空间使用，有可能只有表达红、绿、蓝的三个数字，每个数字也可能不支持 256 种变化之多。
# 点阵图 vs 矢量图
点阵图，也叫做位图，像素图。构成点阵图的最小单位是象素，位图就是由象素阵列的排列来实现其显示效果的，每个象素有自己的颜色信息，在对位图图像进行编辑操作的时候，可操作的对象是每个象素，我们可以改变图像的色相、饱和度、明度，从而改变图像的显示效果。点阵图缩放会失真，用最近非常流行的沙画来比喻最恰当不过，当你从远处看的时候，画面细腻多彩，但是当你靠的非常近的时候，你就能看到组成画面的每粒沙子以及每个沙粒的颜色。
矢量图，也叫做向量图。矢量图并不纪录画面上每一点的信息，而是纪录了元素形状及颜色的算法，当你打开一付矢量图的时候，软件对图形象对应的函数进行运算，将运算结果[图形的形状和颜色]显示给你看。无论显示画面是大还是小，画面上的对象对应的算法是不变的，所以，即使对画面进行倍数相当大的缩放，其显示效果仍然相同(不失真)。
# BMP
BitMap 的缩写，是无损的、既支持索引色也支持直接色的、点阵图。这是一种比较老的图片格式。
BMP 是无损的，但同时这种图片格式几乎没有对数据进行压缩，所以 BMP 格式的图片通常具有较大的文件大小。
虽然同时支持索引色和直接色是一个优点，但是太大的文件格式格式导致它几乎没有用武之地，现在除了在 Windows 操作系统中还比较常见之外，我们几乎看不到它。
# GIF
GIF 全称 Graphics Interchange Format，采用 LZW 压缩算法进行编码。是无损的、采用索引色的、点阵图。
GIF 是无损的，采用 GIF 格式保存图片不会降低图片质量。但得益于数据的压缩，GIF 格式的图片，其文件大小要远小于 BMP 格式的图片。
文件小，是 GIF 格式的优点，同时，GIF 格式还具有支持动画以及透明的优点。
但，GIF 格式仅支持 8bit 的索引色，即在整个图片中，只能存在 256 种不同的颜色。
GIF 格式适用于对色彩要求不高同时需要文件体积较小的场景，比如企业 Logo、线框类的图等。因其体积小的特点，现在 GIF 被广泛的应用在各类网站中。
# JPEG
JPEG 是有损的、采用直接色的、点阵图。
JPEG 图片格式的设计目标，是在不影响人类可分辨的图片质量的前提下，尽可能的压缩文件大小。这意味着 JPEG 去掉了一部分图片的原始信息，也即是进行了有损压缩。
JPEG 的图片的优点，是采用了直接色，得益于更丰富的色彩，JPEG 非常适合用来存储照片，用来表达更生动的图像效果，比如颜色渐变。
与 GIF 相比，JPEG 不适合用来存储企业 Logo、线框类的图。因为有损压缩会导致图片模糊，而直接色的选用，又会导致图片文件较 GIF 更大。
# PNG-8
PGN 全称 Portable Network Graphics。
PNG-8 是 PNG 的索引色版本。PNG-8 是无损的、使用索引色的、点阵图。
PNG 是一种比较新的图片格式，PNG-8 是非常好的 GIF 格式替代者，在可能的情况下，应该尽可能的使用 PNG-8 而不是 GIF，因为在相同的图片效果下，PNG-8 具有更小的文件体积。除此之外，PNG-8 还支持透明度的调节，而 GIF 并不支持。 现在，除非需要动画的支持，否则我们没有理由使用 GIF 而不是 PNG-8。当然了，PNG-8 本身也是支持动画的，只是浏览器支持得不好，不像 GIF 那样受到广泛的支持。可以看到 PNG-8 具有更好的透明度支持。
# PNG-24
PNG-24 是 PNG 的直接色版本。PNG-24 是无损的、使用直接色的、点阵图。
无损的、使用直接色的点阵图，听起来非常像 BMP，是的，从显示效果上来看，PNG-24 跟 BMP 没有不同。
PNG-24 的优点在于，它压缩了图片的数据，使得同样效果的图片，PNG-24 格式的文件大小要比 BMP 小得多。
当然，PNG24 的图片还是要比 JPEG、GIF、PNG-8 大得多。虽然 PNG-24 的一个很大的目标，是替换 JPEG 的使用。
但一般而言，PNG-24 的文件大小是 JPEG 的五倍之多，而显示效果则通常只能获得一点点提升。所以，只有在你不在乎图片的文件体积，而想要最好的显示效果时，才应该使用 PNG-24 格式。另外，PNG-24 跟 PNG-8 一样，是支持图片透明度的。
# SVG
SVG 全称 Scalable Vector Graphics，是无损的、矢量图。
SVG 跟上面这些图片格式最大的不同，是 SVG 是矢量图。这意味着 SVG 图片由直线和曲线以及绘制它们的方法组成。当你放大一个 SVG 图片的时候，你看到的还是线和曲线，而不会出现像素点。这意味着 SVG 图片在放大时，不会失真，所以它非常适合用来绘制企业 Logo、Icon 等。
SVG 是很多种矢量图中的一种，它的特点是使用 XML 来描述图片。借助于前几年 XML 技术的流行，SVG 也流行了很多。使用 XML 的优点是，任何时候你都可以把它当做一个文本文件来对待，也就是说，你可以非常方便的修改 SVG 图片，你所需要的只需要一个文本编辑器。SVG 并非只能绘制简单的 Logo 类的图片，它可以绘制出精致的图片的，比如下面这涨，嗯。
# WebP
WebP 是谷歌开发的一种新图片格式，WebP 是同时支持有损和无损压缩的、使用直接色的、点阵图。
从名字就可以看出来它是为 Web 而生的，什么叫为 Web 而生呢？就是说相同质量的图片，WebP 具有更小的文件体积。现在网站上充满了大量的图片，如果能够降低每一个图片的文件大小，那么将大大减少浏览器和服务器之间的数据传输量，进而降低访问延迟，提升访问体验。
在无损压缩的情况下，相同质量的 WebP 图片，文件大小要比 PNG 小 26%；在有损压缩的情况下，具有相同图片精度的 WebP 图片，文件大小要比 JPEG 小 25%~34%；
WebP 图片格式支持图片透明度，一个无损压缩的 WebP 图片，如果要支持透明度只需要 22%的格外文件大小。想象 Web 上的图片之多，百分之几十的提升，是非常非常大的优化。只可惜，目前只有 Chrome 浏览器和 Opera 浏览器支持 WebP 格式，所以 WebP 的应用并不广泛。
为了使用更先进的技术，比如 WebP 图片格式，来压缩互联网上传输的数据流量，谷歌甚至提供了 Chrome Data Compression Proxy，设置了 Chrome Data Compression Proxy 作为 Web 代理之后，你访问的所有网站中的图片，在经过 Proxy 的时候，都会被转换成 WebP 格式，以降低图片文件的大小。