常见图片格式：bmp、jpg、jpeg、gif、png 的区别；十六进制查看图片文件等图片知识积累

霸王大鳄鱼
2,951 阅读9分钟

图片存储方式

数字化图像数据有两种存储方式：位图存储(Bitmap)和矢量存储(Vector)。

  • 位图，又称栅格图(Raster graphics)，是使用像素阵列(Pixel-array/Dot-matrix)来表示的图像，常用的格式有 bmp,png,jpg,jpeg,webp,gif,tiff 等。
  • 矢量图，是根据几何特性来绘制图形。不同于位图直接存储像素点阵信息，矢量图形使用算法来定义 — 一个矢量图文件包含了图形和路径的定义，所有的现代计算机显示器都要将矢量图形转换成栅格图像的格式，包含屏幕上每个像素数值的栅格图像保存在内存中来显示图片。常用的格式有svg。

特点：

  • 位图：色彩层次丰富逼真（最大可以表现2^32种颜色），文件体积大，小位图放大后会模糊。
  • 矢量图：色彩层次不够丰富，文件体积小，支持不影响清晰度的无限缩放。

BMP（不压缩的一种格式）

BMP 取自位图 Bitmap 的缩写，也称为 DIB（与设备无关的位图），是一种独立于显示器的位图数字图像文件格式。

jpeg（有损压缩的一种格式）

jpg 全名是 JPEG。JPEG 图片以 24 位颜色存储单个位图。JPEG 是与平台无关的格式，支持最高级别的压缩，这种压缩是有损耗的。

  1. JPEG 是一种针对相片图像而广泛使用的一种有损压缩标准方法。JPEG 与视频音频压缩标准的 MPEG 很容易混淆，但两者是不同的组织及标准。
  2. JPEG 本身只有描述如何将一个图像转换为字节的数据流，但并没有说明这些字节如何在任何特定的存储媒体上被封存起来。JPEG 的压缩方式通常是破坏性数据压缩，意即在压缩过程中图像的质量会遭受到可见的破坏，有一种以 JPEG 为基础的标准 Lossless JPEG 是采用无损的压缩方式。
  3. 使用 JPEG 格式压缩的图片文件一般也被称为 JPEG Files，最普遍被使用的扩展名格式为 .jpg，其他常用的扩展名还包括 .jpeg、.jpe、.jfif 以及 .jif。

关于有损压缩

jpeg 的有损压缩算法不会对图片所有的数据进行编码压缩，而是在压缩的时候，去除了人眼无法识别的图片细节。因此有损压缩可以在同等图片质量的情况下大幅降低图片的尺寸。

jpg 和 jpeg 的区别

没有区别，全名、正式扩展名是 JPEG。 但因 DOS、Windows 95 等早期系统采用的8.3命名规则只支持最长3字符的扩展名，为了兼容采用了 .jpg。 也因历史习惯和兼容性考虑，.jpg 目前更流行。

gif（无损压缩的一种格式）

这个是历史非常悠久的一种格式。八位位图，可展示2^8=256色，同时支持动画。

采用 LZW 压缩算法进行编码，是一种无损的基于索引色的图片格式。由于采用了无损压缩，相比古老的 bmp 格式，尺寸较小，而且支持透明和动画。缺点是由于 gif 只存储8位索引（也就是最多能表达2^8=256种颜色），色彩复杂、细节丰富的图片不适合保存为 gif 格式。色彩简单的 logo、icon、线框图适合采用 gif 格式。

png（无损压缩的一种格式）

PNG 的全称叫便携式网络图型(Portable Network Graphics)，是目前最流行的网络传输和展示的图片格式，原因有如下几点：

  1. 无损压缩：PNG 图片采取了基于 LZ77 派生算法对文件进行压缩，使得它压缩比率更高，生成的文件体积更小，并且不损失数据。
  2. 体积小：它利用特殊的编码方法标记重复出现的数据，使得同样格式的图片，PNG 图片文件的体积更小。网络通讯中因受带宽制约，在保证图片清晰、逼真的前提下，优先选择 PNG 格式的图片。
  3. 支持透明效果：PNG 支持对原图像定义256个透明层次，使得图像的边缘能与任何背景平滑融合，这种功能是 GIF 和 JPEG 没有的。

PNG 的类型

PNG 图片主要有三个类型，分别为 PNG 8 / PNG 24 / PNG 32。

  1. PNG 8：PNG 8中的8，其实指的是8bits，相当于用2^8（2的8次方）大小来存储一张图片的颜色种类，2^8等于256，也就是说PNG 8能存储256种颜色，一张图片如果颜色种类很少，将它设置成PNG 8得图片类型是非常适合的。
  2. PNG 24：PNG 24中的24，相当于3乘以8 等于 24，就是用三个8bits分别去表示 R（红）、G（绿）、B（蓝）。R(0 ~ 255),G(0 ~ 255),B(0 ~ 255)，可以表达256乘以256乘以256=16777216种颜色的图片，这样PNG 24就能比PNG 8表示色彩更丰富的图片。但是所占用的空间相对就更大了。
  3. PNG 32：PNG 32中的32，相当于PNG 24 加上 8bits的透明颜色通道，就相当于R（红）、G（绿）、B（蓝）、A（透明）。R(0 ~ 255),G(0 ~ 255),B(0 ~ 255),A(0 ~ 255)。比 PNG 24多了一个A（透明），也就是说 PNG 32能表示跟 PNG 24一样多的色彩，并且还支持256种透明的颜色，能表示更加丰富的图片颜色类型。

