WWDC2018 之 优化 App Assets Optimizing App Assets

该篇博客记录了观看WWDC Session227《Optimizing App Assets》的内容以及一些理解。

引言

该session主要讲述了使用Assets Catalog的新特性来优化App资源文件的部署。

主要从以下四个方面来进行： 

1. 压缩(Compression)
2. 设计(Design)和生成(Production)
3. 分类(Cataloging)
4. 部署(Deployment)

压缩(Compression)

图片压缩是Asset Catalog的核心，也是Assets Catalog编译的最后一步。同时也与其他优化手段有密切关系。

Assets Catalog提供了不同类别的压缩方式，并且默认为选择的图片选择了最优的压缩方式。

自动图片打包(Automatic Image Packing)

在Assets Catalog出现之前，我们使用图片时，是将图片直接放入工程目录中，这样做有以下几个缺点：

1. 每张图片都包含图片信息以及一些额外的元数据，对于数量较多的情况来说，会浪费一些空间去存储相同的元数据。对于小的文件来说，也不能进行完全的压缩。
2. 在管理这些文件的时候，也会浪费一些管理上的开销。同时对于UIImage和NSImage的API来说，也是不友好的。
3. 还需要去处理图片的不同格式与属性。

自动打包技术可以识别具有相似属性的图像，例如透明度、颜色空间、色域等，并且能够把它们组织到一个较大的图集中，这样就无需存储额外相同的元数据了。

以下为Apple官方提供的一组数据：

有损压缩(Lossy compression)

1. 有损压缩是用视觉损失来换取空间的节省，所以有损压缩是图片质量与图片大小的权衡。
2. 建议对在屏幕上显示时间较短的图片使用有损压缩。

高效图片文件格式(High Efficiency Image File Format)

1. 作为Assets Catalog对于图片有损压缩的默认格式。
2. 提供更高效的压缩率（比JPEG高）。
3. 支持透明度。
4. 只要选中了有损压缩，Assets Catalog就可以自动的将其他格式的图片文件转为High-Efficiency Image File Format。

无损压缩(Lossless compression)

无损压缩是默认的压缩方式，并且大多数Assets使用的是无损压缩。

一般来说，我们可以根据图片的颜色色谱分布将图片分为两类：

1. 颜色色谱较窄，离散较少的，设计较简单的图片，这类图片一般用于应用的图标。
2. 颜色色谱较宽，离散较大的，设计较复杂的图片。

无损压缩对于两种类型的图片有着不同的压缩效果，但是苹果对于两种类型的无损压缩，都进行了优化。

苹果深度像素图像压缩(Apple Deep Pixel Image Compression)

Apple Deep Pixel Image Compression是Apple在2018年提出的新的无损压缩技术，它具有以下几个优点：

1. 能够适应图像的颜色色谱。
2. 能够选择最优的压缩算法。
3. 能够提升15-20%的压缩大小。

下面是Apple Deep Pixel Image Compression在不同平台上的压缩效果：

Apple Deep Pixel Image Compression也能提升图片解码的速度，下面是在iOS12上解码效果：

Deployment target and app thinning

应用瘦身(App Thinning)

应用瘦身会生成所以设备的型号以及部署版本的变种，这样在用户下载的时候就能获取到适合于设备和系统的最佳的变种。 
在以往的兼容方式中，我们无法进行向前兼容。为此，Apple提出了叫OS Variant Thinning的技术，会进行应用的瘦身，同时会向前兼容到iOS 9，并在最新的系统上使用最新的优化效果。

应用瘦身报告(App Thinning Export)

1. 选择Archive按钮进行应用创建。
2. 选择Organizer按钮来打开新窗口。
3. 选择对应的类型。
4. 选择对应的设备类型。

接下来就会导出一份关于应用瘦身的报告。

下面是官方列出的一份报告：

可见新特性对于应用的瘦身有明显的提高。

