[[361330]]

 要是問你，你知道當下都有哪些圖像格式嘛?我猜你肯定說不全，因為現在圖像格式真的太多了，但是應該能說出這幾個常用的格式：jpg、gif、png和svg。然后我再問你，知不知道這幾個格式有什么區別?各自的適用場景又是什么呢?logo應該是選擇 svg 還是 png ?而截圖是選 jpg 還是 png 好?在不生成過大文件的前提下，文件的最優質量是多少?了解每個圖像格式的工作原理以及它們各自的利弊可以幫助回答這些問題。

在過去幾年中，數字化設計和前端開發里大量的研究和測試工具已經幫助我們搞清楚了這些問題。在本文中，我將展示一下每種格式的工作原理，它們各自的優點以及在網頁使用時的壓縮與保存方法。

先來看幾個概念

• 有損(Lossless)和無損(Lossy)：一般我們聊到圖片的時候經常會聽到別人提到有損或者無損的字眼，那么什么是有損和無損呢?無損就是圖片在壓縮保存后雖然占用的存儲更小了，但是圖像的呈現質量依然如舊;而有損則是相反，圖像隨著一次又一次的壓縮后，質量會變得越來越差。
• 索引色(Indexed color)和直接色(Direct color)：按照不同的顏色深度可以將顏色分為索引色和直接色。索引色就是圖像作者指定圖片的用色總共不超過256種;而直接色則是對顏色使用沒有限制，可以存在成千上萬的顏色值。
• 光柵格式(raster)和矢量格式(vector)：圖像根據信息的表示方式可以分為光柵圖和矢量圖。光柵圖也叫作位圖，點陣圖或者像素圖，圖的最小單位是由一個個帶顏色的像素組合而成，在 Photoshop 里把圖片放到最大，將看到許許多多的像素方塊，所以光柵圖在伸縮的時候圖像可能會失真;而矢量圖則是以由點、線和一些幾何圖形為基礎，通過數學計算來排列組合而成，這種圖在伸縮的時候能完好的保護質量。

JPEG

JEPG由聯合圖像專家小組(Joint Photographic Experts Group)于1992年創建，并以創建者命名。JPEG是一種有損光柵圖像格式，這意味著每次壓縮保存JPEG時，一些信息將發生不可逆轉地丟失;且存儲的顏色無限制，這就對存儲照片這種顏色非常豐富復雜的圖像就很友好了。

因為 JPEG 壓縮在亮度和色彩上面的優越性，所以 JPEG 非常適合用于照片、色彩梯度明顯的圖像比如漸變和陰影這些地方。

JPEG 的壓縮可以用 Photoshop 里存儲為 web 格式的時候可以直接選擇壓縮品質，一般用于 web 的 JPG 圖片選擇 50%-60% 質量的即可，因為它兼顧不錯的圖像質量和較小的文件尺寸。另外也可以用在線壓縮工具 TinyJPG。

下面這個圖，我用的是 50%的品質壓縮出來的 JPG，很明顯質量要比 GIF 的要好很多，而且文件尺寸也小不少。

• JPEG 和 JPG 的區別：JPEG 更多的指的是 .jpg 圖像格式的一種壓縮算法，而 JPG 就是一種圖像存儲的格式。

PNG

可移植網絡圖形(Portable Network Graphics)也是一種自1995年以來就一直存在的光柵圖像格式。它與 JPEG 不同，因為它是一種無損格式，并且是目前網絡上最常見的無損格式。這意味著由于它的壓縮算法，當文件被保存和壓縮時，不會丟失任何信息。

PNG格式

PNG其實可以細分為好幾個格式的，有PNG 8、PNG 24和PNG 32。那么怎么區分一個 PNG 圖片是什么格式的呢?

打開上面這張圖片的屬性面板，從詳細信息里看到有一個屬性叫做位深度，它的值是24，那么就表示他是 PNG 24 格式的圖片。同樣，PNG 8 和 PNG 32 的位深度分別是8和32。

