【面试题集 —— No.02】项目优化之一 —— 图片资源的优化

项目开发中，对于图片的处理是不可避免的。同时这也是项目优化中的一块重要内容。今天就从两个方面来细致的谈一谈图片优化的细节。

文章目录

• • 一. 图片大小优化
  • • 1.1 固定宽高
    • 1.2 降低压缩品质
    • 1.3 改变图片格式
  • 二. 减少图片请求 —— 打包成雪碧图

一. 图片大小优化

对于图片的优化，首先就要从图片本身出发。这里我们要注意的点就是图片质量和图片大小。不断寻找高质量和小文件之间的平衡点。 一张图片在满足分辨率的基础上，要尽量减小图片的文件体积。这里我总结了以下三种方法：

1.1 固定宽高

减小图片体积最简单的方法不就是直接缩小图片的宽高嘛，最终改变了图片的分辨率从而达到减小图片体积的目的。

1.2 降低压缩品质

如果一张图片为JPG格式，那么我们还可以通过在Photoshop中自定义图片的品质（压缩比）来控制图片的文件大小。

1.3 改变图片格式

图片本身的文件格式非常多，各自有鲜明的特点。我们也可以尝试着换一种图片格式来满足我们的实际需求。比如：

• 对于图片质量有要求的，就可以选择采用无损压缩的PNG格式代替JPG格式；
• 对于Icon，LOGO等图片资源，就可以考虑采用SVG格式；

二. 减少图片请求 —— 打包成雪碧图

当图片本身已经找到合适的格式时，就可以换个角度思考：通过把多张图打包成一张大图，来减少图片的请求次数。这样的大图通常被称为sprites图（雪碧图或者精灵图）。

比如网易严选网站，其中的LOGO和Icon部分就是一张sprites图集的形式：

具体雪碧图的打包生成，可以有很多种途径。这里给大家推荐我之前做小游戏的时候用过的一款小巧的软件，名字叫做TexurePacher。具体的软件操作如下图所示：

雪碧图打包好之后会有两个文件，其中一个就是图集的PNG格式文件：

另一个文件是与之同名的后缀为.plist的文件，它是用来保存你图集中的每一个图片的位置信息的。在IDE工具中打开它，可以看到：

图中红色框内的代码段记录的就是你其中某一张图的位置信息（二维边界坐标）。