前端角度看图片

图片放大之后，你会看到图片上是一个个的小方格，这样的小格子就是像素。

在计算机中，像素用二进制来表示。所以二进制的位数越多，那么对于的色彩也就越丰富。

想象下，一位的二进制是(0或1), 那么就两种情况，如果2位二进制呢？那就是2的2次方个颜色。如果8位二进制呢？那就是2的8次方个颜色(256)。

根据图的类型分两大类：

点阵图(位图)
矢量图

位图(点阵图)

位图，也叫做点阵图。是使用像素阵列来表示的图像。位图的像素都分配有特定的位置和颜色值。每个像素的颜色信息由RGB组合或者灰度值表示。

根据位深度,可将位图分为1、4、8、16、24及32位图像等。每个像素使用的信息位数越多，可用的颜色就越多，颜色表现就越逼真，相应的数据量越大。例如，位深度为 1 的像素位图只有两个可能的值（黑色和白色），所以又称为二值位图。位深度为 8 的图像有 28（即 256）个可能的值。位深度为 8 的灰度模式图像有 256 个可能的灰色值。[1]

常见的比如：jpg、png、webp等，我们平时遇到的大多数都是位图。

详细了解概念前往：位图

矢量图

矢量图形是计算机图形学中用点、直线或者多边形等基于数学方程的几何图元表示图像。矢量图形与使用像素表示图像的位图不同。

常见的就是 svg 格式的。

详细了解概念前往：矢量图

根据压缩分类

无压缩
无损压缩
有损压缩

无压缩

这个就是不对图片数据进行压缩，呈现原图片。BMP 格式是其中之一。

无损压缩

指图片被压缩之后没有任何损害。保证了图片的质量的同时减少了图片大小。

png 是其中的代表。

有损压缩

指在压缩文件大小的过程中，损失了一部分图片的信息，也即降低了图片的质量，并且这种损失是不可逆的，我们不可能从一个有损压缩过的图片中恢复出完整的图片。

jpg 是其中的代表。

常见的图片格式解析

GIF

无损压缩、索引色、透明、动画

他是一种基于 LZW 算法连续色调的无损的基于索引色的压缩格式。其压缩率一般在 50% 左右。

GIF 的特性是帧动画。

相比古老的bmp格式，尺寸较小，而且支持透明(不支持半透明，因为不支持 Alpha 透明通道 )和动画。

优势

优秀的压缩算法使其在一定程度上保证图像质量的同时将体积变得很小。
可插入多帧，从而实现动画效果。
可设置透明色以产生对象浮现于背景之上的效果。

缺点

由于采用了 8 位压缩，最多只能处理 256 种颜色，故不宜应用于真彩色(文末的附录有解释)图片。

适合场景

色彩简单的 logo、icon、线框图、文字输出等

JPG/JPEG

有损压缩、直接色、适合大图、体积小

JPEG 格式是最常见的一种图像格式，文件后辍名为“.JPEG”或“.jpg”。

JPEG 是一种很典型的使用有损压缩图像格式，也就是说使用者每次进行 JPEG 的存档动作后，图档的一些内容细节都会遭到永久性的破坏，尤其是使用过高的压缩比例，将使最终解压缩后恢复的图像质量明显降低，如果追求高品质图像，不宜采用过高压缩比例。

JPEG 图片格式的设计目标，是在不影响人类可分辨的图片质量的前提下，尽可能的压缩文件大小。

Baseline JPEG 和 Progressive JPEG

JPEG 有两种保存方式：Baseline JPEG（标准型）、Progressive JPEG（渐进式）。两种格式有相同尺寸以及图像数据，他们的扩展名也是相同的，唯一的区别是二者显示的方式不同。

Baseline JPEG

Baseline JPEG 文件存储方式是按从上到下的扫描方式，把每一行顺序的保存在 JPEG 文件中。打开这个文件显示它的内容时，数据将按照存储时的顺序从上到下一行一行的被显示出来，直到所有的数据都被读完，就完成了整张图片的显示。如果文件较大或者网络下载速度较慢，那么就会看到图片被一行行加载的效果，这种格式的JPEG没有什么优点，因此，一般都推荐使用Progressive JPEG。

Progressive JPEG

和 Baseline 一遍扫描不同，Progressive JPEG 文件包含多次扫描，这些扫描顺寻的存储在 JPEG 文件中。打开文件过程中，会先显示整个图片的模糊轮廓，随着扫描次数的增加，图片变得越来越清晰。这种格式的主要优点是在网络较慢的情况下，可以看到图片的轮廓知道正在加载的图片大概是什么。在一些网站打开较大图片时，你就会注意到这种技术。

