PS切圖后！圖片過大怎麼辦？

編者按：有同學問切完圖還是太大了該怎麼辦，今天@Matuo__Basyou 介紹了幾種常用的方法，從PNG到WebP，再到JPG都有相關的技巧經驗分享，最後還附上一個SVG的免費福利，來收！

首先如果只是壓縮的話，建議使用 ImageAlpha（專門壓縮PNG）

以網上的一副海報為例（侵刪）

正常從PS導出的PNG大小：

原本是 1.1 MB

在 ImageAlpha 中打開后可以看到在默認參數下可壓縮 65%。

壓縮后 379 KB。而且是幾乎無損畫面細節的。我一般在輸出切圖資源的時候都是靠 ImageAlpha 來完成素材的壓縮。

而且 ImageAlpha 還可以通過調節顏色數位來進一步壓縮，但是這樣是有損的。

比如誇張一些將顏色數位調節到 4，細節就已經丟失的差不多了，但是能極大限度的壓縮圖像。

另外還有一些在線的圖片壓縮工具，最常用的也就是：TinyPNG 。和 ImageAlpha 的壓縮默認壓縮率差不多，所以具體喜歡用哪個來壓縮還是看個人習慣了。

還有一種壓縮方式是講 PNG 轉為 WebP 格式。

工具有 Webponize 等。

（圖侵刪）網上的測試結果壓縮率還是非常可觀的。

然而 WebP 還沒有普及開來，大部分公司內部還是主要使用 PNG 來輸出，所以還是要看公司大多數人的使用習慣來選擇具體輸出的格式。

另外如果是一些不帶 Alpha （透明）通道的圖，可以使用 JPG 來輸出，比如移動端產品的引導頁，一般情況同樣大小的 JPG 格式文件都會比 PNG 小，還是以之前的圖為例。

JPG 只有 338KB。直接導出 JPG 不用額外壓縮，而且通過 PS 還可以直接選擇你想輸出的質量，通過降低質量來減小圖片大小。

同時如果覺得降低 JPG 導出質量仍然還是偏大，還可以在 PS 里通過色調分離來進一步壓縮圖片的大小：

當然這個也是有損的，這裡將參數設置到40時，已經出現了一些肉眼可見的質量損失：

所以具體怎麼平衡質量與大小的平衡還是看實際情況來決定。

還有一種情況是圖標素材的壓縮，最理想的情況是將圖片處理為矢量的 SVG 格式。一方面可以無損放大縮小，而且體積也相較於未壓縮的文件來說有很大的減小。網上有很多轉 SVG 的教程，我這裡就不過多描述了，附上鏈接：Iconfont-阿里巴巴矢量圖標庫，在幫助裡面有如何製作 SVG 圖標的詳細教程。

最後關於系統中控制項的輸出，有一條原則就是能用代碼來實現就用代碼，最好不要用圖片，一方面用素材輸出就需要好幾套素材來適配 xhdpi、xxhdpi、xxxhdpi，後期維護起來非常麻煩。而且程序在載入這些素材的時候也會佔用內存，對穩定性和性能都會有影響，一張圖可能不太明顯，但是一個頁面中如果大量的使用圖片素材，那麼影響就是非常巨大的了。

一般軟體工程師都可以對矢量圖形的圓角參數，描邊，填充色，投影大小，投影距離，投影顏色進行定義，所以只要素材可以轉換為實際可用的參數，都是建議寫清楚參數，然後由軟體工程師通過程序來實現。

------

原文地址：zhihu

轉摘請註明優設網譯文出處，謝謝各位小編。

關注優秀網頁設計官方微信號：youshege；和百萬設計師一起來學習設計吧