本文內容來自《前端性能優化原理與實踐》掘金小冊，本人通過整理，製成表格，供大家方便參照理解。
| 圖片優化——質量與性能的權衡 | ||||||||||||||||
| 前言：就前端性能優化而言，圖片優化可謂是其必不可少的環節。但是與其說是在做優化，不如說是在做“權衡”，因爲就前端而言，就是去壓縮圖片體積或是一開始就選取體積較小的圖片格式。而這種操作，是以犧牲一部分成像質量爲代價的。因此我們的主要任務，是儘可能的去尋求一個質量與性能之間的平衡點，並在不同業務場景下做好圖片方案的選型工作。 | ||||||||||||||||
| 前置知識： 一、二進制位數與色彩的關係。 在計算機中，像素用二進制樹來表示。不同的圖片格式中像素與二進制位數之間的對應關係是不同的。一個像素對用的二進制位數越多，它可以表示的顏色種類就越多，成像效果越久越細膩，文件體積也會越大。 一個二進制位表示兩種顏色（0|1對應黑|白），如果一種圖片格式對應的二進制位數有n個，那麼它就可以呈現2^n中顏色 二、經典的小圖標解決方案——雪碧圖（CSS Sprites） 一種將小圖標和背景圖像合併到一張圖片上，然後利用CSS的背景定位來顯示其中的每一部分的技術（其被運用於衆多使用大量小圖標的網頁應用智商。其可取圖像的一部分來使用，使得使用一個圖像文件替換多個小文件成爲可能，相較於一個小圖標一個圖像文件，單獨一張圖片所需的HTTP請求更少，對內存和寬帶更加友好） |
||||||||||||||||
| 圖片格式 | 介紹/關鍵字 | 優點 | 缺點 | 兼容性 | 使用場景 | 處理方案 | ||||||||||
| JPEG/JPG | 有損壓縮、體積小、加載快、不支持透明 | 其最大的特點就是有損壓縮。這種壓縮算法使其成爲了一種非常輕巧的圖片格式。另一方面，即使被稱爲“有損壓縮”，JPG的壓縮仍然是一種高質量的壓縮方式：當我們把圖片體積壓縮至原有體積的50%以下時，JPG仍可以保持住60%的品質。此外，JPG格式以24位存儲單個圖，可以呈現多達1600萬種顏色，足以應對大多數場景下對色彩的要求，這一點決定了它壓縮前後的質量損耗。 | 1、有損壓縮在展示輪播圖時確實很難露出馬腳，但當他處理矢量圖形和logo等線條感較強，顏色對比強烈的圖象時，人爲壓縮導致的圖片模糊會相當明顯。2、此外JPEG圖像不支持透明度處理 | JPG適用於呈現色彩豐富的圖片，在日常開發中，JPG圖片經常作爲大的背景圖、輪播圖或banner圖出現 | ||||||||||||
| PNG | PNG-8 | 無損壓縮、質量高、體積大、支持透明 | PNG（可以移植網絡圖形格式）是一種無損壓縮的高保證的圖片格式。8和24，這都表示二進制的位數。按照我們前置知識中提到的對應關係，8位的PNG最多支持256種顏色，而24位的可以呈現約1600萬種顏色。 PNG圖片具有比JPG更強的色彩表現力，對線條的處理更加細膩，對透明度有良好的支持。他彌補了JPG的侷限性 |
在實際開發中，一般不用PNG處理較複雜的圖像。當遇到適合PNG的場景時，會優先選擇PNG-8 | 體積太大 | LOGO、顏色簡單且對比強烈的圖片或背景等 | 如何確定一張圖片是用PNG-8還是PNG-24去呈現，好的做法是按照兩種格式分別輸出，敲定PNG-8輸出的結果是否會帶來肉眼可見的質量損耗，並確定這種損耗是否在我們的接收範圍之內，基於對比的結果進行判斷 | |||||||||
| PNG-24 | 在追求最佳顯示效果且不在意文件體積大小時，推薦適用PNG-24 | |||||||||||||||
| SVG | SVG（可縮放矢量圖形）是一種基於XML語法的圖相格式。他和其它集中圖像種類有着本質的不同：SVG對圖像的處理不是基於像素點，而是基於對圖像的形狀描述 | 文本文件、體積小、不失真、兼容性好 | 1、SVG與PNG和JPG相比，文件體積更小，可壓縮性更強。 2、其顯著優點在於圖片可無限放大而不失真，這使得SVG圖即時被放到視網膜屏幕上，也可以展現出較好得成像品質，一張SVG足以適配n種分辨率。 3、SVG是文本文件。我們既可以像寫代碼一樣定義SVG將其寫入HTML中，成爲DOM的一部分，也可以把對圖形的描述寫入以.svg爲後綴的獨立文件（SVG文件在適用上與普通圖片文件無異）。這使其可以被很多工具讀取和修改，具有較強的靈活性 |
1、其渲染成本較高，這點對性能而言很有問題。 2、SVG存在着其它格式所沒有的學習成本（其是可編程的） |
適用矢量圖標庫進行引用。即適用引入SVG獨立文件進行引用 | |||||||||||
| Base64 | 其本質並非一種圖片格式，而是一種編碼方式。其是一種用於傳輸8bit字節碼的編碼方式，通過對Base64編碼，可以直接將編碼結果寫入HTML或CSS | 文本文件、依賴編碼、小圖標解決方案 | 1、減少加載網頁圖片時對服務器的請求次數，從而提升網頁性能 | 1、爲何不將大圖也替換成Base64 Base64編碼後，圖片大小會膨脹爲原文件的4/3（其是由Base64的編碼原理決定的）。 |
其可以作爲雪碧圖的補充而存在 | 1、圖片實際尺寸很小，推薦不超過2KB的 2、圖片無法以雪碧圖的形式與其它小圖結合（合成雪碧圖仍是主要的減少HTTP請求的途徑，Base是雪碧圖的補充） 3、圖片的更新頻率非常低（不需要我們重複編碼和修改文件內容，維護成本低） |
||||||||||
| webP | 與其它圖片格式對比，其最年輕，其是Goole轉爲web開發的一種旨在加快圖片加載速度的圖片格式，其支持有損壓縮和無損壓縮 | 年輕的全能型選手 | 1、webP可以像JPEG一樣對細節豐富的圖片信手拈來，也可以向PNG一樣支持透明，可以向GIF一樣顯示動態圖片，其集多種圖片的文件格式優點於一身。 2、其與PNG相比，無損圖像尺寸縮小26%，在等效的SSIM質量指數下，與同類JPEG圖像小25%~34% |
太過年輕 | 極差（但可被chrome支持） | 不需要考慮是否適合使用webP，而需要考慮瀏覽器是否支持webP。一旦選擇webP需要準備降級方案 | 類似於淘寶網的處理方式： 方案一： 1、在.webp前跟上一個.jpg後綴 2、在瀏覽器環境支持webP的情況下，優先使用webP，否則九八圖片降級爲JPG格式（其本質是對圖片的鏈接地址做簡單的字符串切割）。 方案二： 將判斷工作交給後端，由服務器根據HTTP請求頭部的Accept字段來決定返回什麼格式的圖片。當Accept包含image/webp時，就返回webP格式圖片，否則就返回原圖。 |
|||||||||