設計師自己就能做的 Sketch 檔案優化：極限的檔案壓縮

利用壓縮內部圖檔將 Sketch 檔壓縮到最小

工作時就是要一邊聽歌才行

【新民謠】唱著你的故事，還有一生沒寫完

雖然 Sketch 一直以來都以效能作為主打的優勢，但如果是長期在不斷更新的專案，檔案本身越來越肥、越來越慢也是難免。但只要能理解究竟是什麼原因拖慢效能，就可以馬上處理並且避免再讓檔案狀況變得更差。這篇文章主要寫給以下這幾個狀況的人。

1. 要長期維護 Sketch 檔，而且檔案越做越大
2. 手邊 Sketch 檔案狀態已經很差，每次開啟、編輯都是折磨
3. Mac 太舊每次開 Sketch 都會覺得卡的人

計畫會分成兩篇文章來介紹

1. 極限的檔案壓縮：利用壓縮內部圖檔立即改善檔案狀況，這篇會先介紹
2. 長期維護檔案效能：長期維護檔案的方式，之後會介紹

用壓縮圖檔來達到檔案最小化

先來說明白一件事情，究竟 Sketch 檔案肥大的原因是什麼？實際上 Sketch 檔本身是非常輕便的，真正讓檔案肥大的其實是 圖檔，所以要立即優化檔案就要從檔案內的圖檔下手，下面會一步一步教學要如何操作，作法主要參考以下這篇文章，實際操作前建議先備份檔案。

Minimize Sketch files to a MINIMUM! with 6 simple steps and awesome tools

1. 使用 BetterZip 提取 Sketch 檔內的圖檔

BetterZip 4 — MacItBetter

即將要壓縮的檔案，目前的檔案大小 101.8 MB，在 Betterzip 中開啟可以看到 “image” 資料夾大小就達到 98.7 MB

打開 “image” 資料夾，就會找到 Sketch 檔裡所有用到的圖檔

開一個空白資料夾，將所有圖片複製出來，完成之後，我們就有這個 Sketch 檔內所有的圖檔了，接下來要對複製出來的圖檔做處理

2. 用 Th-MakerX 限制圖片寬高

Th-MakerX

開啟 Th-MakerX 設定自己設計尺寸理想的最大寬度（或高度），將所有圖片一次處理。Th-MakerX 會自動忽視比設定更小的檔案，不用手動過濾。

這個案例中由於是使用為 iOS 設計的檔案，圖片寬度個人是設定在寬度 750px(2x retina 會需要的最大尺寸，3x 圖檔大小會太大視覺效果提升也有限)，這部分視個人需求調整。

3. 透過 Pngyu、ImageOtim 做有損壓縮及無損壓縮

Pngyu

ImageOptim — better Save for Web

將圖片丟進 Pngyu，如果有裝 ImageOptim 會跳出使否要透過 ImageOtim 再次壓縮的選項，選 “Yes”

Magic happening……

4.將圖檔放回 Betterzip 開啟的 Sketch 檔

將壓縮好的圖檔丟回 Betterzip 開啟的 Sketch 檔，取代原始圖檔

記得要儲存 Sketch 檔，跳出 “This archive doesn’t contain any Mac specific files yet” 的選項時要選 “Keep Mac Stuff out”

到這邊為止，圖檔處理的步驟就算完成了，記得打開 Sketch 檔看看是否正常

壓縮圖檔的影響

如果順利的話，Sketch 檔案的大小都能縮減到一半一上。

左為原檔，右為已壓縮檔案，101.8MB -> 31 MB

文中的檔案大小壓縮到不到 1/3 ，以壓縮檔案來說已經很驚人了，不過節省空間並不是最有感的，而是檔案內的圖檔都被壓縮之後，在 Sketch 內工作時也不在需要載入過大的圖片，工作效能會有非常明顯的影響。

然後來說說這個做法的優缺點

優點

1. 不需要更動設計，任何 Sketch 檔都可以處理
2. 效能差異非常明顯而且立即見效，對越肥大的檔案效果越好
3. 技術門檻低

缺點

1. 通常一個檔案只能做一次，同一個圖檔做兩次有損壓縮通常會被壓壞
2. 因為第一點的關係，不能作為長期的做法，只算是補救方案
3. 有損壓縮畢竟會影響圖片本身，對於不同的設計需求可能行不通

壓縮圖檔的作法效果看似效果很好，但畢竟不可能天天把 Sketch 檔內的圖檔抓出來壓縮，所以只是從頭優化整個工作流程的第一步，之後檔案還要維護才能維持良好的效能，詳細的作法會寫在 長期維護檔案效能 中。