實用小技巧！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，后期維護起來非常麻煩。而且程序在加載這些素材的時候也會占用內存，對穩定性和性能都會有影響，一張圖可能不太明顯，但是一個頁面中如果大量的使用圖片素材，那么影響就是非常巨大的了。

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

「有哪些看上去很高大上，實際很簡單的PS技巧？」

1. 《有哪些看上去很高大上，但實際很簡單的PS技巧？》
2. 《有哪些看上去很高大上，但實際很簡單的PS技巧？（入門篇）》
3. 《有哪些看上去很高大上，但實際很簡單的PS技巧？（酷炫火焰篇）》
4. 《有哪些看上去很高大上，但實際很簡單的PS技巧？（人像篇）》
5. 《有哪些看上去很高大上，但實際很簡單的PS技巧？（漸變色篇）》
6. 《有哪些看上去很高大上，但實際很簡單的PS技巧？（二次元篇）》

原文地址：zhihu

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量112萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com