前言
在互聯(lián)網(wǎng)快速發(fā)展，熱火朝天的當下吴趴，無論是PC端漆诽，還是移動端侮攀，圖片都是必不可少的元素。好的圖片能讓我們的應用熠熠生輝厢拭。同時用戶體驗也是至關重要兰英，我們在保證圖片質量的同時，還要考慮應用的性能供鸠，正確的圖片格式能為我們的應用帶來好的性能畦贸，反之則不然。那么面對那么多的圖片格式（JPEG楞捂，png薄坏，gif，svg寨闹，webp）胶坠，我們應該如何選擇呢？
一繁堡、JPEG
JEPG由聯(lián)合圖像專家小組（Joint Photographic Experts Group）于1992年創(chuàng)建沈善，并以創(chuàng)建者命名。JPEG是一種有損光柵圖像格式椭蹄，這意味著每次壓縮保存JPEG時闻牡，一些信息將發(fā)生不可逆轉地丟失。
JPEG利用人眼感知的缺陷 對亮度比對顏色更敏感 使用了一種壓縮算法來丟棄我們不太擅長獲取的信息绳矩，因此屬于有損格式罩润。壓縮率的設置將決定最終保存文件的大小和質量。
1.用途
因為JPEG適用于亮度和色彩壓縮翼馆，所以在照片割以，以及其他寫實或者帶陰影的圖像（如繪畫和3D渲染）上使用效果良好。這就是為什么它是多年來最流行的存儲圖片的格式写妥。出于同樣的原因拳球，JPEG不適宜用在矢量圖片，如徽標珍特，幾何圖形祝峻，截圖等方面。
2.壓縮
作為有損格式扎筒，JPEG文件的壓縮率與最終圖像質量呈反比莱找。在像Photoshop這樣的工具中保存JPEG時，你會看到一個從0到100的質量設置嗜桌。Photoshop設置了一些圖像質量范圍：
| 圖像質量 | 壓縮百分比 |
|---|---|
| 低 | 10% |
| 中 | 30% |
| 高 | 60% |
| 非常高 | 80% |
| 最佳 | 100% |
Web頁面上建議使用在50％到60％質量之間的JPEG奥溺，因為它能兼顧不錯的圖像質量和較小的文件尺寸。刪除元數(shù)據(jù)也可以減少JPEG文件體積骨宠。
壓縮工具：
- 在線：TinyJPEG
- Mac上 ImageOptim
- Windows上 RIOT
二浮定、PNG
可移植網(wǎng)絡圖形（Portable Network Graphics）相满，是一種自1995年以來就一直存在的光柵圖像格式。它與JPEG不同桦卒，因為它是一種無損格式立美，并且是目前網(wǎng)絡上最常見的無損格式。這意味著由于它的壓縮算法方灾，當文件被保存和壓縮時建蹄，不會丟失任何信息。
1.特性
- 透明通道 - 意味著每個像素可以具有不同的透明度;
- 8位文件可以使用基于調色板的顏色模型（也稱為索引顏色） - 這意味著如果減少顏色數(shù)量裕偿，文件可能更小;
- 依據(jù)libPNG的說法洞慎，PNG壓縮效率比GIF高25％;
- 二維隔行掃描 - 圖像會在加載過程中漸進顯示，而不是只有當圖像完全加載時才顯示嘿棘。你必須謹慎使用此選項劲腿，因為它會增加文件大小。
2.用途
PNG對于線條圖蔫巩，LOGO谆棱，圖標和顏色較少的圖像非常適合快压。顏色復雜的照片和圖像使用PNG格式將生成巨大的文件圆仔。PNG另一個優(yōu)點是支持透明背景。對于需要透明背景支持的情況蔫劣，即使是復雜的圖片仍然需要使用PNG坪郭，因為JPEG中無法實現(xiàn)圖片透明。
3.壓縮
因為PNG中的壓縮算法是無損的脉幢，你可以選擇性地減少它的顏色歪沃，從而通過外部工具減小圖片尺寸。
壓縮工具：
- Pngquant
- Pngyu
- ImageAlpha
- TinyPNG
三嫌松、GIF
圖形交換格式（Graphics Interchange Format）也是一種位圖格式沪曙。GIF與PNG具有類似的特性，但有自己的一些缺點：
- 僅支持256種顏色;
- 一維隔行交錯 — 圖像會漸進顯示萎羔，但不夠平滑;
- 與PNG相比壓縮性能差;
- 二進制透明度 - 像素只能是100％透明或100％可見;
- 有歧義的發(fā)音
GIF因動畫而出名并被廣泛使用液走。但是，現(xiàn)在即使是動畫也可以通過其它的方式完成贾陷，而且文件大小更小缘眶。例如使用SVG和Javascript，PNG序列幀或視頻也可以更好的實現(xiàn)動畫髓废。所以巷懈，除非有非常特殊的原因必須使用GIF，否則建議大家使用大眾化的PNG或SVG慌洪。
四顶燕、SVG
可伸縮矢量圖形（Scalable Vector Graphics）是矢量格式凑保。這意味著它不會基于像素存儲數(shù)據(jù)，而是通過記錄坐標的形式存儲圖形信息涌攻。SVG使用基于XML的語義化標簽結構愉适，這有點像HTML。由于是DOM結構癣漆，你可以通過ID獲取SVG元素维咸，并操縱它們。
SVG圖片能不丟失任何細節(jié)地放大到任何大小惠爽。打個比方癌蓖，同一個圖標，可以以多種尺寸使用婚肆，并且在任何屏幕分辨率（比如Retina顯示器）中都將看起來很清晰租副，而不需要存成多個文件。
1.用途
SVG在線條藝術较性，LOGO用僧，圖標，插畫和數(shù)據(jù)可視化方面用途廣泛赞咙。但它不適用于寫實圖像和有許多細節(jié)的復雜圖片责循。在一些情況下，SVG和PNG都能很好地達到同一個目的攀操。對于線條藝術院仿，SVG通常能生成較小的文件。
但是這不是必然的速和，實際情況會根據(jù)矢量圖像究竟有多少個錨點歹垫，它甚至可能會生成比PNG更大的文件。 SVG真正出色的地方是數(shù)據(jù)可視化颠放。由于可以使用JavaScript來操縱和創(chuàng)建矢量動畫排惨，諸如D3之類的庫提供了無限的可能性.
2. 壓縮
關于SVG的壓縮，比較好的方法應該是通過清除SVG矢量圖形中不必要的錨點碰凶、元素和屬性來減少文件大小暮芭。錨點繪制了矢量圖像，因此痒留，你需要確保已移除的錨點不會影響矢量圖形的最終形狀谴麦。
元素標簽是包含在SVG文件內的所有內容，包括開始和結束標簽伸头。矢量編輯軟件匾效，如Adobe Illustrator和Sketch可能會到處含有非必要元素和屬性的SVG。SVG壓縮器可用于刪除這種多余的信息恤磷。
壓縮工具：
- Compressor
- SVGOMG
- SVGO
五面哼、WebP
WebP（發(fā)音 weppy）野宜，是一種支持有損壓縮和無損壓縮的圖片文件格式，派生自圖像編碼格式 VP8魔策。
1.WebP的優(yōu)勢
- PNG 轉 WebP 的壓縮率要高于 PNG 原圖壓縮率匈子，同樣支持有損與無損壓縮
- 轉換后的 WebP 體積大幅減少，圖片質量也得到保障（同時肉眼幾乎無法看出差異）
- 轉換后的 WebP 支持 Alpha 透明和 24-bit 顏色數(shù)闯袒，不存在 PNG8 色彩不夠豐富和在瀏覽器中可能會出現(xiàn)毛邊的問題
WebP 的優(yōu)勢體現(xiàn)在它具有更優(yōu)的圖像數(shù)據(jù)壓縮算法虎敦，能帶來更小的圖片體積，而且擁有肉眼識別無差異的圖像質量政敢；同時具備了無損和有損的壓縮模式其徙、Alpha 透明以及動畫的特性，在 JPEG 和 PNG 上的轉化效果都非常優(yōu)秀喷户、穩(wěn)定和統(tǒng)一唾那。
2.兼容性 & 可用性
根據(jù)對目前國內瀏覽器占比與 WebP 的兼容性分析，大約有 50% 以上的國內用戶可以直接體驗到 WebP褪尝，如果你的網(wǎng)站以圖片為主闹获，或者你的產(chǎn)品基于 Chromium 內核，建議體驗嘗試河哑。假如你打算在 App 中使用 WebP避诽，除了 Android4.0 以上提供的原生支持外，其他版本以及 iOS 都可以直接使用官方提供的解析庫灾馒。
WebP 除了在解碼時間與 PNG 有較明顯差異（毫秒級別）之外茎用，總體（流暢程度遣总、CPU使用睬罗，內存占用）使用體驗和 PNG 基本無差異。同時也需要明確旭斥，移動設備的發(fā)展迅猛容达，硬件升級快，上一年的表現(xiàn)也許在今年又有了明顯的提升垂券。所以花盐，在 App 中使用 WebP 基本沒有技術阻礙。
3.Animated WebP
Animated WebP的優(yōu)勢：
- 支持有損和無損壓縮菇爪，并且可以合并有損和無損圖片幀
- 體積更小算芯，GIF 轉成有損 Animated WebP 后可以減小 64% 的體積，轉成無損可以節(jié)省 19% 的體積
- 顏色更豐富凳宙，支持 24-bit 的 RGB 顏色以及 8-bit 的 Alpha 透明通道（而 GIF 只支持 8-bit RGB 顏色以及 1-bit 的透明）
- 添加了關鍵幀熙揍、metadata 等數(shù)據(jù)
Animated WebP存在的問題：
- 消耗較多的 CPU 和解碼時間（多 1.5~2.2 倍）
- 和 GIF 相比起來支持度還不夠，目前仍無法通用
- 為了支持 Animated WebP氏涩，Chrome 的新內核 Blink 添加了近 1500 行的代碼
總結
根據(jù)以上各種圖片格式的優(yōu)缺點對比届囚，我們可以根據(jù)應用場景有梆，選擇適合我們的圖片格式。對于從網(wǎng)絡加載的圖片意系，無論是PC泥耀，還是移動端，建議采用Webp格式蛔添。
