[ WWDC2018 ] – 优化 App Assets Optimizing App Assets

概述

学习如何在你的应使用通过用assets达到最好的视觉效果和最高效的用视图资源，概述了iOS12种的新特性。能理解到如何用assets分类来最优化的组织、优化、制作视图资源。能学习到更好的简化设计和开发人员之间工作流程的少量手段。通过充分的用视图asset，能提高应使用的交付质量，占使用更小的空间，受益到更多的使用户。

本文章主要详情了用asset分类的最佳实践，通过用asset分类来优化应使用资源的部署,下面将从图片压缩、设计和开发、分类以及部署流程这四个方面开展详情

1.png

图片压缩

选择合适的压缩类型

2.png

图片压缩是asset分类的核心，asset分类默认会提供多种压缩类型，对于一种给定的图片或者文字asset系统会默认选择最优的压缩类型，这种情况对于大多数的工程应该是已经足够使用了。但是，假如可以够详细的理解系统提供的这些可供调试参数的使用途的话就可以根据开发的环境作出做好的权衡。

自动图片打包

在assets分类之前用的是自动图片打包的方式，将图片直接放到工程的bundle中组织。这种方式存在少量缺点和权衡。

1. 不同的类型会存储各自的元信息和其余的少量属性信息，假如存在很多同类型的资源，这部新信息会冗余白费多余的空间。对于少量小的资源文件，也没有进行充分的压缩。
2. 就是在组织文件的时候，解决这些比较大的分散的图片资源会比较麻烦，而且调使用的接口也不一样。
3. 还要注意不同图片的不一致性。

assets分类会根据图片的图谱对图片进行分类通过图集的方式进行存储，帮我们解决图片的压缩以及元数据的存储工作。图片资源越大用assets分类后优化的效果就越显著。

有损压缩

1. 有损压缩主要是图片的质量和大小的权衡
2. 适合于少量特定的场景下，比方少量显示时间比较短的图片资源

High Efficiency Image File Format

assets分类支持High Efficiency Image File Format，并且将High Efficiency Image File Format格式作为assets分类有损压缩的默认格式

1. 比现有的格式图片更大的压缩率
2. 支持透明度
3. assets分类能自动将其余类型的图片转换为High Efficiency Image File Format，只需选择有损压缩的形式就会自动做这种转换无需做其余的额外的工作。

无损压缩

无损压缩是默认的压缩形式，工程中大部分assets分类都是用的无所压缩。

3.png

图片资源能根据用的色谱和轮廓分为两类，不同的形式在有损压缩时会有不同的优化方式。一种是简单的图片资源，这类用了简单的配色和用简单的设计简单，例如很多应使用的icon。另一类指的是复杂的图片资源。有损压缩针对这两种形式都做了不同形式的优化。

Apple Deep Pixel Image Compression

Apple Deep Pixel Image Compression是苹果新引入的一种压缩形式，这是一种灵活的压缩形式，会根据图片的色谱特性选择最优的算法进行压缩

1. 会适配图片色谱
2. 选择最优的压缩算法
3. 压缩的大小可以够提高15-20%

Size improvement

4.png

解码时间也会提高20%

5.png

部署版本和应使用瘦身

6.png

因为为了使更多的使用户用，应使用会向前兼容少量iOS版本。应使用瘦身会根据不同的系统进行相应的优化，但以往的兼容形式无法向前兼容。因而，苹果推出了新的兼容方案OS Variant Thinning，会根据不同的系统进行瘦身，一直兼容到iOS9，并且在最新的系统上会用最新的优化效果。

应使用瘦身报告

打包后会生成报告包括不同版本的包大小、优化空间等信息

App variant export

7.png

Design and production

图片资源

1. 资源来自很多不同的地方
2. 都是人设计出来的
3. 需要很多精力来组织资源文件

颜色管理

1. 没有颜色的像素点只是字节！
2. 颜色配置文件提供预期的显示样式
3. 维护颜色配置文件
4. 保持设计的样式
5. 应使用会在很广泛的显示样式上运行
6. 颜色映射会在将对应的颜色映射到设施上

在编译的时候asset Catalogs会进行颜色的配对工作，这部分工作就不使用在设施上来做了。并且这样做达到的额外的好处就是能缩减颜色配置文件。

工作空间

1. 针对所有设计文件的颜色配置保持一致性
2. sRGB / 8 bits是被广泛用的颜色协议
3. Display P3 / 16 bits用于生动的图像设计
4. 提供了广泛灵活的颜色选项

Working with Wide Color WWDC 2016

图片拉伸

1. 设计工具支持分片
2. 区分可拉伸区域和不可拉伸区域

