图片各种格式全解析

前言

随着web的发展，网站资源的流量也变得越来越大。据统计，60% 的网站流量均来自网站图片，可见对图片合理优化可以大幅影响网站流量，减小带宽消耗和服务器压力。

有时候你花大力气去配置 webpack 使打包体积减少，不如好好优化几张图片，这篇文章就是让你明白如何选择正确的图片，并且让你明白这么多图片格式，在什么场景下使用什么格式。

基本概念

在进入正题之前，先聊聊一些图片相关的基本概念。

一张照片（位图）不断放大之后，会看到一个个小格子，这些小格子，叫像素。

[图片上传失败...(image-ef1246-1558193148924)]

一个格子（像素），在计算机中，用二进制来表示，使用的二进制位数越多，像素的色彩就越丰富。

举个🌰，如果一个像素用一位二进制数表示，能有多少种颜色呢？

两种，一个二进制位，要不放 0（表示黑色），要不放 1（表示白色）

下图展示了一个像素二进制的位数最多可以展示多少种颜色。

[图片上传失败...(image-134631-1558193148924)]

在对图片有了基本的了解之后，接下来对图片进行分下类，有利于理解各种格式图片的特点。

根据图的类型分类

• 点阵图(位图)

• 矢量图

位图(点阵图)

位图，也叫做点阵图，像素图。构成点阵图的最小单位是像素，位图就是由像素阵列的排列来实现其显示效果的，每个像素有自己的颜色信息，在对位图图像进行编辑操作的时候，可操作的对象是每个像素，我们可以改变图像的色相、饱和度、透明度，从而改变图像的显示效果。

前面介绍中的那种不断放大会有小格子的图就是属于位图。

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

矢量图

矢量图，也叫做向量图。矢量图并不纪录画面上每一点的信息，而是纪录了元素形状及颜色的算法，当你打开一幅矢量图的时候，软件对图形对应的函数进行运算，将运算结果图形的形状和颜色显示给你看。

无论显示画面是大还是小，画面上的对象对应的算法是不变的，所以，即使对画面进行倍数相当大的缩放，其显示效果仍然相同(不失真)。

常见的就是 svg 格式的。

根据压缩分类

• 无压缩。

• 无损压缩。

• 有损压缩。

无压缩

无压缩的图片格式不对图片数据进行压缩处理，能准确地呈现原图片。BMP 格式就是其中之一。

有损压缩

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

常见的有损压缩手段，是按照一定的算法将临近的像素点进行合并。压缩算法不会对图片所有的数据进行编码压缩，而是在压缩的时候，去除了人眼无法识别的图片细节。因此有损压缩可以在同等图片质量的情况下大幅降低图片的尺寸。其中的代表是 jpg。

无损压缩

在压缩图片的过程中，图片的质量没有任何损耗。我们任何时候都可以从无损压缩过的图片中恢复出原来的信息。

压缩算法对图片的所有的数据进行编码压缩，能在保证图片的质量的同时降低图片的尺寸。

png 是其中的代表。

小结

• 使用有损压缩处理图像，是去除某些像素数据，无法找回原图。

