图片格式那些事儿

[10081677wc]

图片格式那些事儿

相关知识

有损压缩和无损压缩

图片文件格式有可能会对图片的文件大小进行不同程度的压缩，图片的压缩分为 有损压缩 和 无损压缩 两种：

有损压缩：指在压缩文件大小的过程中，会损失一部分图片信息，降低图片质量，并且这种损失是不可逆的，我们不可能从有损压缩过的图片中恢复出原图，常见的有损压缩手段是按照一定的算法将临近的像素点进行合并。

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

索引色和直接色

计算机在表示颜色时有两种形式：一种称作 索引颜色（Index Color），一种称作 直接颜色（Direct Color）。

索引色：用一个数字来代表（索引）一种颜色，在存储图片时存储一个数字的组合，同时存储数字到图片颜色的映射，这种方式只能存储有限种颜色，通常是 256 种颜色。

直接色：使用四个数字来代表一种颜色，这四个数字分别代表这个颜色中红色、绿色、蓝色以及透明度，现在流行的显示设备可以在这四个维度分别支持 256 种变化，所以理论上直接色可以表示 2 的 32 次方种颜色。

点阵图和矢量图

点阵图，也叫做位图、像素图：构成点阵图的最小单位是像素，每个像素有自己的颜色信息，在对点阵图图像进行编辑操作的时候，可操作的对象是每个像素，点阵图缩放会失真。

矢量图，也叫做向量图：矢量图并不记录画面上每一点的信息，而是记录元素形状及颜色的算法，当我们打开矢量图的时候，软件会对图形象对应的函数进行运算，将运算结果显示出来，无论显示画面是大还是小，画面上的对象对应的算法是不变的，所以即使对画面进行倍数相当大的缩放，其显示效果仍然相同（不失真）。

常见的图片格式

BMP

即 BitMap 的缩写，是无损的，既支持索引色也支持直接色的点阵图。

这是一种比较老的图片格式，这种图片格式几乎没有对数据进行压缩，所以 BMP 格式的图片通常具有较大的文件大小，虽然同时支持索引色和直接色是一个优点，但是太大的文件格式导致它几乎没有用武之地。

GIF

全称 Graphics Interchange Format，采用 LZW 压缩算法进行编码，是无损的、采用索引色的点阵图。

采用 GIF 格式保存图片不会降低图片质量，同时 GIF 还具有文件小、支持动画和透明的优点，但是 GIF 格式仅支持 8bit 的索引色，即在整个图片中只能存在 256 种不同的颜色，故而适用于对色彩要求不高同时需要文件体积较小的场景。

JPEG

JPEG 是有损的、采用直接色的点阵图。

JPEG 图片格式的设计目标是在不影响人类可分辨的图片质量的前提下，尽可能的压缩文件，JPEG 采用直接色，适合用于存储照片，用来表达更生动的图像效果，其文件大小优于 PNG 格式的图片。

PNG-8

全称 Portable Network Graphics，是 PNG 的索引色版本，PNG-8 是无损的、使用索引色的点阵图。

PNG-8 是非常好的 GIF 格式替代者，应该尽可能的使用 PNG-8 而不是 GIF，因为在相同的图片效果下 PNG-8 具有更小的文件体积，除此之外 PNG-8 还支持透明度的调节（而 GIF 并不支持），但是虽然 PNG-8 本身也是支持动画的，却不像 GIF 那样受到广泛的兼容。

PNG-24

PNG-24 是 PNG 的直接色版本，PNG-24 是无损的、使用直接色的点阵图。

从显示效果上来看 PNG-24 和 BMP 没有什么不同，PNG-24 的优点在于它可以压缩图片的数据，使得同样效果的图片 PNG-24 格式的文件大小要比 BMP 小得多（当然 PNG-24 的图片还是要比 JPEG、GIF、PNG-8 大得多），只有当我们不在乎图片的文件体积，想要最好的显示效果时，才建议使用 PNG-24 格式。

SVG

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

SVG 跟上面这些图片格式最大的不同是 SVG 是矢量图，这意味着 SVG 图片由直线和曲线以及绘制它们的方法组成，当我们放大一个 SVG 图片的时候不会失真，SVG 使用 XML 来描述图片，任何时候我们都可以把它当做一个文本文件来对待。

Webp

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

WebP 的优势体现在它具有更优的图像数据压缩算法：相同质量的图片 WebP 具有更小的文件体积，如果能够降低每一个图片的文件大小，那么将大大减少浏览器和服务器之间的数据传输量，进而降低访问延迟、提升访问体验。

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

判断浏览器是否支持 webp 的方法

function checkWebp() {
    try {
        return (document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') === 0);
    } catch (err) {
        return false;
    }
}

function checkWebp() {
    var supportWebp;
    try {
        var ele = document.createElement('object');
        ele.type = 'image/webp';
        ele.innerHTML = '!';
        supportWebp = !ele.offsetWidth;
        document.body.removeChild(ele);
    } catch (err) {
        supportWebp = false;
    }

    return supportWebp;
}