共计 3751 个字符，预计需要花费 10 分钟才能阅读完成。
前言
作为一个客户端开发，对于图片格式一直没有一个清晰的了解，这里简单的罗列出各种图片格式的区别，文章中有部分是他人的引用，会在底部放上链接，望轻喷。
概念了解
有损压缩 & 无损压缩
有损压缩（lossy compression）：
有损压缩算法是一种数据压缩方法，经过此方法压缩、解压的数据会与原始数据不同但是非常接近。它是与无损数据压缩相对的压缩方法。有损数据压缩又称破坏性资料压缩、有损压缩、有损压缩、不可逆压缩。其原理是借由将次要的信息数据舍弃，牺牲一些质量来减少数据量、提高压缩比。这种方法经常用于压缩多媒体数据（音频、视频、图片）。根据各种格式设计的不同，有损数据压缩都会有代间损失——每次压缩与解压文件都会带来渐进的质量下降。
无损压缩（Lossless Compression）：
指数据经过压缩后，信息不受损失，还能完全恢复到压缩前的原样。无损压缩通常用于严格要求“经过压缩、解压缩的数据必须与原始数据一致”的场合。典型的例子包括文字文件、程序可执行文件、程序源代码。有些图片文件格式，例如 PNG 和 GIF，使用的是无损压缩。
索引色 & 直接色
索引色：
索引颜色是一种以有限的方式管理数字图像颜色的技术，以节省计算机内存和文件存储，同时加速显示刷新和文件传输。即用一个数字来代表（索引）一种颜色，在存储图片的时候，存储一个数字的组合，同时存储数字到图片颜色的映射。这种方式只能存储有限种颜色，通常是 256 种颜色，对应到计算机系统中，使用一个字节的数字来索引一种颜色。
索引色常见有 1 位（即黑白），8 位（即灰阶 /256 色），16 位（即高彩），24 位（即真彩），30/36/48 位（即全彩），更多详细参考该百科。
直接色：
使用四个数字来代表一种颜色，这四个数字分别代表这个颜色中红色、绿色、蓝色以及透明度（即 rgba）。现在流行的显示设备可以在这四个维度分别支持 256 种变化，所以直接色可以表示 2 的 32 次方种颜色。当然并非所有的直接色都支持这么多种，为压缩空间使用，有可能只有表达红、绿、蓝的三个数字，每个数字也可能不支持 256 种变化之多。
位图 & 矢量图：
位图：
位图[bitmap]，也叫做点阵图，栅格图像，像素图，简单的说，就是最小单位由像素构成的图，缩放会失真。构成位图的最小单位是像素，位图就是由像素阵列的排列来实现其显示效果的，每个像素有自己的颜色信息，在对位图图像进行编辑操作的时候，可操作的对象是每个像素，我们可以改变图像的色相、饱和度、明度，从而改变图像的显示效果。举个例子来说，位图图像就好比在巨大的沙盘上画好的画，当你从远处看的时候，画面细腻多彩，但是当你靠的非常近的时候，你就能看到组成画面的每粒沙子以及每个沙粒单纯的不可变化颜色。
矢量图：
矢量图 [vector]，也叫做向量图，简单的说，就是缩放不失真的图像格式。矢量图是通过多个对象的组合生成的，对其中的每一个对象的纪录方式，都是以数学函数来实现的，也就是说，矢量图实际上并不是象位图那样记录画面上每一点的信息，而是纪录了元素形状及颜色的算法，当你打开一幅矢量图的时候，软件对图形相对应的函数进行运算，将运算结果[图形的形状和颜色] 显示给你看。无论显示画面是大还是小，画面上的对象对应的算法是不变的，所以，即使对画面进行倍数相当大的缩放，其显示效果仍然相同[不失真]。举例来说，矢量图就好比画在质量非常好的橡胶膜上的图，不管对橡胶膜怎样的常宽等比成倍拉伸，画面依然清晰，不管你离得多么近去看，也不会看到图形的最小单位。
图片类型
BMP
BMP 取自位图 BitMaP 的缩写，也称为 DIB（与设备无关的位图），是一种与显示器无关的位图数字图像文件格式。BMP 同时支持索引色和直接色，但是其几乎没有压缩，所以通常图片非常的大，也导致了其几乎没有用武之地，现在除了在 Windows 操作系统中还比较常见之外，我们几乎看不到它。再加上浏览器的不支持，所以作为 web 开发，更加少于看到 BMP。
这里简单描述一下 BMP 解析成二进制时的结构：
位置
含义
bmp 文件头(bmp file header)
提供文件的格式、大小等信息
位图信息头(bitmap information)
提供图像数据的尺寸、位平面数、压缩方式、颜色索引等信息
调色板(color palette)（如果有的话）
如使用索引来表示图像，调色板就是索引与其对应的颜色的映射表
位图数据(bitmap data)
则图片数据
GIF
全称 Graphics Interchange Format，采用 LZW 压缩算法进行编码。是无损的、采用索引色的、点阵图。GIF 是无损的，采用 GIF 格式保存图片不会降低图片质量。但得益于数据的压缩，GIF 格式的图片，其文件大小要远小于 BMP 格式的图片。文件小，是 GIF 格式的优点，同时，GIF 格式还具有支持动画以及透明的优点。但，GIF 格式仅支持 8bit 的索引色，即在整个图片中，只能存在 256 种不同的颜色。
简单介绍下 GIF 使用的 LZW 压缩算法，详细可参考该文章：
LZW 编码 (Encoding) 的核心思想其实比较简单，就是把出现过的字符串映射到记号上，这样就可能用较短的编码来表示长的字符串，实现压缩。比如：我们可以将 ABCDEFG 转成 1 来代表，这样数据就会减少很多。再加上，LZW 编码是自解释 (self-explaining) 的，即映射字典不会写到压缩数据里，他是在解码的过程中还原出编码时用的字典。
JPEG
JPEG 是有损的、采用直接色的、点阵图。JPEG 也是一种针对照片影像而广泛使用的有损压缩标准方法。JPEG 图片格式的设计目标，是在不影响人类可分辨的图片质量的前提下，尽可能的压缩文件大小。这意味着 JPEG 去掉了一部分图片的原始信息，也即是进行了有损压缩。JPEG 的图片的优点，是采用了直接色，得益于更丰富的色彩，JPEG 非常适合用来存储照片，用来表达更生动的图像效果，比如颜色渐变。
JPEG 的算法比较复杂，如果有兴趣可以参考该文章
其大概分为三步：
把数据分为“重要部分”和“不重要部分”
滤掉不重要的部分
保存
PNG
便携式网络图形（英语：Portable Network Graphics，缩写：PNG）是一种无损压缩的位图图形格式，支持索引、灰度、RGB 三种颜色方案以及 Alpha 通道等特性。PNG 的开发目标是改善并取代 GIF 作为适合网络传输的格式而不需专利许可，所以被广泛应用于互联网及其他方面上。
PNG-8
PNG- 8 是无损的、使用索引色的、点阵图。PNG 是一种比较新的图片格式，PNG- 8 是非常好的 GIF 格式替代者，在可能的情况下，应该尽可能的使用 PNG- 8 而不是 GIF，因为在相同的图片效果下，PNG- 8 具有更小的文件体积。除此之外，PNG- 8 还支持透明度的调节，而 GIF 并不支持。现在，除非需要动画的支持，否则我们没有理由使用 GIF 而不是 PNG-8。当然了，PNG- 8 本身也是支持动画的，只是浏览器支持得不好，不像 GIF 那样受到广泛的支持。
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 一样，是支持图片透明度的。
PNG-32
PNG32 也是 PNG 的直接色版本。其表现与 PNG-24 差不多。
三者的区别在于：
PNG-32 每个像素的深度为 32bits，其中 RGBA 四个通道各占 8bits。所谓的 RGBA 四个通道，就是红，绿，蓝，透明 这四种色值各自的大小，都用 8bits 来表示（0～255）。
PNG-24 的像素深度为 24bits，其中 RGB 三个通道各占 8bits。
PNG- 8 则是使用 8 位的索引色。
SVG
SVG 是很多种矢量图中的一种，它的特点是使用 XML 来描述图片。借助于前几年 XML 技术的流行，SVG 也流行了很多。使用 XML 的优点是，任何时候你都可以把它当做一个文本文件来对待，也就是说，你可以非常方便的修改 SVG 图片，你所需要的只需要一个文本编辑器。如果你是一个前端开发，那你应该对其了解比较多。
图片比较与场景应用
类型
优点
缺点
应用场景
BMP
无损压缩，图质最好，支持索引色和直接色
文件过大
目前仅存于 WINDOWS 系统
GIF
无损压缩，支持动画及透明
仅支持 256 种颜色，画质差
需要动画的需求
JPEG
文件小
有损压缩，画质损失
不考虑过好画质且需响应速度较快，如大背景图
PNG-8
无损压缩，支持透明
画质中等
应用于大多数中小图且要求画质比较好的需求
SVG
支持放大缩小而不影响画质
编写麻烦，性能差
多应用于 ICON 之类
一图胜前言
待补充
总结
了解各种图片的格式，有助于我们与设计同事的沟通，与大家共勉。
引用 & 参考
图片格式那么多，哪种更适合你？
