iOS 本地圖片優化實踐

刪除無用圖片、去重複、壓縮、分析、網絡下載、Xcode 配置

優化方向

1. 刪除無用圖片

LSUnusedResources

缺點：
1. 不能解決模塊劃後，業務間的圖片引用，刪除謹慎; 
2. 使用 xcassest 管理資源圖片，若是 .imageset 和圖片名命名不統一的話，掃描失敗.
複製代碼

反其道而行之
(1) 經過 cartool 打開 Assets.car 中的文件；
(2) 經過 find 檢索出全部資源圖片；
(3) 經過腳本去遍歷，可執行文件中的 __TEXT，動態庫，jsbundle，xib 等文件判斷 ipa 中的資源圖片是否存在無用圖片.
複製代碼

2. 創建公共資源庫，去除各模塊中的重複圖片

fdupes

原理：大小比較 > 部分MD5簽名比較 > 全MD5簽名比較 > 字節到字節的比較

$ brew install fdupes    

$ fdupes -r ~/path                # 搜索重複子文件在終端展現
$ fdupes -Sr ~/path               # 搜索重複子文件&顯示每一個重複文件的大小在終端展現
$ fdupes -Sr ~/path > ~/log.txt   # log輸出到指定路徑文件夾
複製代碼

3. 壓縮圖片

無損壓縮 ImageOptim

無損壓縮，經過刪除圖片中沒必要要的元數據，實現優化圖片大小
XCode 在編譯的時候會對 png 圖片進行 recompress，生成蘋果爸爸喜歡的 CgBI 格式，會從新添加刪除掉的元數據，爲了優化圖片解碼，減小沒必要要的 GPU 和 CPU 的開銷； 
複製代碼

可參考： imageoptim Xcode's built-in (de)optimization PNG compression and iOS apps Optimizing App Assets Working with Wide Color

針對 imageoptim Xcode's built-in (de)optimization 中提到： COMPRESS_PNG_FILES = NO; 親測設置爲 NO，仍是會 recompress.

如下爲選取了 10 張大圖作的測試，這個 10 張圖片使用 ImageOptim 壓縮過的，Assets.car 中他圖片是使用 cartool 打開查看文件大小；未通過壓縮的圖片，不會出現這樣的原圖 和 ipa 中圖片大小不同的差別。

有損壓縮 tinypng

原理：量化類似的顏色，將 24-bit 的 PNG 圖片轉換成 8-bit 的 PNG 圖片 && 刪除沒必要要的元數據。

其中包括了 上文提到的刪除沒必要要元數據 && png24 -> png8 ，由上文可知只有減小顏色數據一個優化點會生效，官網的 70% 壓縮比也會大打折扣。

缺點：圖片降質，壓縮後須要設計師 check. 
複製代碼

可參考： tinypngMac Release 下載 註冊 tingpngMac AppKey

結論： （1）使用 imageoptim 無損壓縮，放入 Assets.car 中的圖片壓縮後能夠 100% recompress 到原圖大小，未放入 Assest.car 中的圖片沒有 100% recompress 到原圖大小； （2）未放入 Assets.car 中的 jpg 不受 recompress 影響會增大； （3）imageoptim 壓縮後的圖片放入 bundle 中，也不會受 recompress 無效，不會增大； （4）有損壓縮有效，不過效果由於 recompress 效果大打折扣。

4. 分析 ipa 中的圖片大小佔用比例

針對上述的一刪二去三壓，三板斧事後就須要，靜下心來來分析一下目前的 ipa 包中的圖片大小數量組成。

經過對公司的 App 數據採樣分析，其中 4%的圖片數量佔據了 66%空間大小。
將這個 4% 的不放入 Assets.car && 只保留 3x 圖，使用 TestFlight 測試安裝包大小減小了 31 M，
繼續優化將這個 4% 得圖片刪除，或者轉網絡下載之後安裝包大小優化更加可觀。 

若是沒有相似的問題，能夠忽略
複製代碼