设计与生产(Design and Production)

图像资源

图像资源有以下几个特点：

• 图像资源的来源很多
• 图像资源全部来自于人类设计
• 需要很大的精力去管理图像资源

接下来从下面5个方面来介绍在设计与生产中进行资源文件优化：

1. 颜色管理(Color management)
2. 工作空间(Working space)
3. 拉伸图片(Stretchable images)
4. 矢量资源(Vector assets)
5. 为2x设计(Design for 2x)

颜色管理(Color management)

下面几点是我们需要了解的：

• 没有颜色的像素只是简单的字节
• 颜色配置文件可以提供预期的显示
• 维护颜色配置文件
• 保持设计样式 
• 应用会在广泛的显示器上运行
• 颜色映射会把颜色映射到设备上

颜色管理会为我们做以下工作：

• Asset Catalogs 会在编译阶段就将颜色映射做好
• 设备在使用资源时资源就已经被准备好了
• 其余好处：减少颜色配置文件的消耗

工作空间(Working space)

• 对所有设计文件使用一致的颜色设置
• sRGB / 8 bits 被广泛使用
• Display P3 / 16 bits 用于较生动的设计
• 提供广泛的颜色选项
• 从2017年开始，开发人员在部分使用P3资源上有很好的效果

拉伸图片(Stretchable images)

建议使用拉伸图片来适应用户界面

• 设计工具支持分片
• 识别图片的可拉伸区域

以前为了达到这种效果，通常的做法是将每一部分分割作为单独的资源，然后程序去绘制每一部分并组装成最终的效果，但是这么操作极其耗费CPU。

现在提供了一种方式：

Single image + metadata = smooth GPU animation

• 1

即提供单张图片，然后提供可拉伸的元数据，这样就能达到平滑的GPU动画。

Asset Catalogs提供了叫做Show Slicing editor的方法来达到这一目的。

以下为实现这一功能的步骤:

1. 在Asset Catalogs中选择一张图片素材，点击Show Slicing按钮 
   

2. 选择需要拉伸的方式，这里选择了只在水平向进行拉伸

3. 接下来会出现三条线，我们对三条线进行调整

至此，Asset Catalogs的设定拉伸元数据就完成了，我们介绍一下各个部分的意义：

• ①代表左侧不可拉伸区域
• ②代表拉伸区域
• ③为白色，代表可以丢弃的区域
• ④代表右侧不可拉伸区域

同时我们可以在设置中设置拉伸区域的拉伸方式：平铺还是拉伸

Asset Catalog Slicing有以下优点：

• 使得图片和图片拉伸元数据保存在一起
• 更好的支持设计的更新

矢量资源(Vector assets)

• 不同显示器需要不同的图片
• 使用一个pdf格式的矢量图片可以满足所有需求
• Xcode会为每一种尺寸生成对应的优化过的bitmap
• 保留矢量数据(preserve vector data - iOS11及Xcode9之后)可以实现在运行时调整大小
• 可以更灵活的支持动态大小

为2x设计(Design for 2x)

• Retina 2x 是最常用的显示比例
• 落在像素点之间的图像看起来是模糊的
• 边缘点和像素对齐能保证设备的像素点对齐
• 矢量资源能够使用2x网格来优化像素点对齐
• 将2x设计放入到Xcode的对应2x插槽中
• Xcode会自动生成其余缩放比例

分类(Cataloging)

这里有两种有帮助的分类和组织技巧：

1. Bundles
2. Namespaces

Bundles

• 大规模的工程对于bundle是一个挑战
• 使用多个bundles来解决问题
• 高效的重用策略

对于使用多个bundle的项目来说，可以使用以下方法来获取到资源：
其中每一个bundle都会有一个唯一的命名空间。

Namespaces

• 大的集合是一个命名上的挑战
• 带有命名空间的目录是用来分类的

在Xcode中，选中Provides Namespace选项会为目录下的资源自动的加上目录路径

