前言 随着web的发展，网站资源的流量也变得越来越大。据统计，60% 的网站流量均来自网站图片，可见对图片合理优化可以大幅影响网站流量，减小带宽消耗和服务器压力。
有时候你花大力气去配置 webpack 使打包体积减少，不如好好优化几张图片，这篇文章就是让你明白如何选择正确的图片，并且让你明白这么多图片格式，在什么场景下使用什么格式，如果想看答案，那么直接滑到文末看图即可。
我的更多文章可以看 GitHub博客,
基本概念 在进入正题之前，先聊聊一些图片相关的基本概念。
一张照片（位图）不断放大之后，会看到一个个小格子，这些小格子，叫像素。
一个格子（像素），在计算机中，用二进制来表示，使用的二进制位数越多，像素的色彩就越丰富。
举个例子，如果一个像素用一位二进制数表示，能有多少种颜色呢？
两种，一个二进制位，要不放 0（表示黑色），要不放 1（表示白色）
下图展示了一个像素二进制的位数最多可以展示多少种颜色。
在对图片有了基本的了解之后，接下来对图片进行分下类，有利于理解各种格式图片的特点。
根据图的类型分类 点阵图(位图) 矢量图 位图(点阵图) 位图，也叫做点阵图，像素图。构成点阵图的最小单位是像素，位图就是由像素阵列的排列来实现其显示效果的，每个像素有自己的颜色信息，在对位图图像进行编辑操作的时候，可操作的对象是每个像素，我们可以改变图像的色相、饱和度、透明度，从而改变图像的显示效果。
前面介绍中的那种不断放大会有小格子的图就是属于位图。
常见的比如：jpg、png、webp等，我们平时遇到的大多数都是位图。
矢量图 矢量图，也叫做向量图。矢量图并不纪录画面上每一点的信息，而是纪录了元素形状及颜色的算法，当你打开一幅矢量图的时候，软件对图形对应的函数进行运算，将运算结果图形的形状和颜色显示给你看。
无论显示画面是大还是小，画面上的对象对应的算法是不变的，所以，即使对画面进行倍数相当大的缩放，其显示效果仍然相同(不失真)。
常见的就是 svg 格式的。
根据压缩分类 无压缩。 无损压缩。 有损压缩。 无压缩 无压缩的图片格式不对图片数据进行压缩处理，能准确地呈现原图片。BMP 格式就是其中之一。
有损压缩 指在压缩文件大小的过程中，损失了一部分图片的信息，也即降低了图片的质量，并且这种损失是不可逆的，我们不可能从有一个有损压缩过的图片中恢复出原来的图片。
常见的有损压缩手段，是按照一定的算法将临近的像素点进行合并。压缩算法不会对图片所有的数据进行编码压缩，而是在压缩的时候，去除了人眼无法识别的图片细节。因此有损压缩可以在同等图片质量的情况下大幅降低图片的尺寸。其中的代表是 jpg。
无损压缩 在压缩图片的过程中，图片的质量没有任何损耗。我们任何时候都可以从无损压缩过的图片中恢复出原来的信息。
压缩算法对图片的所有的数据进行编码压缩，能在保证图片的质量的同时降低图片的尺寸。
png 是其中的代表。
小结 使用有损压缩处理图像，是去除某些像素数据，无法找回原图。 使用无损处理图像，是对像素数据进行压缩，可以找回原图。 常见的图片格式解析 GIF 关键词：无损压缩、索引色、透明、动画
GIF(Graphics Interchange Format) 的原义是“图像互换格式”，是一种基于 LZW 算法连续色调的无损的基于索引色的压缩格式。其压缩率一般在 50% 左右，它不属于任何应用程序所以几乎所有相关软件都支持它，公共领域有大量的软件在使用 GIF 图像文件。
GIF 是一种无损压缩，所以它只是对像素数据进行压缩，其实 LZW 算法只是一个压缩数据的算法，如果你懂哈夫曼算法的话，可能就比较好理解压缩数据是怎么回事儿了。
GIF 的特性是帧动画。...