移动端开发经常会遇到图片压缩的问题，场景有更新头像，发帖等。今天我们就了解一下

图片格式基础

• 点阵图：也叫位图。用像素为单位，像素保存颜色信息，排列像素实现显示。
• 矢量图：记录元素形状和颜色的算法，显示时展示算法运算的结果。

颜色

表示颜色时，有两种形式，一种为索引色（Index Color），一种为直接色（Direct Color）

• 索引色：用一个数字索引代表一种颜色，在图像信息中存储数字到颜色的映射关系表（调色盘 Palette）。每个像素保存该像素颜色对应的数字索引。一般调色盘只能存储有限种类的颜色，通常为 256 种。所以每个像素的数字占用 1 字节（8 bit）大小。
• 直接色：用四个数字来代表一种颜色，数字分别对应颜色中红色，绿色，蓝色，透明度（RGBA）。每个像素保存这四个纬度的信息来代表该像素的颜色。根据色彩深度（每个像素存储颜色信息的 bit 数不同），最多可以支持的颜色种类也不同，常见的有 8 位（R3+G3+B2）、16 位（R5+G6+B5）、24 位（R8+G8+B8）、32 位（A8+R8+G8+B8）。所以每个像素占用 1~4 字节大小。

移动端常用图片格式

图片格式中一般分为静态图和动态图

静态图

• JPG：是支持 JPEG（ 一种有损压缩方法）标准中最常用的图片格式。采用点阵图。常见的是使用 24 位的颜色深度的直接色（不支持透明）。
• PNG：是支持无损压缩的图片格式。采用点阵图。PNG 有 5 种颜色选项：索引色、灰度、灰度透明、真彩色（24 位直接色）、真彩色透明（32 位直接色）。
• WebP：是同时支持有损压缩和无所压缩的的图片格式。采用点阵图。支持 32 位直接色。移动端支持情况如下：

|系统|原生|WebView|浏览器|

|----|----|----|----|

|iOS|第三方库支持|不支持|支持|

|Android|4.3后支持完整功能|支持|支持|

动态图

• GIF：是支持无损压缩的图片格式。采用点阵图。使用索引色，并有 1 位透明度通道（透明与否）。