优点

可以支持 24bit 真彩色，普遍应用于需要连续色调的图像如色彩丰富的图片、照片等；
可利用可变的压缩比以控制文件大小；
支持交错（对于渐近式 JPEG 文件）；

缺点

JPEG 不适合用来存储企业 Logo、线框类的图。因为有损压缩会导致图片模糊，而直接色的选用，又会导致图片文件较GIF更大。
有损耗压缩会使原始图片数据质量下降。
JPEG 图像不支持透明度处理，透明图片需要召唤 PNG 来呈现。

适合场景

JPG 适用于呈现色彩丰富的图片，在我们日常开发中，JPG 图片经常作为大的背景图、轮播图或 Banner 图出现。

GIF vs JPEG

由于 GIF 与 JPEG 有着如此不同的特性，因此我们可以很轻易的选择何时该用哪一种格式来输出我们需要的图档：当图片拥有丰富的色彩时，并且没有明显锐利反差的边缘线条时，选择 JPEG 可以得到最好的输出结果，照片就是最好的例子；当图片是拥有明确边缘的线条图、没有使用太多色彩、甚至可能需要透明背景时，GIF 是很好的选择，档案小、画质又精美。

PNG

无损压缩、索引色、支持透明、体积大

便携式网络图形（简称 PNG，英语全称：Portable Network Graphics）。PNG 能够提供长度比 GIF 小30%的无损压缩图像文件。它同时提供 24 位和 32 位真彩色图像支持以及其他诸多技术性支持。由于PNG 优秀的特点，PNG 格式图片可以称为“网页设计专用格式”。PNG 最初的开发目的是为了作为 GIF 的替代方案的，作为做新开发的影像传输文件格式，PNG 同样使用了无损压缩格式，事实上 PNG 的开发就是因为 GIF 所使用的无损压缩格式专利问题而诞生的。

PNG 有三种形式，下面分别介绍一下他们的区别。

PNG-8

PNG-8 是 PNG 的索引色版本。PNG-8 是无损的、使用索引色的、点阵图(位图)。

PNG-8 是非常好的 GIF 替代者，在可能的情况下，应该尽可能的使用 PNG-8 而不是 GIF，因为在相同的图片效果下，PNG-8 具有更小的文件体积。除此之外，PNG-8 还支持透明度的调节，而 GIF 并不支持。现在，除非需要动画的支持，否则我们没有理由使用 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 一样，是支持图片透明度的。

理论上来说，当你追求最佳的显示效果、并且不在意文件体积大小时，是推荐使用 PNG-24 的。

实践当中，为了规避体积的问题，我们一般不用PNG去处理较复杂的图像。当我们遇到适合 PNG 的场景时，也会优先选择更为小巧的 PNG-8。

PNG-32

PNG-32 跟 PNG-24 的区别就是多了一个 Alpha 通道，用来支持半透明，其他的跟 PNG-24 基本一样。

优点：

支持高级别无损耗压缩；
支持 alpha 通道透明度；
支持 256 色调色板技术以产生小体积文件
最高支持 24 位真彩色图像以及 8 位灰度图像。
支持图像亮度的 Gamma 校准信息。
支持存储附加文本信息，以保留图像名称、作者、著作权、创作时间、注释等信息。
渐近显示和流式读写，适合在网络传输中快速显示预览效果后再展示全貌。

缺点

较旧的浏览器 IE6- 和程序可能不支持 PNG 文件；
与 JPEG 的有损耗压缩相比，PNG 提供的压缩量较少；
与 GIF 格式相比，对多图像文件或动画文件不提供任何支持。

适合场景

呈现小的 Logo、颜色简单且对比强烈的图片或背景等。

关于 PNG 的小知识点

PNG 分为两种，一种是 Index，一种是 RGB。Index 记录同一种颜色的值和出现的位置（简单地说，比如一个 2px*2px 的超级小图，从左往右从上往下依次的颜色是红，白，白，红，那么记录的方法就是“红-1,4；白-2,3”）；而 RGB 图则把所有像素的色值依次记录下来（即“红，白，白红”）。对于相同的图片，Index 格式的尺寸总是小于 RGB。

其中 PNG-8 就是 Index，称作为索引色，而 PNG-24 和 PNG-32 是 RGB 形式，也可称作为直接色。

因为 PNG 是无损压缩，保留了图片需要的所有信息，所以索引色是可以转化为直接色的。