5. 轉網絡下載

終極大招 還支持 iOS 8 的話，須要本身開發管理工具

從 iOS9 之後開始支持能夠使用 On Demand Resources，網上介紹不少，再也不贅述。

6. Build Settings 開啓 ASSETCATALOG_COMPILER_OPTIMIZATION space 空間優化

Build Settings -> ASSETCATALOG_COMPILER_OPTIMIZATION -> 開啓 space 能夠優化 30%~40% 能夠優化 Assets.car 大小
複製代碼

7. XCode 10 vs XCode 9 Assets.car 的不一樣

使用 XCode 10 打包後 Assets.car 大小會比 Xcode 9 的大小大 30% 左右。正常現象，App Thinning 實際分發安裝包大小沒有變，經過測試公司 App Xcode 10 打包後，刪除 App 後從新安裝未使用大小比 AppStore 上下面顯示的安裝大小要小 10%。 "assets.car" size nearly doubled while using Xcode 10 GM seed

8. 針對統一圖片集中顏色，能夠使用 Iconfont 字體圖標

優化策略

（1）優先使用網絡下載； （2）充分使用 Asset Catalog，儘量將圖片放入 Asset Catalog 中； （3）完成步驟 2 後，打包生成 ipa 包，分析 Assets.car 中是否存在有大圖，例如 20KB 以上； （4）步驟 3 以後存在大圖，若是使用 alpha 通道使用 tinypng 壓縮後放置 bundle 中只保留 3 倍圖供使用，若是能夠只用 2 倍更好，沒有使用 alpha 通道的能夠選擇轉 jpg 得到更大壓縮空間。

---

工具篇

1. 快速統計工程中圖片數量 && 大小

# 顯示當前路徑的 .png && .jpg 圖片
$ find $PWD | egrep '\.(png|jpg)$'
       
# 統計當前路徑的 .png && .jpg 圖片數量
$ find $PWD | egrep -c '\.(png|jpg)$'    

# 統計當前路徑的 .png && .jpg 圖片總大小（圖片命名不存在空格）
$ find $PWD | egrep '\.(png|jpg)$' | xargs ls -l | awk '{print $5}' | awk '{sum1 += $1}END{print sum1}'.

# 由於圖片命名不規範存在有空格，Linux 中默認使用空格分割，因此先輸出 .txt 再改變
$ find $PWD | egrep '\.(png|jpg)$' > OUTPUT_FILE_PATH.txt       
$ cat OUTPUT_FILE_PATH.txt | tr '\n' '\0' | xargs -0 ls -l | awk '{print $5}' | awk '{sum1 += $1}END{print sum1}'.           

# 不遞歸遍歷，只查看當前目錄下圖片（-maxdepth 1 設置查詢深度）
$ find $PWD -maxdepth 1 | egrep '\.(png|jpg)$'
複製代碼

2. 查看 Assets.car 中的文件

方法一：cartool 解壓 Assets.car 文件到指定路徑

# https://github.com/steventroughtonsmith/cartool
# output_dir 得先建立
$ ./cartool /path/to/Assets.car /path/to/outputDirectory
複製代碼

方法二：AssetCatalogTinkerer 可直接查看 Assets.car 中的圖片

# https://github.com/insidegui/AssetCatalogTinkerer

# http://stackoverflow.com/questions/22630418/analysing-assets-car-file-in-ios
複製代碼

3. 判斷 png 圖片是否使用 Alpha

圖像處理 imagemagick

$ brew install imagemagick
$ identify IMAGE_PATH               # 查看圖片信息
$ identify -format %A IMAGE_PATH    # Blend 使用 alpha 通道，Undefined 未使用 alpha 通道
複製代碼

4. 查看ipa包的壓縮比

unzip -lv xxx.ipa
複製代碼

參考

1. GMTC 上分享滴滴出行 iOS 端瘦身實踐的 Slides
2. 乾貨|今日頭條iOS端安裝包大小優化—思路與實踐