Web 圖片性能優化系列一：背景與基礎

什麼是響應式圖片

組成網站的資源中，圖片每每是網絡負載的主要組成部分，佔據了大部分負載並且隨着時間推移，這個現象仍然會保持。雖然如今的網絡鏈接速度持續改進，可是一樣出現了愈來愈多的高 DPI 分辨率設備，爲了在這些設備上有更好的表現，就須要有更高清晰度的圖片，高清晰的同時就須要更大的文件大小。而由於仍須要支持一些相對非高 DPI 的分辨率設備，就須要有低清晰度的圖片，從而就須要有更好的方案來實現針對不一樣設備提供不一樣的圖片，也就是響應式圖片 (Responsive images)。同時還要遵循 Web 資源的準則，保持性能和表現的平衡，合理地提供圖片資源而不加載不須要使用的多餘的資源。

其實，響應式圖片簡化來看，關鍵就是針對不一樣的設備選取合適的類型和清晰度。

給不一樣的設備提供恰好合適的清晰度分辨率是對性能最優的，太高的清晰度不只意味着更多的傳輸時間還意味着須要縮放渲染時間，太低的清晰度就會讓高 DPI 設備得不到應該有的最優體驗。理論上來講確實是有可能給全部的設備提供恰好合適的清晰度。但設備的分辨率太多了，還存在不一樣的 DPI，因此實踐上目前更合理的方案是選擇一系列的主要適配的設備產生對應的圖片集合，其餘設備就適當的選擇相近的方案圖片進行縮放。

若是設置響應式圖片取決於你是在哪裏進行適配（CSS、HTML、JS）以及用於哪些用途（UI、UX），其中主要出如今 CSS 和 HTML 中，如下主要講解若是選擇合適的圖片類型，以及若是根據清晰度等因素響應式選擇圖片。

Web 圖片的類型

目前，主要支持兩個大類：點陣圖（位圖 bitmap images、柵格圖 raster images）、矢量圖（可縮放矢量圖 SVG）

• 點陣圖根據壓縮的類型又分爲有損和無損的圖片，其中使用普遍的格式主要有 JPEG , PNG, GIF, WebP

• 矢量圖主要有 SVG (可縮放矢量圖 SVG)

Web 有損點陣圖

有損圖片的壓縮算法每每直接從源文件壓縮的過程當中丟棄一部分信息，核心就是想經過圖片質量根據等級設置 1 ~ 100 下降來換取更小的大小。

最經常使用的有損圖片就是 JPEG ，好比：數碼相機拍照的時候存儲成無損格式，但當下載到電腦的時候，經過有損壓縮算法轉換成 JPEG 格式的圖片。

JPEG 支持24位真彩色，可是不支持透明，因此常常用於相似照片、不透明的圖片等方面。它的缺點也很明顯，極致有損的壓縮會致使顯示效果有明顯的不一樣，特別容易受到二次壓縮的時候的影響，便是從一個已經壓縮的文件中進行有損壓縮的時候效果降低特別明顯。但正常來講，注意選擇合適的壓縮等級，效果降低每每就不會被注意到，同時大小降低百分之幾十。

更出色的有損圖片： WebP，但 WebP 並非全部瀏覽器都支持的，因此須要實現對不支持瀏覽器的回退到顯示 JPEG 或者 PNG格式

Web 無損點陣圖

無損圖片的壓縮算法則正好相反，不會丟棄源文件中的信息。在 Web 中當圖片質量很是關鍵的時候，無損圖片正好合適，例如網站的 icon。

無損圖片根據色值存儲的位數又分爲 8位圖（8-bit images - 256-color）、真彩色圖（Full-color images - 16.7-million-colors）

其中，無損的8位圖 有表明如：png、gif，其中 gif 支持動畫，他們都很適合對圖片質量有要求，可是自己不須要全色和多變的透明色。

PS: 雖然 gif 只支持 8位圖，可是動圖能夠根據一些 hack 來實現更清晰的視覺表現，參考 知乎網址

其次，無損真彩色圖的表明如：全色的 PNG (24-bit png)，無損的 WebP，其中全色的 PNG 支持的色值會比 WebP 更普遍。另外注意的是，當你不須要透明色且對質量要求不是特別高的時候，應優先考慮選擇 有損 WebP 或者 JPEG 而不是全色 PNG。

無損圖很合適藝術圖片、肖像研究、攝影等。選用8位圖仍是真彩色圖須要經驗，基礎規則就是隻使用簡單顏色的圖片使用8位圖格式，當不僅是使用簡單顏色或者須要所有透明色支持的圖片就選用全綵色圖。

Web 特殊的格式 WebP

