iOS 图片格式选择指引

453 阅读6分钟

先上结论: 优先使用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_png10,604,4679758456
elephant_png@2x42,740,36828709129
elephant_png@3x84,928,28555589210
elephant_png_imageOptim_lossless10,599,3589758456
elephant_png_imageOptim_lossless@2x30,619,02828709129
elephant_png_imageOptim_lossless@3x58,907,69055589210

从列表数据可发现,是否进行无损压缩,最终在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/3xsize矢量图转换后的PNG图片1x/2x/3xsize矢量图size - PNG size
pdf-0.pdf126213pdf-png-0.png126516-303
pdf-0.pdf260672pdf-png-0@2x.png2594811191
pdf-0.pdf391493pdf-png-0@3x.png3887702723
pdf-1.pdf1341621pdf-png-1.png124859693025
pdf-1.pdf21153449pdf-png-1@2x.png2833552319897
pdf-1.pdf32222257pdf-png-1@3x.png31684785537472
pdf-2.pdf177602pdf-png-2.png177626-24
pdf-2.pdf2162010pdf-png-2@2x.png21600531957
pdf-2.pdf3241911pdf-png-2@3x.png32388223089
pdf-3.pdf125065pdf-png-3.png124915150
pdf-3.pdf254488pdf-png-3@2x.png254331157
pdf-3.pdf385114pdf-png-3@3x.png384868246
pdf-4.pdf1334pdf-png-4.png13340
pdf-4.pdf2334pdf-png-4@2x.png23340
pdf-4.pdf3334pdf-png-4@3x.png33340
pdf-5.pdf1330pdf-png-5.png13300
pdf-5.pdf2330pdf-png-5@2x.png23300
pdf-5.pdf3330pdf-png-5@3x.png33300
pdf-6.pdf15149pdf-png-6.png151490
pdf-6.pdf228430pdf-png-6@2x.png2757520855
pdf-6.pdf352787pdf-png-6@3x.png3953443253
pdf-7.pdf12711pdf-png-7.png12839-128
pdf-7.pdf25733pdf-png-7@2x.png26816-1083
pdf-7.pdf38825pdf-png-7@3x.png38642183
pdf-8.pdf16876pdf-png-8.png168724
pdf-8.pdf213780pdf-png-8@2x.png2137800
pdf-8.pdf321916pdf-png-8@3x.png321933-17
pdf-9.pdf1330pdf-png-9.png1334-4
pdf-9.pdf23383pdf-png-9@2x.png233749
pdf-9.pdf35058pdf-png-9@3x.png35066-8
pdf-10.pdf1334pdf-png-10.png13340
pdf-10.pdf2334pdf-png-10@2x.png23340
pdf-10.pdf3334pdf-png-10@3x.png33340
svg-0.svg148004svg-png-0.png14795153
svg-0.svg2130814svg-png-0@2x.png2130614200
svg-0.svg3240530svg-png-0@3x.png3239916614
svg-1.svg1617814svg-png-1.png1670493-52679
svg-1.svg21226249svg-png-1@2x.png21321268-95019
svg-1.svg31817027svg-png-1@3x.png31993283-176256
svg-2.svg172376svg-png-2.png12138750989
svg-2.svg2151432svg-png-2@2x.png249457101975
svg-2.svg3235843svg-png-2@3x.png376656159187
svg-3.svg159919svg-png-3.png160014-95
svg-3.svg2131254svg-png-3@2x.png213116985
svg-3.svg3209885svg-png-3@3x.png3210661-776
svg-4.svg159961svg-png-4.png1599556
svg-4.svg2133368svg-png-4@2x.png2133005363
svg-4.svg3214318svg-png-4@3x.png3214346-28
svg-5.svg135508svg-png-5.png13544662
svg-5.svg276422svg-png-5@2x.png276199223
svg-5.svg3120715svg-png-5@3x.png3120836-121
svg-6.svg143973svg-png-6.png143753220
svg-6.svg297885svg-png-6@2x.png298078-193
svg-6.svg3156089svg-png-6@3x.png3156199-110
svg-7.svg135686svg-png-7.png135739-53
svg-7.svg276979svg-png-7@2x.png27694534
svg-7.svg3117561svg-png-7@3x.png3117943-382
svg-8.svg124283svg-png-8.png12421865
svg-8.svg251595svg-png-8@2x.png251903-308
svg-8.svg379980svg-png-8@3x.png380115-135
svg-9.svg123786svg-png-9.png1679816988
svg-9.svg252033svg-png-9@2x.png21584236191
svg-9.svg381961svg-png-9@3x.png32533056631
svg-10.svg128675svg-png-10.png12865916
svg-10.svg264867svg-png-10@2x.png264874-7
svg-10.svg3102643svg-png-10@3x.png3102665-22

从最后一列差值看出,有些情况下,使用矢量图对最终size有优势,有时使用png更有优势。

使用矢量图,什么时候勾选 Perserve vector data 默认不勾选,xcode在编译时会自动将矢量图转换为PNG图片 如果勾选,那么xcode在编译时也会执行png的转换,同时会将原始矢量图打包进assets.car中。 使用场景:希望将一张矢量图用于多种size场景时。

尽量使用assets管理图片
因为如果有3张图片@1x @2x @3x,最终下发到设备中时,只有下发一张。而如果直接将三张图片放置到项目中,那么这三张都会下发。增加了app size。