❝位深度表示圖像能夠存儲顏色的最大數值。8位就是2的8次方(2^8=256)種顏色，所以 PNG 8 最多只能存儲256種顏色。PNG 24 和 PNG 32又叫真彩色，最多存儲2的24次方種顏色，可以達到人眼分辨的極限了;PNG 32中剩余的8位存儲的是Alpha 通道的透明色。❞

然后如何生成這些不同格式的圖片呢?自然是用專業的圖像處理軟件啦，比如可以用 Photoshop 或者 Fireworks。這里以 Photoshop 為例子，文件->存儲為 Web 所用格式， 可以看到下拉這里只有 PNG-8 和 PNG-24，而沒有 PNG-32 呢?是因為 Photoshop不支持這個格式嘛?并不是。

在 Photoshop 里導出 PNG-32 格式的圖片是通過選擇 PNG-24格式，并且勾選下面的透明度，這樣生成的圖片位數才是32位的，如果不勾選透明度的話就是 PNG-24格式。由此看來 PNG-24 是不支持透明的，PNG-32 是支持透明的。

PNG透明度

從 Fireworks 8的優化面板里可以看到 PNG 格式存在三種透明格式：不透明、索引透明和 Alpha透明。

• PNG 8透明度

從上面那個圖里可以看出 PNG 8 是支持這三種不透明格式的。但是 Photoshop只支持導出不透明和索引透明格式。在Photoshop 中如果選擇 PNG 8，且勾選了透明度，那么導出的圖片就是 PNG 8 索引透明，否則就是 PNG 8 不透明。

用 Photoshop 和 Fireworks 8 導出 PNG 8 的各種格式如下所示：

根據以上圖片我們可以得出結論：

再來看看這些格式在不同瀏覽器下的表現情況：

根據以上圖片我們可以得出結論：

• PNG 8 索引透明和 Alpha 透明都兼容IE 6;但美中不足的是，PNG 8Alpha透明在 IE 6下會產生鋸齒。
• 其他格式的圖片在各個瀏覽器下的表現一致。
• Fireworks 8導出的 PNG 8索引透明帶有白色鋸齒，但是如果圖片是放到白色的背景的容器下，那么這個白色鋸齒就完全看不出來了，表現得和正常效果一樣。
• Photoshop 導出的 PNG 8 圖片都帶有鋸齒。
• PNG 8 索引透明都帶有鋸齒，且 Fireworks 8 導出的 PNG 8索引透明的鋸齒是白色的。

PNG 24 和 PNG 32PNG 24 是不透明的;PNG 32 是支持透明的，且是 Alpha 透明。來看下它們在不同瀏覽器下的表現：

PNG 32 圖片的透明區域在 IE 6 下將不再透明，而是顏色值為 f0f0f0 的灰色填充，在更高級版本的 IE 下是正常的。PNG 32 圖片不會有鋸齒。

PNG壓縮

本文前面提到了 JPEG 在照片片這類顏色豐富的圖像上的優秀表現，所以現在將它和 PNG 的3種格式進行對比。主要是對比壓縮前后的存儲體積以及表現效果等方面。用的是免費的在線壓縮工具 TinyPNG，這個工具可以壓縮 JPEG 和 PNG 格式。

從上圖這個圖中，我們可以從不同角度得出一些結論：