为了适配很多的设施和界面可可以会遇到拉伸图片资源的情况。传统的方法是将图片分解开，而后在组合起来。这样做的缺点是最后组合起来的时候比较消耗cpu，而且实现起来可可以略微有点复杂。这种形式对于流行的gpu也不是很适合。

Single image + metadata = smooth GPU animation

Asset Catalog “Show Slicing”

8.png
9.png

会根据拉伸的区域进行优化，按原有的尺寸进行设计，不需要考虑各种边界的情况

Asset Catalog分片逻辑

1. 确保拉伸的元数据和图片资源一致
2. 所有设计相关的逻辑都收敛到一处

Vector assets

1. 不同的显示比率用不同的asseasts(1x, 2x, 3x)
2. 将所有需要的asset数组组合成一个PDF格式
3. Xcode会根据不同的显示比例生成优化的bitmaps
4. 保持数组数据能在运行时尺寸改变时动态调整

假如大于自然的尺寸会通过数组数据来优化大小改变时的显示效果，

Design for 2x

1. Retina 2X是最常使用的显示比例
2. 没有像素点对齐的时候还是会出现虚的情况
3. 将边缘的点和像素对齐能使设施的像素点对齐
4. 数组资源能用2x格来优化没有像素点对齐的情况

将2x的素材放入2x的槽内，Xcode会自动生成其余比例的素材

Assets提醒

假如还是有问题的话能手动根据提醒拖入指定的槽位，这样会更可控少量

分类

1. 提供很多选项
2. 只用需要使用到的部分

我们提供了很强的解决引擎和有组织模式提供给用者很多的可以力，建议实使用之初尽量用需要到的简单的方法。

Bundles

1. 对于大规模的工程来说bundle组织是一个挑战
2. 通过多个bundle来处理这个问题
3. 高效的重使用策略

大工程都放到主bundle里面难以维护、要保证命名不会冲突
xcode会把所有的图片资源都针对每个target打到一个bundle里面。能将图片资源打到一个bundle里面，用一致的命名空间，能方便复使用。

UIImage(named: UIImage.Name, in: Bundle, compatibleWith: UITraitCollection) Bundle.image(forResource: NSImage.Name) -> NSImage?

通过指定bundle获取bundle内的图片

每一个单独的bundle都会提供一个唯一的命名空间，这样bundle之间就不会有命名冲突的情况

Namespaces

1. 大的集合对于命名来说是一个挑战
2. 带命名空间目录是使用来分组的

10.png

选中provides namespace会在asset catalog中对应图片会自动增加目录路径

部署

App Thinning

提供不同设施所需的所有内容，应使用瘦身会根据每个设施选取对应的子集

Performance classes

1. 硬件的可以力不同
2. 不需要限制可兼容设施！
3. 通过可适配的资源来处理这些问题

通过性可以分类来进行优化

• 内存分类

11.png

• 图像可以力分类

12.png

分为两个方面，一个是metal属性，Metal 是一种低层次的渲染应使用程序编程接口，提供了软件所需的最低层，保证软件能运行在不同的图形芯片上。另一个方面是特定版本的解决器

可以力矩阵

通过可以力矩阵我们就可以适配我们的assets资源

13.png

提供了三种指定的assets，一种是为了兼容老版本的，另外两个是优化的2g下的Metal4的另一个是3G下的Metal3的。
我们举例通过iphone 8来选择。4g下没有找到，在3g下找到了metal3的。虽然有GPU完全匹配的选项，但是因为我们的策略是内存优先的，由于内存对总体的性可以影响会更大，所以最后选择了3g下找到了metal的asset。

Using Performance Classes

Higher memory —> larger / richer assets Higher graphics —> more complex assets

对于比较大的或者交互比较丰富，还有比较需要显示很多细节的图片资源最好用内存优先的形式，这样使用户体验会更好少量。
少量复杂的图片资源对CPU和GPU要求比较高更适合用图像优先的方式。

NSDataAsset能提供灵活的容器

能放在asset分类里，内容能是任何类型的文件，能利使用性可以分类的功可以来做文件的选择和路由。

例如能根据不同的设施的类型通过性可以分类获取到对应的plist文件

Sprite atlases

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

1. 将所有相关图片打包成一个整体
2. 整个图集一次性加载
3. 图片通过图集中位置来引使用

• 通过UIImage / NSImage 获取图片
• 在少量特殊的场合用异步加载

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

这个方法消耗I/O和内存的操作，用时需谨慎

Xcode通过像素格式、设施特性和压缩类型自动进行应使用瘦身的优化

asset分类的特性也都应使用到了Sprite atlases上了

总结

Optimizing App Assets

• 图片资源最好的选择
• 在iOS12的应使用上能减少10-20%的空间
• 应使用瘦身功可以针对最新的系统进行了优化
• 能在应使用中用分类功可以来适配资源