[[258852]]

這是 Web 性能優(yōu)化的第二篇，上一篇在下面看點(diǎn)擊查看：

 Web 性能優(yōu)化： 使用 Webpack 分離數(shù)據(jù)的正確方法

圖像是web上提供的最基本的內(nèi)容類型之一。他們說一張圖片勝過千言萬語。但是如果你不小心的話，圖片大小有時(shí)高達(dá)幾十兆。

因此，雖然網(wǎng)絡(luò)圖像需要清晰明快，但它們尺寸可以縮小壓縮的，使用加載時(shí)間保持在可接受的水平。

在我的網(wǎng)站上，我注意到我的主頁的頁面大小 超過了 1.1MB，圖片占了約88%，我還注意到我提供的圖像比它們需要的大(在分辨率方面)，顯然，還有很多改進(jìn)的空間。

我開始閱讀 Addy Osmani 的優(yōu)秀 Essential Image Optimization電子書，并開始在我的網(wǎng)站上按照他們的建議做了一些圖片的優(yōu)化。，然后再對(duì)響應(yīng)式圖像進(jìn)行了一些研究并應(yīng)用了它。

這使得頁面大小減少到 445kb，約 62% !

什么是圖像壓縮?

壓縮圖像就是在圖片保持在可接受的清晰度范圍內(nèi)同時(shí)減少文件大小，我使用 imagemin 來壓縮站點(diǎn)上的圖像。

要使用 imagemin，確保你已經(jīng)安裝了 Node.js，然后打開一個(gè)終端窗口，cd 進(jìn)入項(xiàng)目，并運(yùn)行以下命令: 

npm install imagemin 

然后創(chuàng)建一個(gè)名為 imagemin.js 的新文件，寫入下面的內(nèi)容： 

const imagemin = require('imagemin');  
const PNGImages = 'assets/images/*.png';  
const JPEGImages = 'assets/images/*.jpg';  
const output = 'build/images'; 

你可以根據(jù)自己的需要更改 PNGImages、JPEGImages 和 output 的值，以符合你的項(xiàng)目結(jié)構(gòu)。

此外要執(zhí)行圖片壓縮，還需要根據(jù)要壓縮的圖像類型安裝對(duì)應(yīng)的插件。

JPEG/JPG

JPG 的優(yōu)點(diǎn)

JPG ***的特點(diǎn)是 有損壓縮。這種高效的壓縮算法使它成為了一種非常輕巧的圖片格式。另一方面，即使被稱為“有損”壓縮，JPG的壓縮方式仍然是一種高質(zhì)量的壓縮方式：當(dāng)我們把圖片體積壓縮至原有體積的 50% 以下時(shí)，JPG 仍然可以保持住 60% 的品質(zhì)。此外，JPG 格式以 24 位存儲(chǔ)單個(gè)圖，可以呈現(xiàn)多達(dá) 1600 萬種顏色，足以應(yīng)對(duì)大多數(shù)場(chǎng)景下對(duì)色彩的要求，這一點(diǎn)決定了它壓縮前后的質(zhì)量損耗并不容易被我們?nèi)祟惖娜庋鬯煊X——前提是你用對(duì)了業(yè)務(wù)場(chǎng)景。

JPG 使用場(chǎng)景

JPG 適用于呈現(xiàn)色彩豐富的圖片，在我們?nèi)粘ｉ_發(fā)中，JPG 圖片經(jīng)常作為大的背景圖、輪播圖或 Banner 圖出現(xiàn)。

JPG 的缺陷

有損壓縮在上文所展示的輪播圖上確實(shí)很難露出馬腳，但當(dāng)它處理矢量圖形和 Logo 等線條感較強(qiáng)、顏色對(duì)比強(qiáng)烈的圖像時(shí)，人為壓縮導(dǎo)致的圖片模糊會(huì)相當(dāng)明顯。

此外，JPEG 圖像不支持透明度處理，透明圖片需要召喚 PNG 來呈現(xiàn)。

使用 MozJPEG 壓縮 jpeg

這里使用 Mozilla 的 MozJPEG 工具，該工具可以通過 imagemin-mozjpeg 作為 Imagemin 插件使用。你可以通過運(yùn)行以下命令來安裝它: 

npm install imagemin-mozjpeg 

然后將以下內(nèi)容添加到的 imagemin.js 中: 

const imageminMozjpeg = require('imagemin-mozjpeg');  
const optimiseJPEGImages = () =>  
  imagemin([JPEGImages], output, {  
    plugins: [  
      imageminMozjpeg({  
        quality: 70,  
      }),  
    ]  
  });  
optimiseJPEGImages()  
  .catch(error => console.log(error)); 

可以通過在終端中運(yùn)行 node imagemin.js 來運(yùn)行腳本。這將處理所有JPEG圖像，并將優(yōu)化后的版本放 build/images 文件夾中。

