摘要：比如照片全色矢量圖無壓縮內(nèi)容支持全色而且要支持縮放的時(shí)候質(zhì)量不變。

組成網(wǎng)站的資源中，圖片往往是網(wǎng)絡(luò)負(fù)載的主要組成部分，占據(jù)了大部分負(fù)載而且隨著時(shí)間推移，這個(gè)現(xiàn)象仍然會(huì)保持。雖然現(xiàn)在的網(wǎng)絡(luò)連接速度持續(xù)改進(jìn)，但是同樣出現(xiàn)了越來越多的高 DPI 分辨率設(shè)備，為了在這些設(shè)備上有更好的表現(xiàn)，就需要有更高清晰度的圖片，高清晰的同時(shí)就需要更大的文件大小。而因?yàn)槿孕枰С忠恍┫鄬?duì)非高 DPI 的分辨率設(shè)備，就需要有低清晰度的圖片，從而就需要有更好的方案來實(shí)現(xiàn)針對(duì)不同設(shè)備提供不同的圖片，也就是響應(yīng)式圖片 (Responsive images)。同時(shí)還要遵循 Web 資源的準(zhǔn)則，保持性能和表現(xiàn)的平衡，合理地提供圖片資源而不加載不需要使用的多余的資源。

其實(shí)，響應(yīng)式圖片簡(jiǎn)化來看，關(guān)鍵就是針對(duì)不同的設(shè)備選取合適的類型和清晰度。

給不同的設(shè)備提供剛好合適的清晰度分辨率是對(duì)性能最優(yōu)的，過高的清晰度不僅意味著更多的傳輸時(shí)間還意味著需要縮放渲染時(shí)間，過低的清晰度就會(huì)讓高 DPI 設(shè)備得不到應(yīng)該有的最優(yōu)體驗(yàn)。理論上來說確實(shí)是有可能給所有的設(shè)備提供剛好合適的清晰度。但設(shè)備的分辨率太多了，還存在不同的 DPI，所以實(shí)踐上目前更合理的方案是選擇一系列的主要適配的設(shè)備產(chǎn)生對(duì)應(yīng)的圖片集合，其他設(shè)備就適當(dāng)?shù)倪x擇相近的方案圖片進(jìn)行縮放。

如果設(shè)置響應(yīng)式圖片取決于你是在哪里進(jìn)行適配（CSS、HTML、JS）以及用于哪些用途（UI、UX），其中主要出現(xiàn)在 CSS 和 HTML 中，以下主要講解如果選擇合適的圖片類型，以及如果根據(jù)清晰度等因素響應(yīng)式選擇圖片。

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

點(diǎn)陣圖根據(jù)壓縮的類型又分為有損和無損的圖片，其中使用廣泛的格式主要有 JPEG , PNG, GIF, WebP

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

有損圖片的壓縮算法往往直接從源文件壓縮的過程中丟棄一部分信息，核心就是想通過圖片質(zhì)量根據(jù)等級(jí)設(shè)置 1 ~ 100 降低來換取更小的大小。

最常用的有損圖片就是 JPEG ，比如：數(shù)碼相機(jī)拍照的時(shí)候存儲(chǔ)成無損格式，但當(dāng)下載到電腦的時(shí)候，通過有損壓縮算法轉(zhuǎn)換成 JPEG 格式的圖片。

JPEG 支持24位真彩色，但是不支持透明，所以經(jīng)常用于類似照片、不透明的圖片等方面。它的缺點(diǎn)也很明顯，極致有損的壓縮會(huì)導(dǎo)致顯示效果有明顯的不同，特別容易受到二次壓縮的時(shí)候的影響，即是從一個(gè)已經(jīng)壓縮的文件中進(jìn)行有損壓縮的時(shí)候效果下降特別明顯。但正常來說，注意選擇合適的壓縮等級(jí)，效果下降往往就不會(huì)被注意到，同時(shí)大小下降百分之幾十。

更出色的有損圖片： WebP，但 WebP 并不是所有瀏覽器都支持的，所以需要實(shí)現(xiàn)對(duì)不支持瀏覽器的回退到顯示 JPEG 或者 PNG格式

無損圖片的壓縮算法則正好相反，不會(huì)丟棄源文件中的信息。在 Web 中當(dāng)圖片質(zhì)量非常關(guān)鍵的時(shí)候，無損圖片正好合適，例如網(wǎng)站的 icon。

無損圖片根據(jù)色值存儲(chǔ)的位數(shù)又分為 8位圖（8-bit images - 256-color）、真彩色圖（Full-color images - 16.7-million-colors）

其中，無損的8位圖 有代表如：png、gif，其中 gif 支持動(dòng)畫，他們都很適合對(duì)圖片質(zhì)量有要求，但是本身不需要全色和多變的透明色。

PS: 雖然 gif 只支持 8位圖，但是動(dòng)圖可以根據(jù)一些 hack 來實(shí)現(xiàn)更清晰的視覺表現(xiàn)，參考 知乎網(wǎng)址