• PNG 8 格式的圖片顏色過度處理得很突兀，能看到很明顯的波浪褶皺，這就是因為它最多只能存儲256種顏色導致的，所以PNG 8不適合用于存儲顏色復雜的圖像。相反，由于其相對于 PNG 24 或者 PNG 32 有先天的存儲體積小優勢，所以它非常適合應用于圖標、顏色簡單的或透明的圖像上。
• 對比100%質量的 JPG、55%質量的 JPG、PNG 24 和 PNG 32，肉眼上看他們的圖像表現效果都差不多，但是各自所占用的存儲空間卻是差得有些離譜。壓縮前，當屬55%質量的 JPG 占用存儲最小;壓縮后，PNG 24 和 PNG 32 一樣，會比55%質量的 JPG 小一些，但是由于 PNG 32 支持透明，所以對于顏色豐富的圖像建議用 PNG 32 格式導出，然后用壓縮工具壓縮一下即可。
• 對比壓縮前后的 PNG 24 和 PNG 32 兩者的存儲體積相差巨大，但是表現效果卻相差無幾，所以用于 web 上的 PNG 24 或 PNG 32 圖像一定要記得壓縮，這對于客戶端的性能優化將提供非常大的幫助。

GIF

圖形交換格式(Graphics Interchange Format)也是一種光柵格式，最多只能存儲256種顏色，支持透明度，而且在 IE 6 下也支持得很好，唯一美中不足的是除了 Fireworks 8 導出的 GIF 不透明格式外，所有的其他 GIF 格式的圖片都存在鋸齒。

gif

但是 GIF 也不是一無是處，最大的優點就是支持簡單的動畫。如下面簡單的交通燈動畫： 

gif_ani

SVG

可伸縮矢量圖形(Scalable Vector Graphics)，顧名思義它是矢量的，而非光柵格式。區別于光柵格式的依靠像素點來存儲圖像，矢量圖是通過XML格式來數據化的記錄圖像的信息。所以 SVG 相對于光柵格式的圖像具有以下優勢：

• 任意伸縮圖像，而不會破壞圖像的清晰度和細節。
• 完全支持 DOM，以及 JavaScript 能夠很好的訪問到它。
• 總體來講，SVG的文件會比 GIF 或 JPG 的會小很多。

就像其它矢量格式，SVG 圖片能不丟失任何細節地放大到任何大小。打個比方，同一個圖標，可以以多種尺寸使用，并且在任何屏幕分辨率(比如 Retina 顯示器)中都將看起來很清晰，而不需要存成多個文件。比如下面這個這個圖對比，右邊的是矢量圖，左邊的是其他格式圖片：

svg

SVG用途SVG 在線條藝術，LOGO，圖標，插畫和數據可視化方面用途廣泛。但它不適用于寫實圖像和有許多細節的復雜圖片。在一些情況下，SVG 和 PNG 都能很好地達到同一個目的。對于線條藝術，SVG 通常能生成較小的文件。但是這不是必然的，實際情況會根據矢量圖像究竟有多少個錨點，它甚至可能會生成比PNG更大的文件。SVG 真正出色的地方是數據可視化。由于可以使用JavaScript 來操縱和創建矢量動畫，諸如 D3 之類的庫提供了無限的可能性。LOGO, 圖標和數據可視化是 SVG 使用的優秀范例。

svg_use

SVG壓縮

比較好的 SVG 方法應該是通過清除 SVG 矢量圖形中不必要的錨點、元素和屬性來減少文件大小。錨點繪制了矢量圖像，因此，你需要確保已移除的錨點不會影響矢量圖形的最終形狀。如果您使用 Adobe Illustrator 編輯 SVG，請確保使用導 -> 導出為，而不是文件 -> 另存為進行保存，因為這樣才能生成一個最小化的文件。

清理不必要的節點是縮減 SVG 尺寸的一種途徑。元素標簽是包含在 SVG 文件內的所有內容，包括開始和結束標簽。矢量編輯軟件，如 Adobe Illustrator 和 Sketch 可能會到處含有非必要元素和屬性的 SVG 。SVG 壓縮器可用于刪除這種多余的信息。Compresso 和 SVGOMG 等在線工具可以完成此工作。

參考文章

• 在網頁上使用JPG、PNG和SVG：新手指南
• PNG使用技巧
• PNG vs. GIF vs. JPEG vs. SVG - When best to use?
• JPG vs PNG vs GIF vs SVG – What is the Difference?