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官方提供的一组数据:

扫描二维码关注公众号,回复: 3424807 查看本文章

自动打包技术效果

有损压缩(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效果

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

Apple Deep Pixel Image Compression Decode

Deployment target and app thinning

应用瘦身(App Thinning)

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

OS Variant Thinning

应用瘦身报告(App Thinning Export)

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

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

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

App Thinning Export

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

设计与生产(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按钮 
    Show Slicing

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

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

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

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

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

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资源
其中每一个bundle都会有一个唯一的命名空间。

Namespaces

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

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

部署(Deployment)

应用瘦身(App Thinning)

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

Performance classes

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

有两种划分性能的方法:

1.Memory Classes

Memory Classes

2.Graphics Classes

Graphics Classes

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

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

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

全能力矩阵(Full Capability Matrix)

Full Capability Matrix

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

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

  1. Any-Any类型的:可以作为低性能设备支持的
  2. 3GB-Metal3类型的
  3. 2GB-Metal4类型的 
    Full Capability Matrix Type

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

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

在这个过程中,需要注意的一点是:

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

Using Performance Classes

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

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

猜你喜欢

转载自www.cnblogs.com/miaomiaocat/p/9728588.html