在工作中，产品上线后，经常会因为图片使用不当导致页面性能下降，导致页面卡顿。这是因为没有区分图像中的基本概念。

位图和矢量图

当位图放大时

从远处看位图的效果

矢量图是由一系列直线、圆和其他元素组成的图像。无论如何拉伸，矢量图都不会失真。我们在网页和手机上看到的图像都是位图，很多都是由矢量图像转换成位图的。矢量图的缺点是很难描述非常复杂的真实感图像。

常见图片格式

矢量图有AICDR

各种格式位图的比较

各种矢量图

在UI设计中，常用的格式JPG和and PNG采用高级压缩方式，可以很好地还原图像的真实性，适合显示颜色多、结构复杂的图像。JPG还可以通过压缩比来控制图像的大小。PNG采用无损压缩，可以尽可能压缩图像大小，也可以存储alpha通道。它的色彩层次非常丰富，而且PNG图像比较大，不适合在网页上显示。简单的图像可以存储为PNG格式，用于UI设计。

PNG8和PNG24

图片参数设置

颜色表类型：

可感知：优先考虑人眼敏感的颜色。

可选：创建颜色表，通常保存尽可能多的颜色信息。

后续：主要由绿色和蓝色组成

仿色：模拟计算机颜色系统中没有提供的颜色，有三种：扩散、图像、噪点。