設計師自己就能做的 Sketch 檔案優化:極限的檔案壓縮
利用壓縮內部圖檔將 Sketch 檔壓縮到最小
工作時就是要一邊聽歌才行
雖然 Sketch 一直以來都以效能作為主打的優勢,但如果是長期在不斷更新的專案,檔案本身越來越肥、越來越慢也是難免。但只要能理解究竟是什麼原因拖慢效能,就可以馬上處理並且避免再讓檔案狀況變得更差。這篇文章主要寫給以下這幾個狀況的人。
- 要長期維護 Sketch 檔,而且檔案越做越大
- 手邊 Sketch 檔案狀態已經很差,每次開啟、編輯都是折磨
- Mac 太舊每次開 Sketch 都會覺得卡的人
計畫會分成兩篇文章來介紹
- 極限的檔案壓縮:利用壓縮內部圖檔立即改善檔案狀況,這篇會先介紹
- 長期維護檔案效能:長期維護檔案的方式,之後會介紹
用壓縮圖檔來達到檔案最小化
先來說明白一件事情,究竟 Sketch 檔案肥大的原因是什麼?實際上 Sketch 檔本身是非常輕便的,真正讓檔案肥大的其實是 圖檔,所以要立即優化檔案就要從檔案內的圖檔下手,下面會一步一步教學要如何操作,作法主要參考以下這篇文章,實際操作前建議先備份檔案。
2. 用 Th-MakerX 限制圖片寬高
這個案例中由於是使用為 iOS 設計的檔案,圖片寬度個人是設定在寬度 750px(2x retina 會需要的最大尺寸,3x 圖檔大小會太大視覺效果提升也有限),這部分視個人需求調整。
3. 透過 Pngyu、ImageOtim 做有損壓縮及無損壓縮
4.將圖檔放回 Betterzip 開啟的 Sketch 檔
到這邊為止,圖檔處理的步驟就算完成了,記得打開 Sketch 檔看看是否正常
壓縮圖檔的影響
如果順利的話,Sketch 檔案的大小都能縮減到一半一上。
文中的檔案大小壓縮到不到 1/3 ,以壓縮檔案來說已經很驚人了,不過節省空間並不是最有感的,而是檔案內的圖檔都被壓縮之後,在 Sketch 內工作時也不在需要載入過大的圖片,工作效能會有非常明顯的影響。
然後來說說這個做法的優缺點
優點
- 不需要更動設計,任何 Sketch 檔都可以處理
- 效能差異非常明顯而且立即見效,對越肥大的檔案效果越好
- 技術門檻低
缺點
- 通常一個檔案只能做一次,同一個圖檔做兩次有損壓縮通常會被壓壞
- 因為第一點的關係,不能作為長期的做法,只算是補救方案
- 有損壓縮畢竟會影響圖片本身,對於不同的設計需求可能行不通
壓縮圖檔的作法效果看似效果很好,但畢竟不可能天天把 Sketch 檔內的圖檔抓出來壓縮,所以只是從頭優化整個工作流程的第一步,之後檔案還要維護才能維持良好的效能,詳細的作法會寫在 長期維護檔案效能 中。