部署(Deployment)

应用瘦身(App Thinning)

• 需要提供所有的内容的变体，最常见的方式是将不同分辨率的产品分为1x 2x 3x
• App Thinning会为每一个设备选择正确的子集

Performance classes

• 硬件能力各不相同
• 不要限制性能最差的设备
• 使用适配的资源来解决问题

有两种划分性能的方法：

1.Memory Classes

2.Graphics Classes

其中这个分类又分为两个方面：

1. Metal属性，是一个GPU层次上的概念。
2. 对应于设备中处理器的版本。

基于这两方面，我们可以构造一个全能力矩阵

全能力矩阵(Full Capability Matrix)

我们通过一个例子来了解全能力矩阵是如何使用的：

我们现在提供三种类型的资产：

1. Any-Any类型的：可以作为低性能设备支持的
2. 3GB-Metal3类型的
3. 2GB-Metal4类型的 
   

现在我们使用iPhone 8 Plus(4GB Metal4)设备来选择资产：

首先在4GB对应的每个Metal版本中没有找到对应资源。接下来就会降低Memory，从3GB中每个版本的Metal中找寻资源，最终在3GB-Metal3位置找到了对应资源。该过程如下图： 

在这个过程中，需要注意的一点是：

在全能力矩阵的扫描中，内存的优先级比Metal的优先级要高，因为嫩草更能表示设备的性能

Using Performance Classes

• Higher memory -> larger/richer assets (大内存适合于较大或者较丰富的资源)
• Higher graphics -> more complex assets (复杂图片对于CPU或GPU要求高，适合于图像优先)

NSDataAsset

NSDataAsset可以读取Asset Catalog中Data类型的数据，这些数据不仅仅可以是Image，也可以是其他各种各样的数据。NSDataAsset可以根据当前设备对应的全能力矩阵位置来选择合适的数据。 

注意：NSDataAsset只能在Deployment Target为iOS 9之上使用，否则初始化之后为nil

下表是各个iPhone设备对应的Memory

设备	Memory
iPhone 5	1GB
iPhone 5c	1GB
iPhone 5s	1GB
iPhone 6	1GB
iPhone 6 Plus	1GB
iPhone 6s	2GB
iPhone 6s Plus	2GB
iPhone 7	2GB
iPhone 7 Plus	2GB
iPhone 8	2GB
iPhone 8 Plus	3GB
iPhone X	3GB

Sprite atlases

SpriteKit是对文本图片进行动画的一个图像渲染和动画构建的库

• 将相关图像打包成一个单元
• 整个图集只进行一次加载
• 图集中图片通过位置来引用

Sprite atlases用在普通App中（而非SpriteKit的Game）中，它类似于自动图像打包技术，但与之不同的是，Sprite atlases可以允许你进行分组控制，并允许你为之指定名称。

针对于Sprite atlases，你可以：

1. 通过UIImage / NSImage 的方式来获取图片。
2. 使用异步加载的方式获取图片

SKTextureAtlas.preloadTextureAtlasesNamed(_: [String],
withCompletionHandler: (Error?, [SKTextureAtlas]) -> Void)

注意：该方法十分消耗I/O和内存。

• Sprite atlas拥有所有Asset Catalog的特性，包括分类、压缩设置以及App Thinning特性
• 同时Xcode也会根据像素格式、设备特征以及压缩类型进行划分，进而进行应用瘦身。

总结

• Xcode的Asset Catalog会对图片资源进行最好的选择。
• 在2018年，使用新的压缩算法可以为iOS12 App节省10 - 20%的空间。
• 无论Deployment target是什么，新的应用瘦身功能会为你最新的系统进行最好的优化。
• 使用分类功能为应用提供合适的资源。

参考：
https://blog.csdn.net/TuGeLe/article/details/81227329

https://techblog.toutiao.com/2018/06/19/untitled-41/