PS圖片儲存為Web所用格式最佳化

 　　儲存為Web所用格式

　　互連網幾乎是當今最大的藝術、圖形和相片分享平台之一，因此掌握一些儲存為網頁格式的基礎知識就非常重要了。實際上，儲存為網頁格式是一項平衡藝術——你必須在圖片品質和介質的檔案尺寸之間做好平衡，以便滿足你的個人需求。

　　在速度相對重要的地方(如迅速地載入網站)，你可能需要犧牲一些圖片品質。而在品質重要的地方，則需要犧牲一點速度。這堂課程的目的就是向你介紹一些方法，在這兩個因素之間尋求平衡，與此同時保留非常好的映像品質。

　　無損 vs 損耗資料

　　雖然存在有非常多的圖片格式(僅舉幾例，如jpeg，gif和png)，但是依據壓縮方法不同，所有的圖片都能進一步歸類為兩大類別：無損和有損。無損資料壓縮保證了映像在沒有任何品質和資訊丟失的情況下重現，而有損資料壓縮的結果就是可能造成品質和資訊的丟失。在平面設計領域最主流的無損媒介格式包括GIF、PNG以及TIFF，而JPEG是最主流的有損壓縮的圖形格式。

　　如何用PHOTOSHOP儲存網頁格式

　　PS擁有非常好的方法來為網頁最佳化圖片。在PS中，選擇檔案>儲存為Web格式或者使用快速鍵ctrl+alt+shift+s。一個新的對話方塊將會彈出，這裡有所有為網頁儲存和最佳化圖片的設定。

　　圖01

　　通過以下一些生活中的案例來示範如何使用對話方塊中的設定。

　　為網頁儲存映像

　　由於圖片巨大的檔案體積，它們更多是以有損壓縮格式來儲存的。甚至在拍照時，相對於數倍大小的RAW格式，相機也傾向於用有損格式(如JPEG)來儲存圖片。

　　JPEG是日常中首選的圖片格式，它是以它的創造者“聯合映像專家小組”來命名的。Jpeg之所以能夠成為標準，是因為它在壓縮映像資料的同時可以保留高品質，並且在相關資訊上能夠接近無損映像的效果。

　　當你在儲存圖片的時候，有幾種網頁格式預設可供選擇。對於一張圖片，你應該考慮是使用JPEG 低、JPEG 中，還是JPEG高。觀察下面的對比圖，(可以)發現案例中的圖片經過壓縮後並沒有多大的品質損耗。相比起超過250KB的源檔案，我們選擇中等品質或者高等品質的壓縮預設就能夠得到一個大小不超過30KB，並有合適品質的圖片。

　　圖02

　　GIF映像

　　有些時候，你會被要求用無損格式來儲存，以便最好地最佳化你正在創作的任何作品。這在網頁設計中時常遇到，在布局上使用比普通圖片更少的顏色。

　　GIF，全稱為“映像互換格式”，是一種只用到256個顏色調色盤的圖片格式，這讓它成為不需要使用太廣泛色域的網頁圖片的理想選擇。GIF也能將單個像素設定成透明，不過這並不在這個教程的討論範圍之內。下面展示了一張(使用著256個顏色的)GIF映像和JPEG映像的對比照，它們擁有同樣的大小。正如你所見到的，無損GIF圖片能更好的接近源檔案。

　　圖03

　　因為GIF映像受到256色的限制，它本應該極少被用到圖片中，但是他們恰好適合那些使用純色或是有限色彩的映像。對於圖片來說，通常來說不是使用JPEG有損壓縮，就是GIF無損格式。

　　高品質映像和無損PNG

　　PNG，全稱為“可移植網狀圖形”，是一種類似於GIF的無損格式，只是它支援更為豐富的色彩(有時候也讓它的體積變大)，而且可以支援帶透明圖層的Alpha通道，而非單一透明像素。

　　PNG映像正在日漸取代GIF，主要是因為在支援更豐富的色彩方面，PNG通常比GIF的壓縮效果要更好。雖然它還不想GIF有廣泛的支援，但是無疑它正朝著那個方向前進。

　　當圖片必須保留完整品質在網路上進行傳輸的時候，PNG是最佳的選擇。比起用JPEG傳輸圖片，(PNG)會令你得出更大的圖片大小，但是有時候這是一個非常有必要的犧牲。當一個圖片包含銳利的線條、以及必須保留清晰的文字時，PNG通常是一個更好的選擇，當然了，最終還是要由設計師來決定使用哪一種格式。

分類：

• PS入門教程