前端开发中常用图片格式

前端开发中常用图片格式 

在我们的日常开发中。必不可少会使用很多种图片。
我们需要根据业务场景来选择所使用的图片类型。
这里我整理了一些常用图片类型、他们的优缺点以及建议的使用场景。
 

如何在计算机中显示一张图片

• 我们使用的计算机都是以像素作为最小单位。

• 每一个像素在内存中需要使用 4 个字节，分别为 RGBA

• 1280*720*4 约等于 3.5M

• 图片格式，就是计算机存储图片数据的方式

根据图片数据存储过程中，是否对数据进行压缩处理。将图片分为两类

• 无压缩存储
• 压缩存储
   

无压缩存储

顾名思义就是直接将图片数据加上元数据直接存储的方式。

代表格式：

BMP（BMP 取自位图 BitMaP 的缩写，也称为 DIB（与设备无关的位图））

• 支持 1、4、8、24 位深度
• 常用深度
  • 8 位为索引模式
  • 24 位，32 位使用 RGB 模式
• 数据扫描方式：从上到下，从左到右

• 优点：
  • 未压缩格式，算法简单，对各个平台兼容性良好。平台层应用较多。
  • 不需要要任何依赖就可以打开
• 缺点：
  • 不要在网页中使用

这里仅仅是跟后边压缩格式做对照说明，web 开发中不要使用 bmp 格式图片。
 

压缩存储

压缩存储，就是在存储过程中通过压缩算法，将图片数据进行压缩，使得相同分辨率、相近质量的情况下。缩小图片所占空间。

既然在存储的时候压缩，那么在使用的时候，就需要先将压缩后的图片，解压然后放在内存中。

图片压缩的本质就是：以时间换空间

压缩的程度，就需要在空间成本和时间成本之间做到平衡。

再常见的场景中，相对硬盘存储成本和网络的传输能力，我们几乎不用考虑处理器的能力限制

对于图片数据的压缩，也分为两种

• 无损压缩
• 有损压缩
   

无损压缩

无损压缩：压缩和解压缩的过程是完全可逆的。

保证图片解压之后，可以完全追溯到源数据。

常用的无损压缩算是 LZ77 的衍生算法

简单说就是，在某一个缓冲