在網頁上使用 JPG 、PNG 、 SVG
JPEG
JEPG由聯合影象專家小組（Joint Photographic Experts Group）於1992年建立，並以建立者命名。JPEG是一種有損光柵影象格式，這意味著每次壓縮儲存JPEG時，一些資訊
將發生不可逆轉地丟失。
JPEG利用人眼感知的缺陷 - 對亮度比對顏色更敏感 - 使用了一種壓縮演算法來丟棄我們不太擅長獲取的資訊，因此屬於“有損格式”。壓縮率的設定將決定最終儲存檔案的大小和質
量。
JPEG的用途
因為JPEG適用於亮度和色彩壓縮，所以在照片，以及其他寫實或者帶陰影的影象（如繪畫和3D渲染）上使用效果良好。這就是為什麼它是多年來最流行的儲存圖片的格式。出於同樣的原因，JPEG不適宜用在向量圖片，如徽標，幾何圖形，截圖等方面。
照片，以及繪畫等複雜的或帶陰影的影象，是使用JPEG的很好的例子。
壓縮JPEG
作為有損格式，JPEG檔案的壓縮率與最終影象質量呈反比。在像Photoshop這樣的工具中儲存JPEG時，你會看到一個從0到100的質量設定。Photoshop設定了一些影象質量範
圍：
最佳 100% (61 KB), 非常高 80% (29 KB).
高 60% (16 KB), 中 80% (7 KB).
低 100% (6 KB), 最低 0% (3 KB).
Web頁面上建議使用在50％到60％質量之間的JPEG，因為它能兼顧不錯的影象質量和較小的檔案尺寸。刪除元資料也可以減少JPEG檔案體積。
在Photoshop裡，可以通過在“匯出”中選擇“元資料：無”或“儲存為Web所用格式（舊版）”來完成壓縮。對影象整體或者部分進行模糊處理也會產生較小的檔案。
請注意，由於JPEG是有損格式，即使以100％的質量儲存相同的檔案，因為壓縮演算法在同一影象上一次又一次地應用，多次之後也會導致影象質量的降低。但這一變化可能不
會顯示在檔案大小的改變上。
PNG
可移植網路圖形（Portable Network Graphics）也是一種自1995年以來就一直存在的光柵影象格式。它與JPEG不同，因為它是一種無損格式，並且是目前網路上最常見的無損格式。這意味著由於它的壓縮演算法，當檔案被儲存和壓縮時，不會丟失任何資訊。
PNG有很多很酷的特性，如：
- 透明通道 - 意味著每個畫素可以具有不同的透明度;
- 8位檔案可以使用基於調色盤的顏色模型（也稱為索引顏色） - 這意味著如果減少顏色數量，檔案可能更小;
- PNG壓縮效率比GIF高25％
- 二維隔行掃描 — 影象會在載入過程中漸進顯示，而不是隻有當影象完全載入時才顯示。你必須謹慎使用此選項，因為它會增加檔案大小。
PNG的用途
PNG對於線條圖，LOGO，圖示和顏色較少的影象非常適合。顏色複雜的照片和影象使用PNG格式將生成巨大的檔案。PNG另一個優點是支援透明背景。在這種情況下，即使是複雜的圖片仍然需要使用PNG，因為JPEG中無法實現圖片透明。
PNG可以很好地用線上條作品，LOGO和圖示上。
壓縮PNG
因為PNG中的壓縮演算法是無損的，你可以選擇性地減少它的顏色，從而通過外部工具減小圖片尺寸。
對於大多數PNG使用場景（線圖，圖形，圖示），256色是足夠的。因此，可以通過減少調色盤中的顏色數量來進一步減少檔案大小。
GIF
圖形交換格式（Graphics Interchange Format）也是一種點陣圖格式，並且比本文中提到的其它格式都出現地更早。它於1989年由Steve Wilhite建立, 在PNG建立前都是最流行的8點陣圖像格式。GIF與PNG具有類似的特性，但有一些缺點：
- 僅支援256種顏色;
- 一維隔行交錯 — 影象會漸進顯示，但不夠平滑;
- 與PNG相比壓縮效能差
- 二進位制透明度 - 畫素只能是100％透明或100％可見;
- 有歧義的發音
SVG
可伸縮向量圖形（Scalable Vector Graphics）與前面講的柵格格式不同，顧名思義，它是向量格式。這意味著它不會基於畫素儲存資料，而是通過記錄座標的形式儲存圖形信息。SVG使用基於XML的語義化標籤結構，這有點像HTML。由於是DOM結構，你可以通過ID獲取SVG元素，並操縱它們。這帶來了很多可能性，例如使用JavaScript和CSS
修改並對元素進行動畫操作或者建立響應式圖形。
就像其它向量格式，SVG圖片能不丟失任何細節地放大到任何大小。
SVG的用途
SVG線上條藝術，LOGO，圖示，插畫和資料視覺化方面用途廣泛。但它不適用於寫實影象和有許多細節的複雜圖片。在一些情況下，SVG和PNG都能很好地達到同一個目
的。對於線條藝術，SVG通常能生成較小的檔案。但是這不是必然的，實際情況會根據向量影象究竟有多少個錨點，它甚至可能會生成比PNG更大的檔案。 SVG真正出色的地
方是資料視覺化。由於可以使用JavaScript來操縱和建立向量動畫，諸如D3之類的庫提供了無限的可能性.
壓縮SVG
大多數情況下，使用如SVGz（GZipped SVG）等工具來壓縮在Web網頁中使用的SVG檔案是不必要的。你可以（並且應該）在伺服器上開啟 Gzip 來實現壓縮功能，雖然可能
效果寥寥。比較好的方法應該是通過清除SVG向量圖形中不必要的錨點、元素和屬性來減少檔案大小。錨點繪製了向量影象，因此，你需要確保已移除的錨點不會影響向量圖
形的最終形狀。如果您使用Adobe Illustrator編輯SVG，請確保使用匯出>匯出為...而不是檔案>另存為...進行儲存，因為這樣才能生成一個最小化的檔案，當然它還有其它優
點。在Sketch裡, 注意不要使用不必要的資料夾，因為它們也會作為額外的標籤儲存到SVG中。
清理不必要的節點是縮減SVG尺寸的一種途徑。
元素標籤是包含在SVG檔案內的所有內容，包括開始和結束標籤。向量編輯軟體，如Adobe Illustrator和Sketch可能會到處含有非必要元素和屬性的SVG。SVG壓縮器可用於刪
除這種多餘的資訊。