我發(fā)現(xiàn)將 quality 設(shè)置為 70 在大多數(shù)情況下可以產(chǎn)生足夠清晰的圖像，但你的項(xiàng)目需求可能不同，可以自行設(shè)置合適的值。

默認(rèn)情況下，MozJPEG 生成漸進(jìn)式 jpeg，這會(huì)導(dǎo)致圖像從低分辨率逐漸加載到高分辨率，直到圖片完全加載為止。由于它們的編碼方式，它們也比原始的 jpeg 略小。

你可以使用 Sindre Sorhus 提供的這個(gè)命令行工具來檢查JPEG圖像是否是漸進(jìn)式的。

Addy Osmani 已經(jīng)很好地總結(jié)了使用漸進(jìn)式 jpeg 的優(yōu)缺點(diǎn)。對(duì)我來說，我覺得利大于弊，所以我堅(jiān)持使用默認(rèn)設(shè)置。

如果你更喜歡使用原始的jpeg，可以在 options 對(duì)象中將 progressive 設(shè)置為 false。另外，請(qǐng)確保 imagemin-mozjpeg 版本的變化，請(qǐng)重新查看對(duì)應(yīng)文檔。

PNG (PNG-8 與 PNG-24)

PNG 的優(yōu)缺點(diǎn)

PNG（可移植網(wǎng)絡(luò)圖形格式）是一種無損壓縮的高保真的圖片格式。8 和 24，這里都是二進(jìn)制數(shù)的位數(shù)。按照我們前置知識(shí)里提到的對(duì)應(yīng)關(guān)系，8 位的 PNG 最多支持 256 種顏色，而 24 位的可以呈現(xiàn)約 1600 萬種顏色。

PNG 圖片具有比 JPG 更強(qiáng)的色彩表現(xiàn)力，對(duì)線條的處理更加細(xì)膩，對(duì)透明度有良好的支持。它彌補(bǔ)了上文我們提到的 JPG 的局限性，唯一的缺點(diǎn)就是　體積太大。

PNG 應(yīng)用場(chǎng)景

前面我們提到，復(fù)雜的、色彩層次豐富的圖片，用 PNG 來處理的話，成本會(huì)比較高，我們一般會(huì)交給 JPG 去存儲(chǔ)。

考慮到 PNG 在處理線條和顏色對(duì)比度方面的優(yōu)勢(shì)，我們主要用它來呈現(xiàn)小的 Logo、顏色簡(jiǎn)單且對(duì)比強(qiáng)烈的圖片或背景等。

使用 pngquant 優(yōu)化 PNG 圖像

pngquant 是我優(yōu)化PNG圖像的***工具，你可以通過 imagemin-pngquant 使用它: 

npm install imagemin-pngquant 

然后將以下內(nèi)容添加到 imagemin.js 文件中: 

const imageminPngquant = require('imagemin-pngquant');  
const optimisePNGImages = () =>  
  imagemin([PNGImages], output, {  
    plugins: [  
      imageminPngquant({ quality: '65-80' })  
    ],  
  });  
optimiseJPEGImages()  
  .then(() => optimisePNGImages())  
  .catch(error => console.log(error)); 

我發(fā)現(xiàn)將 quality 設(shè)置為 65-80 可以在文件大小和圖像質(zhì)量之間較好的折衷方案。

有了這些設(shè)置，我可以得到一個(gè)屏幕截圖，我的網(wǎng)站從 913kb 到 187kb，沒有任何明顯的視覺損失，驚人的79% 的降幅!

這是兩個(gè)文件?？匆豢矗约号袛嘁幌?

•  原圖(913kb)
•  優(yōu)化后的圖像(187kb)

WebP

WebP 的優(yōu)點(diǎn)

WebP 像 JPEG 一樣對(duì)細(xì)節(jié)豐富的圖片信手拈來，像 PNG 一樣支持透明，像 GIF 一樣可以顯示動(dòng)態(tài)圖片——它集多種圖片文件格式的優(yōu)點(diǎn)于一身。

WebP 的官方介紹對(duì)這一點(diǎn)有著更權(quán)威的闡述：

與 PNG 相比，WebP 無損圖像的尺寸縮小了 26％。在等效的 SSIM 質(zhì)量指數(shù)下，WebP 有損圖像比同類 JPEG 圖像小25-34％。 無損 WebP 支持透明度（也稱為 alpha 通道），僅需 22％ 的額外字節(jié)。對(duì)于有損 RGB 壓縮可接受的情況，有損 WebP 也支持透明度，與 PNG 相比，通常提供 3 倍的文件大小。

將 WebP 圖像提供給支持它們的瀏覽器

WebP 是谷歌引入的一種相對(duì)較新的格式，它的目標(biāo)是通過以無損和有損格式編碼圖像來提供更小的文件大小，使其成為 JPEG 和 PNG 的一個(gè)很好的替代方案。

