《Photoshop網頁圖片最佳化》低失真、高壓縮、加速網頁載入速度

梅問題-《Photoshop網頁圖片最佳化》低失真、高壓縮、加速網頁載入速度
  其實影響網站的載入速度,最直接的問題就在於圖片,有時候這真的很二難,為了讓畫面可以完美呈現,都會盡量減少壓縮,讓圖片的畫質更加UP!UP!但這時候圖檔就會變大,當網頁的圖片一多時,整個載入的速度就會變慢,所以今天要分享個小技巧,透過Photoshop來進行圖片壓縮,並依低失真高壓縮率為原則,讓圖片既可能保有高畫質,又能減少圖片大小,其實這有小絕竅的,因此下回在壓縮圖片時,不妨參留意一下,立即能提升網站的載入速度。

Step1
首先,開啟圖檔案後,選擇影像 / 調整 / 色調分離。 
梅問題-《Photoshop網頁圖片最佳化》低失真、高壓縮、加速網頁載入速度
Step2
接著設定要顯示的色階數,色階愈少雖然檔案愈小,但畫面的塊狀會愈嚴重,所以這邊得自行取捨一下。 
梅問題-《Photoshop網頁圖片最佳化》低失真、高壓縮、加速網頁載入速度
Step3
設定好後,再選擇儲存為網頁用,這時候品質的地方,建議在50~60間。
梅問題-《Photoshop網頁圖片最佳化》低失真、高壓縮、加速網頁載入速度
Step4
完成後,可看到前後二者,在中間與亮部區塊幾乎沒什麼影響,只有在暗面的部分有所失真,但前後二者的檔案差了快1/3。
原圖

相關文章

「Icons8」上萬個扁平圖示產生器,可直接拖拉到Photoshop中使用

「Icons8」上萬個扁平圖示產生器,可直接拖拉到Photoshop中使用

Adobe Photoshop CC2017開新檔案大改版,加入Adobe Stock素材模板

Adobe Photoshop CC2017開新檔案大改版,加入Adobe Stock素材模板

使用舊版「Photoshop的儲存為網頁用」也可輸出Retina的各種影像尺寸

使用舊版「Photoshop的儲存為網頁用」也可輸出Retina的各種影像尺寸

Photoshop CC 將圖片批次轉存Retina各種不同的尺寸規格

Photoshop CC 將圖片批次轉存Retina各種不同的尺寸規格

「ElemisFreebies」上百個免費超質感網頁版型PSD檔下載 (可商用)

「ElemisFreebies」上百個免費超質感網頁版型PSD檔下載 (可商用)





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。