大型網站前端使用圖片格式的正確姿式

現在，圖像已經成爲網絡不可或缺的一部分。但狀況並不是一向如此。直到1993年，Mosaic瀏覽器纔在網頁內容中加入圖像。有些圖像格式像GIF和JPEG當時已經存在，而PNG和SVG直到90年代纔出現。圖像用途多樣，如：顯示圖片、品牌、插圖、圖表以及許多其餘內容。

因爲圖片格式多樣以及繁多的應用場景，如何選擇正確的圖片格式變得更加困難。LOGO應該是選擇SVG仍是PNG？而截圖是選JPEG好仍是PNG好？在不生成過大文件的前提下，文件的最優質量是多少？瞭解每一個圖像格式的工做原理以及它們各自的利弊能夠幫助回答這些問題。

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

JPEG

JEPG由聯合圖像專家小組（Joint Photographic Experts Group）於1992年建立，並以建立者命名。JPEG是一種有損光柵圖像格式，這意味着每次壓縮保存JPEG時，一些信息將發生不可逆轉地丟失。

JPEG利用人眼感知的缺陷 - 對亮度比對顏色更敏感 - 使用了一種壓縮算法來丟棄咱們不太擅長獲取的信息，所以屬於「有損格式」。壓縮率的設置將決定最終保存文件的大小和質量。 JPEG壓縮技術遠遠不止這些，若是你想深刻了解，能夠看看大衛·奧斯丁（David Austin）的這篇文章。

JPEG的用途

由於JPEG適用於亮度和色彩壓縮，因此在照片，以及其餘寫實或者帶陰影的圖像（如繪畫和3D渲染）上使用效果良好。這就是爲何它是多年來最流行的存儲圖片的格式。出於一樣的緣由，JPEG不適宜用在矢量圖片，如徽標，幾何圖形，截圖等方面。

照片，以及繪畫等複雜的或帶陰影的圖像，是使用JPEG的很好的例子。

壓縮JPEG

做爲有損格式，JPEG文件的壓縮率與最終圖像質量呈反比。在像Photoshop這樣的工具中保存JPEG時，你會看到一個從0到100的質量設置。Photoshop設置了一些圖像質量範圍：

• 低 — 10%

• 中 — 30%

• 高 — 60%

• 很是高 — 80%

• 最佳 — 100%

最佳 100% (61 KB), 很是高 80% (29 KB).

高 60% (16 KB), 中 80% (7 KB).

低 100% (6 KB), 最低 0% (3 KB).

Web頁面上建議使用在50％到60％質量之間的JPEG，由於它能兼顧不錯的圖像質量和較小的文件尺寸。刪除元數據也能夠減小JPEG文件體積。還有如TinyJPG的在線工具，以及桌面應用程序如 ImageOptim(Mac) 和 RIOT(Windows)均可以用來壓縮圖片。在Photoshop裏，能夠經過在「導出」中選擇「元數據：無」或「存儲爲Web所用格式（舊版）」來完成壓縮。對圖像總體或者部分進行模糊處理也會產生較小的文件，不信的話你能夠看這裏。請注意，因爲JPEG是有損格式，即便以100％的質量保存相同的文件，由於壓縮算法在同一圖像上一次又一次地應用，屢次以後也會致使圖像質量的下降。但這一變化可能不會顯示在文件大小的改變上。

PNG

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

PNG有不少很酷的特性，如：

• 透明通道 - 意味着每一個像素能夠具備不一樣的透明度;

• 8位文件可使用基於調色板的顏色模型（也稱爲索引顏色） - 這意味着若是減小顏色數量，文件可能更小;

• 依據libPNG的說法，PNG壓縮效率比GIF高25％

• 二維隔行掃描— 圖像會在加載過程當中漸進顯示，而不是隻有當圖像徹底加載時才顯示。你必須謹慎使用此選項，由於它會增長文件大小。

有關PNG更多特性、歷史和技術信息的完整列表，請查看libpng的頁面.

PNG的用途