• 使用无损处理图像，是对像素数据进行压缩，可以找回原图。

  常见的图片格式解析

  GIF

  关键词：无损压缩、索引色、透明、动画

  GIF(Graphics Interchange Format) 的原义是“图像互换格式”，是一种基于 LZW 算法连续色调的无损的基于索引色的压缩格式。其压缩率一般在 50% 左右，它不属于任何应用程序所以几乎所有相关软件都支持它，公共领域有大量的软件在使用 GIF 图像文件。

  GIF 是一种无损压缩，所以它只是对像素数据进行压缩，其实 LZW 算法只是一个压缩数据的算法，如果你懂哈夫曼算法的话，可能就比较好理解压缩数据是怎么回事儿了。

  GIF 的特性是帧动画。

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

  优势

  1. 优秀的压缩算法使其在一定程度上保证图像质量的同时将体积变得很小。

  2. 可插入多帧，从而实现动画效果。

  3. 可设置透明色以产生对象浮现于背景之上的效果。

  缺点

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

  适合场景

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

  JPG/JPEG

  关键词：有损压缩、直接色、适合大图、体积小

  JPEG 格式是最常见的一种图像格式，文件后辍名为“.JPEG”或“.jpg”，JPEG 可以说是人们最熟悉的图档格式，相信在数字相机普及的现在，几乎每台数字相机、照相手机都可以（甚至只能）输出 JPEG 格式的图档。

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

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

  Baseline JPEG 和 Progressive JPEG

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

  Baseline JPEG

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

  [图片上传失败...(image-c20b06-1558193148921)]

  Progressive JPEG

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

  [图片上传失败...(image-66ed90-1558193148921)]

  渐进式图片带来的好处是可以让用户在没有下载完图片就可以看到最终图像的大致轮廓，一定程度上可以提升用户体验（瀑布留的网站建议还是使用标准型的）。

  更多关于 Baseline JPEG 和 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 对于线条图，LOGO，图标和颜色较少的图像非常适合。

  PNG另一个优点是支持透明背景。

  PNG8

  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具有更好的透明度支持。

  PNG24

  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可以储存透明，完爆gif的地方在于失真小，没锯齿；劣势是不支持动画，生成的文件较大；

  png采用无损压缩，在多数情况下都可以保留图片里所有像素。PNG无损压缩算法，简单地说，就是把图片里出现的每一个颜色都记录下来。通过记录这些颜色相对应的值记录一张图片。

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

  Base64

  WebP

  WebP 是谷歌开发的一种新图片格式，WebP 是同时支持有损和无损压缩的、使用直接色的、点阵图。

  从名字就可以看出来它是为 Web 而生的，什么叫为 Web 而生呢？就是说相同质量的图片，WebP 具有更小的文件体积。现在网站上充满了大量的图片，如果能够降低每一个图片的文件大小，那么将大大减少浏览器和服务器之间的数据传输量，进而降低访问延迟，提升访问体验。

  • 在无损压缩的情况下，相同质量的 WebP 图片，文件大小要比 PNG 小26%；

  • 在有损压缩的情况下，具有相同图片精度的WebP图片，文件大小要比JPEG小25%~34%；

  • WebP图片格式支持图片透明度，一个无损压缩的WebP图片，如果要支持透明度只需要22%的格外文件大小。

  SVG

  关键词：无损、矢量图

  全称 Scalable Vector Graphics，是无损的、矢量图。

  SVG 跟上面这些图片格式最大的不同，是 SVG 是矢量图。这意味着 SVG 图片由直线和曲线以及绘制它们的方法组成。当你放大一个 SVG 图片的时候，你看到的还是线和曲线，而不会出现像素点。这意味着 SVG 图片在放大时，不会失真，所以它非常适合用来绘制企业 Logo、Icon等。

  SVG 是很多种矢量图中的一种，它的特点是使用 XML 来描述图片。借助于前几年 XML 技术的流行，SVG也流行了很多。使用XML的优点是，任何时候你都可以把它当做一个文本文件来对待，也就是说，你可以非常方便的修改SVG图片，你所需要的只需要一个文本编辑器。

  SVG并非只能绘制简单的Logo类的图片，它可以绘制出精致的图片的。

  为什么颜色越多，文件体积越大？

  总结

  其中APNG和WebP格式出现的较晚，尚未被Web标准所采纳，只有在特定平台或浏览器环境可以预知的情况下加以采用，虽然均可以在不支持的环境中较好的功能降级，但本节暂不讨论这两种格式。图片格式选择过程如下：

  图片格式	压缩方式	透明度	动画	浏览器兼容	适应场景
  JPEG	有损压缩	不支持	不支持	所有	复杂颜色及形状、尤其是照片
  GIF	无损压缩	支持	支持	所有	简单颜色，动画
  PNG	无损压缩	支持	不支持	所有	需要透明时
  APNG	无损压缩	支持	支持	Firefox Safari iOS Safari	需要半透明效果的动画
  WebP	有损压缩	支持	支持	Chrome Opera Android Chrome Android Browser	复杂颜色及形状 浏览器平台可预知
  SVG	无损压缩	支持	支持	所有（IE8以上）	简单图形，需要良好的放缩体验 需要动态控制图片特效

  image

  附加内容

  位图图像属性

  索引颜色/颜色表

  位图常用的一种压缩方法。从位图图片中选择最有代表性的若干种颜色（通常不超过256种）编制成颜色表，然后将图片中原有颜色用颜色表的索引来表示。这样原图片可以被大幅度有损压缩。适合于压缩网页图形等颜色数较少的图形，不适合压缩照片等色彩丰富的图形。

  Alpha通道

  在原有的图片编码方法基础上，增加像素的透明度信息。图形处理中，通常把RGB三种颜色信息称为红通道、绿通道和蓝通道，相应的把透明度称为Alpha通道。多数使用颜色表的位图格式都支持Alpha通道。

  色彩深度

  色彩深度又叫色彩位数，即位图中要用多少个二进制位来表示每个点的颜色，是分辨率的一个重要指标。常用有1位（单色），2位（4色，CGA），4位（16色，VGA），8位（256色），16位（增强色），24位（真彩色）和32位等。色深16位以上的位图还可以根据其中分别表示RGB三原色或CMYK四原色（有的还包括Alpha通道）的位数进一步分类，如16位位图图片还可分为R5G6B5，R5G5B5X1（有1位不携带信息），R5G5B5A1，R4G4B4A4等等。

  • 8位色，所谓8位色并不是图像只有8种颜色，而是2^8，即256种颜色，8位图指的是用8个bits来表示颜色；

  • 16位色，2^16，从人眼的感觉来说，16位色基本可以满足视觉需要了；

  • 24位色，又称为“真彩色”。大概有1600万之多，这个数字几乎是人类视觉可分辨颜色的极限；

  • 32位色，并非 2^32, 其实也是 2^24 种颜色，不过它增加了2^8 阶颜色的灰度，也就是8位透明度，因此规定它为32位色。

  在制作网站页面图片的时候，设计者一般选择24位图像。32位图像虽然质量更好，但同时也带来更大的图像体积（事实上，一般肉眼也很难分辨24位图和32位图的区别）。此外将原始位图放大与缩小都会使图像效果失真，这是因为它们减小了图像中有效像素的数量或密度的缘故，所以在制作过程中应尽量避免图片被编辑的次数。

  真彩色与伪彩色、直接色

  描述一幅图像需要使用图像的属性。图像的属性包含分辨率、像素深度、真/伪彩色、图像的表示法和种类等。本节介绍前面三个特性。

  搞清真彩色、伪彩色与直接色的含义，对于编写图像显示程序、理解图像文件的存储格式有直接的指导意义，也不会对出现诸如这样的现象感到困惑：本来是用真彩色表示的图像，但在VGA显示器上显示的图像颜色却不是原来图像的颜色。

  我这里就不以图形学的方式介绍各种花里胡哨的概念，我就用最简单的，作为一个程序员的角度来理解就行了。

  真彩色

  真彩色图像是一种用三个或更多字节描述像素的计算机图像存储方式。

  一般来说，前三个通道都会各用一个字节表示，如红绿蓝（RGB）或者蓝绿红（BGR）。如果存在第四个字节，则表示该图像采用了阿尔法通道。然而，实际系统往往用多于8位（即1字节）表达一个通道，如一个48位的扫描仪等。这样的系统都统称为真彩色系统。

  对于真彩色的话就是像素值里面每个 RGB 存储的什么值，就会直接展示该值所对应的颜色。比如该像素值是 10 10 10，那么三个RGB 的基色强度分别就是 10 10 10，那么这种就称做真彩色。可能你第一直觉，颜色就应该这么表示。

  伪彩色

  对于伪彩色图像其实可以理解为索引图像，他的每个像素值存储的不是直接的基色强度，而是存储的索引。就跟 js 里面的引用变量一样，变量只是个地址，变量所指向的值才是真正的值。

  对于伪彩色图像会有一个颜色表，是一个[3，255] 的数组，分别对应 0~255 个灰度值的RGB值，对照原理如下：

  [图片上传失败...(image-ce3c91-1558193148921)]

  可以看到上图，像素值存储的只是索引号 128，根据索引找到的 RGB 值才是真正的基色强度。

  直接色

  直接色又称假彩色。它和伪彩色的区别就是，前者的每个基色强度都要通过索引找到真正的基色强度。

  小结

  直接色系统产生颜色与真彩色系统相比，相同之处是都采用R，G，B分量决定基色强度，不同之处是前者的基色强度直接用R，G，B决定，而后者的基色强度由R，G，B经变换后决定。因而这两种系统产生的颜色就有差别。试验结果表明，使用直接色在显示器上显示的彩色图像看起来真实、很自然。

  直接色系统与伪彩色系统相比，相同之处是都采用查找表，不同之处是前者对R，G，B分量分别进行变换，后者是把整个像素当作查找表的索引值进行彩色变换。

  参考链接

  • 赵鑫

  • 真彩色与伪彩色、直接色的区别

  • 10 个免费的图像压缩优化工具和脚本

  • 网页中图片格式的选择