WebP 圖像的清晰度通常可以與 JPEG 和 PNG相提并論，而且文件大小要小得多。例如，當(dāng)我將屏幕截圖從上面轉(zhuǎn)換到 WebP 時(shí)，我得到了一個(gè) 88kb 的文件，其質(zhì)量與 913kb 的原始圖像相當(dāng)，減少了90% !

看看這三張圖片，你能說出區(qū)別嗎?

•  原圖PNG (913kb)
•  優(yōu)化PNG圖像(187kb)
•  WebP圖像(88kb，可在Chrome或Opera瀏覽器中瀏覽)

就我個(gè)人而言，我認(rèn)為視覺效果是可以比較的，而且節(jié)省下來的大小是不容忽視的。

既然我們已經(jīng)認(rèn)識(shí)到在可能的情況下使用WebP格式是有價(jià)值的，那么很重要的一點(diǎn)是—它不能完全替代 JPEG 和 PNG，因?yàn)闉g覽器對(duì) WebP 支持并不普遍。

在撰寫本文時(shí)，F(xiàn)irefox、Safari 和 Edge 都是不支持WebP的瀏覽器。

然而，根據(jù) caniuse.com 的數(shù)據(jù)，全球超過70%的用戶使用支持WebP的瀏覽器。這意味著，通過使用 WebP 圖像，可以為大約 70% 的客戶提供更快的 web 頁面及更好的體驗(yàn)。

安裝它，運(yùn)行以下命令： 

npm install imagemin-webp 

然后將以下內(nèi)容添加到你的 imagemin.js 文件中: 

const imageminWebp = require('imagemin-webp');  
const convertPNGToWebp = () =>  
  imagemin([PNGImages], output, {  
    use: [  
      imageminWebp({  
        quality: 85,  
      }),  
    ]  
  });  
const convertJPGToWebp = () =>  
  imagemin([JPGImages], output, {  
    use: [  
      imageminWebp({  
        quality: 75,  
      }),  
    ]  
  });  
optimiseJPEGImages()  
  .then(() => optimisePNGImages())  
  .then(() => convertPNGToWebp())  
  .then(() => convertJPGToWebp())  
  .catch(error => console.log(error)); 

我發(fā)現(xiàn)，將 quality 設(shè)置為 85 會(huì)生成質(zhì)量與 PNG 相當(dāng)?shù)〉枚嗟?WebP 圖像。對(duì)于 jpeg，我發(fā)現(xiàn)將 quality 設(shè)置為 75 可以在視覺和文件大小之間取得很好的平衡。

提供 HTML格式的WebP圖像

一旦有了 WebP 圖像，可以使用以下標(biāo)記將它們提供給可以使用它們的瀏覽器，同時(shí)向不兼容 WebP 的瀏覽器使用 png 或者 jpeg。 

<picture>  
    <source srcset="sample_image.webp" type="image/webp">  
    <source srcset="sample_image.jpg" type="image/jpg">  
    <img src="sample_image.jpg" alt="">  
</picture> 

使用此標(biāo)記，理解 image/webp 媒體類型的瀏覽器將下載 Webp 圖片并顯示它，而其他瀏覽器將下載 JPEG 圖片。

任何不支持 <picture> 的瀏覽器都將跳過所有 source 標(biāo)簽，并加載底部 img 標(biāo)簽。因此，我們通過提供對(duì)所有瀏覽器類的支持，逐步增強(qiáng)了我們的頁面。

請(qǐng)注意，在所有情況下，img 標(biāo)記都是實(shí)際呈現(xiàn)給頁面的內(nèi)容，因此它確實(shí)是語法的必需部分。 如果省略 img 標(biāo)記，則不會(huì)渲染任何圖像。

<picture> 標(biāo)簽和其中定義的所有 source 都在那里，以便瀏覽器可以選擇要使用的圖片的路徑。 選擇源圖像后，其 URL 將傳給 img 標(biāo)記，這就是顯示的內(nèi)容。

這意味著你無需設(shè)置 <picture> 或 source 標(biāo)記的樣式，因?yàn)闉g覽器不會(huì)渲染這些標(biāo)記。 因此，你可以像以前一樣繼續(xù)使用 img 標(biāo)簽進(jìn)行樣式設(shè)置。

總結(jié)

正如你所看到的，優(yōu)化 web 上使用的圖像的過程并不復(fù)雜，通過減少頁面加載時(shí)間，可以為客戶帶來更好的用戶體驗(yàn)，希望本文對(duì)你有所幫助，共進(jìn)步！

代碼部署后可能存在的BUG沒法實(shí)時(shí)知道，事后為了解決這些BUG，花了大量的時(shí)間進(jìn)行l(wèi)og 調(diào)試，這邊順便給大家推薦一個(gè)好用的BUG監(jiān)控工具 Fundebug。