PNG對於線條圖，LOGO，圖標和顏色較少的圖像很是適合。顏色複雜的照片和圖像使用PNG格式將生成巨大的文件。PNG另外一個y優勢是支持透明背景。在這種狀況下，即便是複雜的圖片仍然須要使用PNG，由於JPEG中沒法實現圖片透明。

PNG能夠很好地用在線條做品，LOGO和圖標上。 (漫畫做者：xkcd)

壓縮PNG

由於PNG中的壓縮算法是無損的，你能夠選擇性地減小它的顏色，從而經過外部工具減少圖片尺寸。 Pngquant就是一個很好的工具，它能夠在保證透明度不變的狀況下同時減小文件大小。請注意，這一過程會建立一個8位文件，即該文件最多能夠有256種顏色。可能看起來很少，可是用這麼多顏色足以得到很好的效果。

左邊的24位圖像 (149 KB) 和右邊8位，256色圖像 (54 KB) — 縮小了63.7%

對於大多數PNG使用場景（線圖，圖形，圖標），256色是足夠的。所以，能夠經過減小調色板中的顏色數量來進一步減小文件大小。 使用GUI工具是個不錯的選擇，如Pngyu或 ImageAlpha，這些工具容許你預覽生成的文件。 下面的例子顯示瞭如何在不會顯著影響質量的前提下，將調色板減小到32種顏色。在相似的例子中，圖像很難被自動化地壓縮——由於須要不斷預覽和測試來達到最佳效果——同時使用最少的顏色和產生最小的文件尺寸。就像JPEG同樣，也有用於壓縮PNG的在線工具，如：TinyPNG.

在這個示例中，LOGO從原始的24位PNG（10 KB）減小到8位，32色版本（2 KB，縮減80％），而且沒有丟失任何明顯的細節。

那麼，GIF怎麼樣呢？

圖形交換格式（Graphics Interchange Format）也是一種位圖格式，而且比本文中提到的其它格式都出現地更早。它於1989年由Steve Wilhite建立, 在PNG建立前都是最流行的8位圖像格式。GIF與PNG具備相似的特性，但有一些缺點：

• 僅支持256種顏色;

• 一維隔行交錯— 圖像會漸進顯示，但不夠平滑;

• 與PNG相比壓縮性能差

• 二進制透明度 - 像素只能是100％透明或100％可見;

• 有歧義的發音 ��

GIF因動畫而出名並被普遍使用。可是，如今即便是動畫也能夠經過其它的方式完成，並且文件大小更小：例如使用SVG和Java，PNG序列幀或視頻。因此，除非有很是特殊的緣由必須使用GIF，不然我更建議你們使用PNG或SVG。

SVG

可伸縮矢量圖形（Scalable Vector Graphics）與前面講的柵格格式不一樣，顧名思義，它是矢量格式。這意味着它不會基於像素存儲數據，而是經過記錄座標的形式存儲圖形信息。SVG使用基於XML的語義化標籤結構，這有點像HTML。因爲是DOM結構，你能夠經過ID獲取SVG元素，並操縱它們。這帶來了不少可能性，例如使用Java和CSS修改並對元素進行動畫操做或者建立響應式圖形。

請看這個例子：#1 – 咖啡機 – CSS3製做SVG動畫，做者喬納森·席爾瓦（Jonathan Silva）(@jonathansilva) 發表於 CodePen閱讀原文查看）

就像其它矢量格式，SVG圖片能不丟失任何細節地放大到任何大小。打個比方，同一個圖標，能夠以多種尺寸使用，而且在任何屏幕分辨率（好比Retina顯示器）中都將看起來很清晰，而不須要存成多個文件。

矢量圖片 (右) 可以在保持圖片質量的前提下任意放大

SVG的用途

SVG在線條藝術，LOGO，圖標，插畫和數據可視化方面用途普遍。但它不適用於寫實圖像和有許多細節的複雜圖片。在一些狀況下，SVG和PNG都能很好地達到同一個目的。對於線條藝術，SVG一般能生成較小的文件。可是這不是必然的，實際狀況會根據矢量圖像究竟有多少個錨點，它甚至可能會生成比PNG更大的文件。 SVG真正出色的地方是數據可視化。因爲可使用Java來操縱和建立矢量動畫，諸如D3之類的庫提供了無限的可能性.

