-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathtemp
119 lines (104 loc) · 6.69 KB
/
temp
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
先上结论:
优先使用CDN 存储图片，App运行时从CDN获取图片；
使用assets进行图片管理，使用svg格式；
使用assets进行图片管理，使用PNG格式；
为什么使用SVG格式？
主要原因是矢量图能提升效率。
设计师不需要将SVG转换为3种PNG图片；
研发在Assets中也只需要添加一张SVG即可，无需添加三种图片。
Assets中的图片，不需要使用无损工具压缩
对图片进行无损压缩，并不会改变最终生成的Assets.car的体积。
原因是：
添加到Assets中的图片，Xcode 会通过自己的压缩算法重新对图片进行处理。在构建 Assets Catalogs 的编译产物 Assest.car 的过程中，Xcode 会使用 actool 对 Assets Catalogs 中的 png 图片进行解码，由此得到 Bitmap 数据，然后再运用 actool 的编码压缩算法进行编码压缩处理。所以不改变编码方式的无损压缩方法最终的包大小来说，没有什么作用。
进行验证：
通过工具imageOptim中的无损压缩功能，将三张图片进行无损压缩。
|图片| 原始体积 | Assets.car |
| --- | --- | --- |
| elephant_png | 10,604,467 | 9758456 |
| elephant_png@2x | 42,740,368 | 28709129 |
| elephant_png@3x | 84,928,285 | 55589210 |
| elephant_png_imageOptim_lossless | 10,599,358 | 9758456 |
| elephant_png_imageOptim_lossless@2x | 30,619,028 | 28709129 |
| elephant_png_imageOptim_lossless@3x | 58,907,690 | 55589210 |
从列表数据可发现，是否进行无损压缩，最终在Assets.car中size相同。
使用PDF/SVG替换PNG，是否能减少size？
Assets.car 中使用矢量图，如果不勾选Perserve vector data，Xcode在build时会将矢量图转换成3种PNG图片。那么，Xcode自动转换的PNG图片 和 我们用设计工具（Sketch）生成的PNG图片，哪种size更小呢？
答案是，没有规律可循，有时Xcode自动转换的PNG图片 更小，有时反之。
进行验证：
选取11张pdf矢量图，11张svg矢量图，将这22张矢量图先使用Sketch生成1x/2x/3x png图片。
然后将所有矢量图和 PNG图片放入assets中，执行xcode archive，然后观察assets.car 中size。
|矢量图 |1x/2x/3x |size | |矢量图转换后的PNG图片 |1x/2x/3x |size | |矢量图size - PNG size|
|--- |--- |--- |--- |--- |--- |--- |--- |---|
|pdf-0.pdf |1 |26213 | |pdf-png-0.png |1 |26516 | |-303|
|pdf-0.pdf |2 |60672 | |[email protected] |2 |59481 | |1191|
|pdf-0.pdf |3 |91493 | |[email protected] |3 |88770 | |2723|
|pdf-1.pdf |1 |341621 | |pdf-png-1.png |1 |248596 | |93025|
|pdf-1.pdf |2 |1153449 | |[email protected] |2 |833552 | |319897|
|pdf-1.pdf |3 |2222257 | |[email protected] |3 |1684785 | |537472|
|pdf-2.pdf |1 |77602 | |pdf-png-2.png |1 |77626 | |-24|
|pdf-2.pdf |2 |162010 | |[email protected] |2 |160053 | |1957|
|pdf-2.pdf |3 |241911 | |[email protected] |3 |238822 | |3089|
|pdf-3.pdf |1 |25065 | |pdf-png-3.png |1 |24915 | |150|
|pdf-3.pdf |2 |54488 | |[email protected] |2 |54331 | |157|
|pdf-3.pdf |3 |85114 | |[email protected] |3 |84868 | |246|
|pdf-4.pdf |1 |334 | |pdf-png-4.png |1 |334 | |0|
|pdf-4.pdf |2 |334 | |[email protected] |2 |334 | |0|
|pdf-4.pdf |3 |334 | |[email protected] |3 |334 | |0|
|pdf-5.pdf |1 |330 | |pdf-png-5.png |1 |330 | |0|
|pdf-5.pdf |2 |330 | |[email protected] |2 |330 | |0|
|pdf-5.pdf |3 |330 | |[email protected] |3 |330 | |0|
|pdf-6.pdf |1 |5149 | |pdf-png-6.png |1 |5149 | |0|
|pdf-6.pdf |2 |28430 | |[email protected] |2 |7575 | |20855|
|pdf-6.pdf |3 |52787 | |[email protected] |3 |9534 | |43253|
|pdf-7.pdf |1 |2711 | |pdf-png-7.png |1 |2839 | |-128|
|pdf-7.pdf |2 |5733 | |[email protected] |2 |6816 | |-1083|
|pdf-7.pdf |3 |8825 | |[email protected] |3 |8642 | |183|
|pdf-8.pdf |1 |6876 | |pdf-png-8.png |1 |6872 | |4|
|pdf-8.pdf |2 |13780 | |[email protected] |2 |13780 | |0|
|pdf-8.pdf |3 |21916 | |[email protected] |3 |21933 | |-17|
|pdf-9.pdf |1 |330 | |pdf-png-9.png |1 |334 | |-4|
|pdf-9.pdf |2 |3383 | |[email protected] |2 |3374 | |9|
|pdf-9.pdf |3 |5058 | |[email protected] |3 |5066 | |-8|
|pdf-10.pdf |1 |334 | |pdf-png-10.png |1 |334 | |0|
|pdf-10.pdf |2 |334 | |[email protected] |2 |334 | |0|
|pdf-10.pdf |3 |334 | |[email protected] |3 |334 | |0|
|svg-0.svg |1 |48004 | |svg-png-0.png |1 |47951 | |53|
|svg-0.svg |2 |130814 | |[email protected] |2 |130614 | |200|
|svg-0.svg |3 |240530 | |[email protected] |3 |239916 | |614|
|svg-1.svg |1 |617814 | |svg-png-1.png |1 |670493 | |-52679|
|svg-1.svg |2 |1226249 | |[email protected] |2 |1321268 | |-95019|
|svg-1.svg |3 |1817027 | |[email protected] |3 |1993283 | |-176256|
|svg-2.svg |1 |72376 | |svg-png-2.png |1 |21387 | |50989|
|svg-2.svg |2 |151432 | |[email protected] |2 |49457 | |101975|
|svg-2.svg |3 |235843 | |[email protected] |3 |76656 | |159187|
|svg-3.svg |1 |59919 | |svg-png-3.png |1 |60014 | |-95|
|svg-3.svg |2 |131254 | |[email protected] |2 |131169 | |85|
|svg-3.svg |3 |209885 | |[email protected] |3 |210661 | |-776|
|svg-4.svg |1 |59961 | |svg-png-4.png |1 |59955 | |6|
|svg-4.svg |2 |133368 | |[email protected] |2 |133005 | |363|
|svg-4.svg |3 |214318 | |[email protected] |3 |214346 | |-28|
|svg-5.svg |1 |35508 | |svg-png-5.png |1 |35446 | |62|
|svg-5.svg |2 |76422 | |[email protected] |2 |76199 | |223|
|svg-5.svg |3 |120715 | |[email protected] |3 |120836 | |-121|
|svg-6.svg |1 |43973 | |svg-png-6.png |1 |43753 | |220|
|svg-6.svg |2 |97885 | |[email protected] |2 |98078 | |-193|
|svg-6.svg |3 |156089 | |[email protected] |3 |156199 | |-110|
|svg-7.svg |1 |35686 | |svg-png-7.png |1 |35739 | |-53|
|svg-7.svg |2 |76979 | |[email protected] |2 |76945 | |34|
|svg-7.svg |3 |117561 | |[email protected] |3 |117943 | |-382|
|svg-8.svg |1 |24283 | |svg-png-8.png |1 |24218 | |65|
|svg-8.svg |2 |51595 | |[email protected] |2 |51903 | |-308|
|svg-8.svg |3 |79980 | |[email protected] |3 |80115 | |-135|
|svg-9.svg |1 |23786 | |svg-png-9.png |1 |6798 | |16988|
|svg-9.svg |2 |52033 | |[email protected] |2 |15842 | |36191|
|svg-9.svg |3 |81961 | |[email protected] |3 |25330 | |56631|
|svg-10.svg |1 |28675 | |svg-png-10.png |1 |28659 | |16|
|svg-10.svg |2 |64867 | |[email protected] |2 |64874 | |-7|
|svg-10.svg |3 |102643 | |[email protected] |3 |102665 | |-22|
从最后一列差值看出，有些情况下，使用矢量图对最终size有优势，有时使用png更有优势。
使用矢量图，什么时候勾选 Perserve vector data
默认不勾选，xcode在编译时会自动将矢量图转换为PNG图片
如果勾选，那么xcode在编译时也会执行png的转换，同时会将原始矢量图打包进assets.car中。
使用场景：希望将一张矢量图用于多种size场景时。
尽量使用assets管理图片
因为如果有3张图片@1x @2x @3x，最终下发到设备中时，只有下发一张。而如果直接将三张图片放置到项目中，那么这三张都会下发。增加了app size。