通過圖片優化，我將網站大小減少了62%

weixin_33763244發表於2019-03-11

優化網站

圖片是Web提供的最基本的一種內容型別。人們都說一張圖片勝過千言萬語。但如果你一不小心，它也可能佔用你好幾兆頻寬。

雖說Web影像應該儘可能清晰明快，但檔案大小必須是可管理的，以便保持較快的載入速度，並且應該將資料使用保持在可接受的水平。

在我的網站上，我發現主頁的大小超過了1.1MB，其中影像佔了88％。我也意識到我提供的圖片比實際需要的要大（比如解析度）。顯然，還有很大的優化空間。

$\"\"$

我開始閱讀由Addy Osmani撰寫的“Essential Image Optimization”電子書（），並開始在我的網站上嘗試他的建議。然後我又研究了一些響應式影像方面的知識，並也將其應用在我的網站上。

這樣就可以將頁面大小降至445KB，減少了約62％！

$\"\"$

本文將介紹我如何優化主頁大小，將其提升到更可管理的水平。

什麼是影像壓縮？

壓縮影像是指在保持可接受的視覺質量水平的同時減小影像檔案的大小。我使用imagemin來壓縮我網站上的影像。

要使用imagemin，請確保已安裝了Node.js，然後開啟終端視窗，cd到專案的資料夾，並執行以下命令：

npm install imagemin

然後建立一個名為imagemin.js的新檔案，並貼上以下內容：

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

你可以根據具體的專案結構隨意修改PNGImages、JPEGImages和output的值。

要進行影像壓縮，你需要根據要壓縮的影像型別安裝一些外掛。

使用MozJPEG壓縮JPEG

為了壓縮JPEG影像，我使用了Mozilla的MozJPEG，它可以通過imagemin-mozjpeg作為imagemin的外掛使用。你可以通過執行以下命令來安裝它：

npm install imagemin-mozjpeg

然後將以下內容新增到imagemin.js檔案中：

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

你可以在終端中輸入node imagemin.js來執行這個指令碼。這樣就會處理所有的JPEG影像，並將優化過的影像放在build/images資料夾中。

我發現將質量設定為70可以得到足夠好的影像，但是你的要求可能會不一樣，所以請根據你的需要設定具體的值。

MozJPEG預設會生成漸進式JPEG，在載入影像時，從低解析度逐漸載入到高解析度，直到影像載入完畢。由於它們的編碼方式不一樣，所以往往會比基線JPEG小一些。

你可以使用這個命令列工具來檢查JPEG影像是否是漸進式的。

Addy Osmani已經詳細介紹過使用漸進式JPEG的優點和缺點。

在我看來，它是利大於弊的，所以我使用了預設設定。

如果你更喜歡使用基線JPEG，可以在選項物件中將progressive設定為false。此外，更多的選項設定請參考imagemin-mozjpeg頁面。

使用pngquant優化PNG影像

pngquant是我用來優化PNG影像的首選工具，你可以通過imagemin-pngquant外掛來使用它：

npm install imagemin-pngquant

然後將以下內容新增到imagemin.js檔案中：

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

我發現將quality設定為65到80可以在檔案大小和影像質量之間獲得良好的折衷。

使用這些設定，我可以將網站截圖從913 KB減到到187 KB，而不會出現任何明顯的視覺方面的質量損失。檔案大小整整減少了79％！

下面是這兩個檔案，可以下載下來自己去判斷：

原始影像（913 KB）：

$\"\"$

優化過的影像（187 KB）

$\"\"$

使用WebP影像（需要瀏覽器支援）

WebP是Google推出的一種相對較新的影像格式，旨在通過編碼無損和有損格式的影像獲得較小體積的影像，這讓它成為JPEG和PNG的絕佳替代品。

WebP影像的視覺質量通常與JPEG和PNG相當，但檔案大小要小得多。例如，當我將上面的螢幕截圖轉換為WebP時，我得到了一個88 KB的檔案，其質量與913 KB的原始影像相當。檔案減小了90％！

看看這三張圖片，你能分辨出來嗎？

原始PNG影像（913 KB)

$\"\"$

優化過的PNG影像（187 KB)

$\"\"$

WebP影像（88 KB)，可在Chrome或Opera中檢視：https://freshman.tech/assets/dist/images/articles/freshman-1600.webp

我認為它們在視覺質量方面是差不多的，但節省的檔案大小卻是很可觀的。

現在我們知道，在可能的情況下儘可能使用WebP格式，但要注意，現在它還不能完全取代JPEG和PNG，因為瀏覽器對WebP的支援並不普遍。

在撰寫本文時，Firefox、Safari和Edge還不支援WebP。

$\"\"$

不過，caniuse.com網站的資料顯示，全球有超過70％的使用者在使用支援WebP的瀏覽器。這意味著你可以使用WebP影像為大約70％的使用者提高網頁載入速度。

讓我們來看看在Web上提供WebP影像的具體步驟。

將JPEG和PNG轉換為WebP

使用imagemin-webp外掛將JPEG和PNG影像轉換為WebP，這個非常簡單。

在終端中執行以下命令來安裝它：

npm install imagemin-webp

然後將以下內容新增到imagemin.js檔案中：

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

我發現，將quality設定為85可以得到與PNG質量相當的WebP，但檔案卻要小得多。對於JPEG，我發現將quality設定為75可以在視覺質量和檔案大小之間獲得適當的平衡。

說實話，我還在試驗這些值，所以不把它們作為推薦值，更多資訊請檢視imagemin-webp頁面。

在HTML中使用WebP影像

在得到WebP影像後，可以使用下面的標籤為支援WebP的瀏覽器提供WebP影像，同時為不支援WebP的瀏覽器提供等效（優化）的JPEG或PNG後備。

\u0026lt;picture\u0026gt;    \u0026lt;source srcset=\u0026quot;sample_image.webp\u0026quot; type=\u0026quot;image/webp\u0026quot;\u0026gt;    \u0026lt;source srcset=\u0026quot;sample_image.jpg\u0026quot; type=\u0026quot;image/jpg\u0026quot;\u0026gt;    \u0026lt;img src=\u0026quot;sample_image.jpg\u0026quot; alt=\u0026quot;\u0026quot;\u0026gt;\u0026lt;/picture\u0026gt;

支援image/webp媒體型別的瀏覽器將下載WebP影像並顯示它，而其他瀏覽器將下載JPEG影像。

不支援\u0026lt;picture\u0026gt;的瀏覽器將跳過所有source，並載入底部img標籤的src屬性所定義的內容。可以說，我們已經對我們的頁面進行了漸進式增強，可以支援各種瀏覽器。

$\"\"$