其次，無損真彩色圖的代表如：全色的 PNG (24-bit png)，無損的 WebP，其中全色的 PNG 支持的色值會(huì)比 WebP 更廣泛。另外注意的是，當(dāng)你不需要透明色且對(duì)質(zhì)量要求不是特別高的時(shí)候，應(yīng)優(yōu)先考慮選擇 有損 WebP 或者 JPEG 而不是全色 PNG。

無損圖很合適藝術(shù)圖片、肖像研究、攝影等。選用8位圖還是真彩色圖需要經(jīng)驗(yàn)，基礎(chǔ)規(guī)則就是只使用簡(jiǎn)單顏色的圖片使用8位圖格式，當(dāng)不只是使用簡(jiǎn)單顏色或者需要全部透明色支持的圖片就選用全彩色圖。

從互聯(lián)網(wǎng)早起以來，柵格圖格式只有 JPEG，GIF，PNG，為了更優(yōu)化 Web 圖片的加載速度和性能，谷歌（google）開發(fā)了全新的圖片格式 WebP。圖片壓縮體積大約只有 JPEG 的2/3，并能節(jié)省大量的服務(wù)器帶寬資源和數(shù)據(jù)空間，在壓縮方面比 JPEG 和 PNG 的效果更優(yōu)。

雖然截至目前已經(jīng)有很多瀏覽器支持了 WebP ，比如 Chrome (谷歌瀏覽器) 、國(guó)內(nèi)的 QQ瀏覽器、UC 瀏覽器等 Webkit內(nèi)核的瀏覽器都支持這種格式，但是同樣有一些如 IE系列、Firefox系列的瀏覽器占比較高的主流瀏覽器對(duì) WebP 不支持，所以使用 WebP 的時(shí)候一定要實(shí)現(xiàn)相應(yīng)的回退策略（訂閱本系列教程，我會(huì)繼續(xù)講解如何更方便地解決這個(gè)問題）。

WebP 有著比 JPEG 和 PNG 更優(yōu)的壓縮效果，有損 WebP 支持透明度也是 JPEG 做不到的，雖然沒有 PNG 色度值多，但是除非是在某些對(duì)色值有精度要求的網(wǎng)站圖片，大部分場(chǎng)景開發(fā)者都會(huì)優(yōu)先選擇支持 WebP。

另外一方面，WebP 是支持動(dòng)畫的，而且壓縮和表現(xiàn)效果比 GIF 更優(yōu)，但因?yàn)椴缓媒y(tǒng)計(jì)以及判斷瀏覽器對(duì)動(dòng)畫 WebP 是否支持，所以不好控制回退，除非你對(duì)這種占比較小的瀏覽器（支持 WebP 但是不支持動(dòng)畫 WebP）用戶不考慮，建議不要使用 WebP 替代 GIF 。

矢量圖 SVG 使用向量矩陣來存儲(chǔ)幾何圖形以及比例實(shí)現(xiàn)支持任何尺寸的縮放，可以看到以下圖片的例子，放大幾倍后的 svg 質(zhì)量依然很完美，這就是 SVG 對(duì)比點(diǎn)陣圖的最大優(yōu)點(diǎn)。

不過現(xiàn)在的設(shè)備都是以像素為基礎(chǔ)單位的，所以所有顯示輸出最后都是被轉(zhuǎn)化為像素。這就能明顯標(biāo)識(shí)矢量圖想要顯示在這些設(shè)備上就要經(jīng)受一個(gè)叫柵格化的過程，每當(dāng)圖片的尺寸有變化、縮放都要經(jīng)過這個(gè)計(jì)算柵格化過程，從而保證了每次顯示的圖片質(zhì)量。

如果你熟悉創(chuàng)建向量矩陣，你應(yīng)該熟悉注入 AI 之類的設(shè)計(jì)軟件。即使這些軟件的支持的本地文件格式是二進(jìn)制，SVG 的格式是 XML（文本類型），它根節(jié)點(diǎn)標(biāo)識(shí)了它的媒體類型 image/svg+xml 。這個(gè)特性使它可以在文本編輯器中直接修改，或者內(nèi)聯(lián)到 HTML 中，甚至可以直接在 SVG 中使用 CSS 和 media queries (媒體查詢)。

雖然從 1999 年的 W3C 標(biāo)準(zhǔn)中就已經(jīng)將 SVG 納入了，但真正被網(wǎng)站使用就是在最近這幾年。因?yàn)閷?duì)于不同分辨率設(shè)備以及顯示屏的顯示無暇讓它倍受歡迎。

當(dāng)然啦，SVG 并不是全能的，優(yōu)勢(shì)也主要限制在以下幾個(gè)方面，例如：呈現(xiàn) Logo 、圖標(biāo)、線形藝術(shù)等。另一方面，那些固定色塊由幾何圖形組成的圖片也很適合。

通過上面的大致介紹每種圖片格式的使用場(chǎng)景，掌握一個(gè)場(chǎng)景選擇哪些圖片格式最適合顯得尤為重要，這里整理了一些常用的注意點(diǎn)以及經(jīng)驗(yàn)來劃分圖片格式的選擇，你可以依照表格根據(jù)要提供的內(nèi)容來選擇最合適的圖片格式。

最新系列教程，可以關(guān)注我的博客 https://biaomingzhong.github.io/