PS切圖後圖片過大該怎麼壓縮大小?

在網頁設計中經常會用到切圖,但有時候切出來的圖片過大,那該怎麼進一步壓縮圖片大小呢?一起來了解一下補救的方法。

工具/原料

PS

方法/步驟

首先如果只是壓縮的話,建議使用 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 的教程,我這裡就不過多描述了。

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

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

原作者:絲路教育

相關文章

  1. PS切圖後圖片大小過大怎麼辦?

    PS切圖後圖片大小過大怎麼辦? 工具/原料 ps 方法/步驟 首先如果只是壓縮的話,建議使用 ImageAlpha(專門壓縮PNG) 以網上的一副海報為例(侵刪) 正常從PS導出的PNG大小: 原本是 ...
  2. 解決croppic插件切圖後圖片不更新的問題

    croppic是程式設計師之間比較流行的 jQuery 圖片裁剪插件,但是我們在使用的過程就會發現,當我們上傳一幅圖片點擊切圖後往往發現圖片並沒有自動更新.那麼怎樣解決這個問題呢,下面就給大家介紹一下: ...
  3. ps裁剪後圖片變大怎麼辦

    有一張長圖,切片工具不好用,就用裁剪的笨辦法處理,結果保存後圖片太大了,原來是裁剪後,文檔大小沒有變,所以文件就大.壓縮了怕畫質受影響.研究了半天,找到個辦法.存儲為WEB格式就OK了. 工具/原料 ...
  4. PS切圖如何設置圖片格式

    通常情況下,在對設計圖進行修改前,首先應當保留一份PSD源文件,然後再在其副本上進行修改.使用photoshop將設計圖切成自己需要的素材時,該怎樣進行圖片格式設置呢. 工具/原料 電腦 Photos ...
  5. PS切圖導出代碼上傳淘寶店鋪圖片錯位有空隙散屏

    好些美工同學應該都遇到過這個問題,就是通過PS切圖後導出的代碼用DW編輯,將圖片上傳到淘寶後台,然後在DW中將更換圖片連結和添加需要的超連結或者熱點等操作後,頁面顯示是正常的. 但是把代碼貼到淘寶裝修 ...
  6. 淘寶裝修 PS切圖切片發布有白邊

    在PS切圖的時候,特別是切圖比較多的時候,會很容易出現圖片錯位的現象,在這裡教大家怎麼解決吧! 首先,先檢查自己的代碼有沒有問題. 檢查下有沒有空格,有沒有忘記替換的圖片連結. 看看有沒有那種gif的 ...
  7. PS中保存的圖片太大解決辦法,指定大小儲存圖片

    很多朋友會遇到這樣的問題,當使用PS軟體處理圖片時,所保存的圖片大小都很大,根本達不到自己的要求.怎樣解決呢?保存圖片時能按自己要求的大小來保存嗎?答案是能的,可以自定義圖片內存大小. 工具/原料 P ...
  8. ps切圖的一些知識

    ps切圖是很多網頁和一些分割圖片的常用方法,如何平均切圖,如何設置圖片被切後的總和大小,這裡都將講到. 方法/步驟 首先打開一張圖片,然後找到切片工具.切片工具的位置在裁剪工具的下方,右鍵就可以看到. ...
  9. PS切圖的流程(網頁製作)

    web前端工程師都需要做基本的靜態頁面,這時候就得用ps切圖技術了,可能很多新手還不知道怎樣用ps切圖,今天小編就為大家介紹一下ps切圖的流程. 工具/原料 photoshop軟體 psd源文件 方法 ...
  10. 怎樣進行PS切圖

    Photoshop本身具有十分強大的功能,但在前端開發過程中,僅僅需要使用其完成切圖工作即可. 工具/原料 電腦 Photoshop 方法/步驟 A.隱藏文字,只留背景 若文字上有特殊效果,無法用代碼 ...
  11. 怎麼用ps切圖

    ps是一款功能強大的處理軟體,不但可以用來作圖,還可以用來切圖製作網頁.下面小編就來介紹一下怎麼用ps切圖. 工具/原料 ps軟體 圖片 方法/步驟 首先我們用ps軟體打開一張psd圖,也就是要切的圖 ...
  12. 運用ps輕鬆解決gif圖片過大的問題

    相信很多編輯都遇到過gif圖片過大,無法上傳的問題,今天跟大家講一下如何用ps讓gif變小. 工具/原料 電腦 ps 方法/步驟 這樣的問題,相信都遇到過吧 先查看下圖片大小,3.62MB是有點大了 ...
  13. 如何使用assistor ps 切圖

    assistor ps不僅能夠幫助我們對ps進行標註,還能對ps裡面的圖層進行切圖 方法/步驟 首先打開assistor ps,選擇1切圖標記功能 勾選2區域中的,每個圖層,這樣我們可以選中多個圖層同 ...
  14. PS切圖如何進行初始化設置

    Photoshop是web前端工程師進行切圖必不可少的工具,而在使用PS進行切圖之前需要進行一些初始化設置,主要包括首選項設置.面板設置和輔助視圖三個部分. 工具/原料 電腦.計算機 Photosho ...
  15. Ps中保存的圖片太大如何解決

    PS全稱是"Adobe Photoshop",它是由Adobe Systems開發和發行的圖像處理軟體. Photoshop主要處理以像素所構成的數字圖像.使用其眾多的編修與繪圖工 ...
  16. 怎麼註冊登錄安裝的PS切圖插件cutterman?

    下載安裝的PS切圖插件cutterman,啟動用需要登錄帳號,這應該怎麼辦呢?我們只需要去註冊帳號並登錄就可以使用啦 工具/原料 PS CC2015及以上版本 cutterman切圖插件 方法/步驟 ...
  17. 如何解決,PS中存儲JPG圖片很大的問題

    經常使用photoshop的朋友們,應該會遇到過這樣的問題,將ps文件存儲為jpg圖片的時候,會發現圖片會很大,有幾十M甚至上百M,造成這種情況的原因一般都是從圖片資源網站上下的圖片中包含大量的元數據 ...
  18. 分享如何在ps切圖中保存所有切片為jpg格式

    一個簡單的操作,一份真誠的分享,現在分享如何在ps切圖中保存所有切片為jpg格式的操作過程和技巧分享給大家,過程簡單看圖就會做,教程是自己原創的,其他分享平台估計也能看到 工具/原料 PS 切圖 方法 ...
  19. 圖片太大怎麼辦?如何壓縮圖片大小?

    圖片太大怎麼辦?如何壓縮圖片大小?有些時候需要上傳一些圖片證件到網際網路上,但是 圖片太大,不符合要求,這時候該怎麼辦呢? 方法/步驟 其實想要在保證清新的情況下壓縮圖片,讓圖片變得更小很簡單.也無需下 ...
  20. 圖片太大怎麼進行壓縮,有什麼壓縮的方法

    怎麼壓縮圖片文件?在日常生活中,經常會修改圖片的大小,有時候圖片太大在一些平台上是不能進行上傳的,壓縮圖片到指定的大小才可以,那麼圖片太大怎麼進行壓縮?下面是操作的方法. 工具/原料 壓縮工具 電腦 ...