從互聯網早起以來，柵格圖格式只有 JPEG，GIF，PNG，爲了更優化 Web 圖片的加載速度和性能，谷歌（google）開發了全新的圖片格式 WebP。圖片壓縮體積大約只有 JPEG 的2/3，並能節省大量的服務器帶寬資源和數據空間，在壓縮方面比 JPEG 和 PNG 的效果更優。

雖然截至目前已經有不少瀏覽器支持了 WebP ，好比 Chrome (谷歌瀏覽器) 、國內的 QQ瀏覽器、UC 瀏覽器等 Webkit內核的瀏覽器都支持這種格式，可是一樣有一些如 IE系列、Firefox系列的瀏覽器佔比較高的主流瀏覽器對 WebP 不支持，因此使用 WebP 的時候必定要實現相應的回退策略（訂閱本系列教程，我會繼續講解如何更方便地解決這個問題）。

WebP 有着比 JPEG 和 PNG 更優的壓縮效果，有損 WebP 支持透明度也是 JPEG 作不到的，雖然沒有 PNG 色度值多，可是除非是在某些對色值有精度要求的網站圖片，大部分場景開發者都會優先選擇支持 WebP。

另一方面，WebP 是支持動畫的，並且壓縮和表現效果比 GIF 更優，但由於很差統計以及判斷瀏覽器對動畫 WebP 是否支持，因此很差控制回退，除非你對這種佔比較小的瀏覽器（支持 WebP 可是不支持動畫 WebP）用戶不考慮，建議不要使用 WebP 替代 GIF 。

Web 矢量圖 SVG

矢量圖 SVG 使用向量矩陣來存儲幾何圖形以及比例實現支持任何尺寸的縮放，能夠看到如下圖片的例子，放大幾倍後的 svg 質量依然很完美，這就是 SVG 對比點陣圖的最大優勢。

不過如今的設備都是以像素爲基礎單位的，因此全部顯示輸出最後都是被轉化爲像素。這就能明顯標識矢量圖想要顯示在這些設備上就要經受一個叫柵格化的過程，每當圖片的尺寸有變化、縮放都要通過這個計算柵格化過程，從而保證了每次顯示的圖片質量。

若是你熟悉建立向量矩陣，你應該熟悉注入 AI 之類的設計軟件。即便這些軟件的支持的本地文件格式是二進制，SVG 的格式是 XML（文本類型），它根節點標識了它的媒體類型 image/svg+xml 。這個特性使它能夠在文本編輯器中直接修改，或者內聯到 HTML 中，甚至能夠直接在 SVG 中使用 CSS 和 media queries (媒體查詢)。

雖然從 1999 年的 W3C 標準中就已經將 SVG 歸入了，但真正被網站使用就是在最近這幾年。由於對於不一樣分辨率設備以及顯示屏的顯示無暇讓它倍受歡迎。

固然啦，SVG 並非全能的，優點也主要限制在如下幾個方面，例如：呈現 Logo 、圖標、線形藝術等。另外一方面，那些固定色塊由幾何圖形組成的圖片也很適合。

如何選擇

經過上面的大體介紹每種圖片格式的使用場景，掌握一個場景選擇哪些圖片格式最適合顯得尤其重要，這裏整理了一些經常使用的注意點以及經驗來劃分圖片格式的選擇，你能夠依照表格根據要提供的內容來選擇最合適的圖片格式。

圖片格式	支持顏色	圖片類型	壓縮類型	合適場景
PNG	全色	柵格圖	無損	質量缺失不可接受的狀況，亦或是展現內容須要徹底的透明度或者全色。適用於任何一種圖片格式，但不像適用於照片的 JPEG 壓縮度那麼高
PNG (8)	256	柵格圖	無損	內容不須要全色或者只須要簡單 1 位透明度支持的，好比圖標、像素陣列
GIF	256	柵格圖	無損	沒有 PNG (8) 壓縮度高，其餘同樣，但支持動畫，也主要用於動畫
JPEG	全色	柵格圖	有損	內容須要全色，或者沒有使用透明度，並且能夠接受質量的丟失。好比照片
SVG	全色	矢量圖	無壓縮	內容支持全色並且要支持縮放的時候質量不變。特別適合線形藝術、幾何圖形、其餘非照片類型的內容，不須要特別處理就優化了多分辨率顯示的效果
WebP(有損)	全色	柵格圖	有損	其餘方面跟 JPEG 同樣，但更好的是支持透明度以及壓縮性能以及效果
WebP(無損)	全色	柵格圖	無損	其餘方面跟全色 PNG 同樣，但有更好的壓縮性能

最新系列教程，能夠關注個人博客 https://biaomingzhong.github.io/