LOGO, 圖標和數據可視化是SVG使用的優秀範例。

壓縮SVG

大多數狀況下，使用如SVGz（GZipped SVG）等工具來壓縮在Web網頁中使用的SVG文件是沒必要要的。你能夠（而且應該）在服務器上開啓 Gzip 來實現壓縮功能，雖然可能效果寥寥。比較好的方法應該是經過清除SVG矢量圖形中沒必要要的錨點、元素和屬性來減小文件大小。錨點繪製了矢量圖像，所以，你須要確保已移除的錨點不會影響矢量圖形的最終形狀。若是您使用Adobe Illustrator編輯SVG，請確保使用導出>導出爲...而不是文件>另存爲...進行保存，由於這樣才能生成一個最小化的文件，固然它還有其它優勢。在Sketch裏, 注意不要使用沒必要要的文件夾，由於它們也會做爲額外的標籤保存到SVG中。

清理沒必要要的節點是縮減SVG尺寸的一種途徑。

元素標籤是包含在SVG文件內的全部內容，包括開始和結束標籤。矢量編輯軟件，如Adobe Illustrator和Sketch可能會處處含有非必要元素和屬性的SVG。SVG壓縮器可用於刪除這種多餘的信息。Compressor和SVGOMG等在線工具能夠完成此工做。若是你是開發人員，並且不習慣清理和壓縮SVG，能夠用自動執行工具SVGO，若是你是設計師，能夠與該項目的開發人員談談SVG的優化，經過使用自動化的方式來避免你手動完成優化。

在下面的例子裏，這個從Sketch裏導出的圖標有1364B大小。同一個圖標在清理和壓縮後，就只剩460B — 縮小了66%。

請在 CodePen上看這個例子：來自Sketch的SVG做者布魯諾·穆勒（Bruno Müller）(@brunomuler) 。

優化前：

<?xml version="1.0"encoding="UTF-8"?>

<svg width="20px"height="20px"viewBox="0 0 20 20"version="1.1"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink">

<!--Generator:Sketch 42(36781)-http://www.bohemiancoding.com/sketch -->

<title>ic_shopping_cart_black_24px</title>

<desc>Created withSketch.</desc>

<defs></defs>

<g id="Page-1"stroke="none"stroke-width="1"fill="none"fill-rule="evenodd">

<g id="Artboard"transform="translate(-51.000000, -61.000000)">

<g id="ic_shopping_cart_black_24px"transform="translate(50.000000, 59.000000)">

<g id="Group">

<path d="M7,18 C5.9,18 5.01,18.9 5.01,20 C5.01,21.1 5.9,22 7,22 C8.1,22 9,21.1 9,20 C9,18.9 8.1,18 7,18 Z M1,2 L1,4 L3,4 L6.6,11.59 L5.25,14.04 C5.09,14.32 5,14.65 5,15 C5,16.1 5.9,17 7,17 L19,17 L19,15 L7.42,15 C7.28,15 7.17,14.89 7.17,14.75 L7.2,14.63 L8.1,13 L15.55,13 C16.3,13 16.96,12.59 17.3,11.97 L20.88,5.48 C20.96,5.34 21,5.17 21,5 C21,4.45 20.55,4 20,4 L5.21,4 L4.27,2 L1,2 Z M17,18 C15.9,18 15.01,18.9 15.01,20 C15.01,21.1 15.9,22 17,22 C18.1,22 19,21.1 19,20 C19,18.9 18.1,18 17,18 Z"id="Shape"fill="#000000"fill-rule="nonzero"></path>

<polygon id="Shape"points="0 0 24 0 24 24 0 24"></polygon>

</g>

</g>

</g>

</g>

</svg>

優化後的SVG：

<svg height="24"viewBox="0 0 24 24"width="24"xmlns="http://www.w3.org/2000/svg">

<path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/><path d="M0 0h24v24H0z"fill="none"/>

</svg>