PNG24 与 jpg

jpg 跟 png-24 都能表现 2^24 色（都缺少透明通道），但是由于 jpg 是有损压缩，所以 png-24 的文件大小大概是 jpg 的五倍，而在图片品质上的提升却微乎其微，所以除非对品质的要求极高，否则色彩丰富的网络图片还是推荐用 jpg。

在命令行以 16 进制查看各种格式的图片文件

vim -b xxx.png
:%!xxd

回车即可查看。

可用以下头部来判断图片的类型（而不是文件后缀名)。

查看 png 文件：

十六进制查看png图片文件.png

能看到 png 图片的头部是 89504e47（.png）

查看 jpeg 文件：

十六进制查看jpeg图片文件.png

能看到 jpeg 图片的头部是 ffd8ff

查看 gif 文件：

十六进制查看gif图片文件.png

能看到 gif 图片的头部是 47494638

png 图片压缩原理

PNG图片的压缩，分两个阶段：

  1. 预解析（Prediction）：这个阶段就是对 png 图片进行一个预处理，处理后让它更方便后续的压缩。
  2. 压缩（Compression）：执行 Deflate 压缩，该算法结合了 LZ77 算法和 Huffman 算法对图片进行编码。

png图片用差分编码（Delta encoding）对图片进行预处理，处理每一个的像素点中每条通道的值（每条颜色通道单独处理），差分编码主要有几种：

  • 不过滤
  • X-A
  • X-B
  • X-(A+B)/2(又称平均值)
  • Paeth推断（这种比较复杂）

举个栗子，如果是渐变的图片，单通道的颜色可能是 12345678，预处理的时候可以用后一位减去前一位，就成了 11111111。由于 Huffman 算法的特性，重复出现的数字越多，压缩效率越好，所以预处理后的数据就能被更好的压缩。（这种处理方式在算法题里也用过）。

所以差分编码的目的，就是尽可能的将png图片数据值转换成一组重复的、低的值，这样的值更容易被压缩。

压缩阶段：Deflate压缩会标记图片所有的重复数据，并记录数据特征和结构，会得到一个压缩比最大的 png 图片编码数据。

Deflate是一种压缩数据流的算法. 任何需要流式压缩的地方都可以用。

位深度

位深度， 又称为色彩深度 ， 常见的色彩深度有：1，2，4，8(灰度或256色)，16，24(rgb)，32(rgba)等。根据位深度，可将位图分为1、4、8、16、24及32位图像等。每个像素使用的信息位数越多，可用的颜色就越多，颜色表现就越逼真，相应的数据量越大。例如，位深度为 1 的像素位图只有两个可能的值（黑色和白色），所以又称为二值位图。

位深度为 8 的图像有 28（即 256）个可能的值，其中又分为灰度模式和256色模式：灰度模式图像有 256 个可能的灰色值（即用256种颜色表示黑白灰），而位深度为8的256色模式图像，则根据256色表，显示彩色图片。

1位图的数据存储（大小2*2）：

1是白 0是黑

0  1
1  0
灰度8位图的数据存储（大小3*3）：

255是白 0是黑

1   3   255
66  40  19
232 61  25

真彩色图像和 RGBA 通道

我们最熟悉不过的彩色图像就是用 RGB 来表示了，R 表示 Red 通道，G 表示 Green 通道，B 表示 Blue 通道。

最常见的就是每个通道用0～255，也就是每个通道用8位来表示暗亮（255亮，0黑）。

每一个像素点由3个通道合成，用 R,G,B 这3个8位的值来表示，所以每个像素点需要24位来表示，这就是常见的 RGB24 格式(BGR)。故每个像素点能表示 2^24=16,777,216 种颜色，这个数值就是电脑所能表示的最高色彩。普遍认为人眼对色彩的分辨能力大致是一千万色，因此由 RGB 形成的图像又称做真彩色图像。

带有透明通道的 png 图片，即在 rgb 通道外再增加一个 alpha 通道，称为 RGBA(RGB32)。alpha 的范围同样在0～255，取0时图像为透明，取255时和 RGB24 图像一致。

所以这样一个像素点就可以表示 2^32 种颜色。

webp

WebP 图片是一种新的图像格式，由 Google 开发。与 png、jpg 相比，相同的视觉体验下，WebP 图像的尺寸缩小了大约30％。另外，WebP 图像格式还支持有损压缩、无损压缩、透明和动画。理论上完全可以替代 png、jpg、gif 等图片格式，然鹅目前 webp 的还没有得到全面的支持。

avatar
文章
阅读
粉丝