圖片優化如何讓網站減重60%

文章做者：Ayo

原文連接：https://freshman.tech/image-optimisation/

圖片是web上提供的最基本的內容類型之一。他們說一張圖片值一千個字，但若是你不當心的話，它也能夠值幾兆大小。

所以，儘管Web圖像須要清晰明快，但也必須以可管理的大小進行展現，以使加載時間保持較小，數據使用率保持在可接受的水平。

在個人網站上，我注意到個人主頁頁面重量超過1.1 MB，圖片佔了其中的88%。我也意識到我所提供的圖片比它們須要的尺寸要大(就分辨率而言)。顯然，還有很大的優化空間。

我閱讀了Addy Osmani出色的Essential Image Optimization電子書以後，在個人網站上實施了他的建議。 而後，我對響應圖像進行了一些研究，並將其應用在了個人網站。

這使得頁面重量減小到445 KB。頁面重量減小62%

這篇文章是關於描述我採起的步驟，使個人主頁頁面重量達到更易於管理的水平。

什麼是圖像壓縮？

壓縮圖像就是要減少文件體積，同時保持可接受的視覺質量水平。爲了壓縮我網站上的圖像，imagemin是我選擇的工具。

要使用 imagemin，請確保安裝了 Node.js ，而後打開一個終端窗口，cd 到您的項目文件夾中，並運行如下命令

npm install imagemin
複製代碼

而後新建文件imagmin .js，並粘貼如下內容

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

您能夠隨意更改PNGImages、JPEGImages和輸出的值，以匹配您的項目結構。

要執行任何壓縮，都須要根據要壓縮的圖像類型引入幾個插件。

用 MozJPEG 壓縮 jpeg

爲了壓縮 JPEG 圖像，我使用了Mozilla 的 MozJPEG 工具，它能夠經過imagemin- MozJPEG 做爲imagemin 插件使用，您能夠經過運行如下命令安裝它

npm install imagemin-mozjpeg
複製代碼

而後將如下內容添加到 imagmin .js 文件中

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

您能夠經過在終端中運行 node imagemin.js來運行腳本。 這將處理全部 JPEG 圖像，並將優化的版本放置在 build / images 文件夾中。

我發現，在大多數狀況下，將質量設置爲70能夠產生足夠好的圖像，但效果可能會有所不一樣。你能夠根據本身的實際狀況進行實驗。

MozJPEG 默認狀況下會生成逐行JPEG，這會致使圖像從低分辨率逐漸加載到高分辨率，直到圖片徹底加載爲止。 因爲它們的編碼方式，它們也每每比基線 JPEG 略小。

您可使用 Sindre Sorhus 的這個漂亮的命令行工具來檢查 JPEG 圖像是不是漸進式的。

Addy Osmani 已經詳細說明了使用漸進 jpeg 的優缺點。對我來講，我以爲利大於弊，因此我堅持使用默認設置。

若是您更喜歡使用基線 JPEG，則能夠在options 對象中將 progressive 設置爲false。 另外，請確保訪問 imagemin-mozjpeg 頁面，以查看其餘可用的設置。

用pngquant優化PNG圖像

pngquant 是我優化 PNG 圖像的首選工具。您能夠經過imagemin-pngquant 使用它

npm install imagemin-pngquant
複製代碼

添加一下內容到 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)); 複製代碼

我發現quality參數爲65-80，能夠在文件大小和圖像質量之間取得良好的平衡。

經過這些設置，我能夠獲得一個從913 KB到187kb的網站截圖，而且沒有任何明顯的視覺質量損失。79%的降幅！

下面是同一個文件。看一看，本身判斷

• Original Image (913 KB)
• Optimised Image (187 KB)

爲支持WebP圖像的瀏覽器提供服務

WebP 是 Google 推出的一種相對較新的格式，旨在經過以無損和有損格式對圖像進行編碼來提供較小的文件大小，使其成爲 JPEG 和 PNG 的理想替代品。

WebP 圖像能夠與 JPEG 和PNG 的視覺質量媲美，但能夠大大減少文件大小。 例如，當我從上方將屏幕截圖轉換爲 WebP 時，我獲得了一個88 KB的文件，其質量與原始圖像的913 KB至關。 減小90％！

看一下全部三個圖像。 你能說出區別嗎？

• Original PNG image (913 KB)
• Optimised PNG image (187 KB)
• WebP image (88 KB, can be viewed in Chrome or Opera)

就我的而言，我認爲視覺質量是可比的，並且您所節省的成本也難以忽視。

既然咱們已經肯定了儘量使用 WebP 格式的價值，則須要注意的是，因爲大部分瀏覽器對 WebP的支持並很差，所以它目前不能徹底替代 JPEG 和 PNG。

可是，根據 caniuse.com 的數據，全球有70％以上的用戶使用支持 WebP 的瀏覽器。 這意味着，經過提供WebP圖像，您可使大約70％的客戶的網頁瀏覽速度更快。

讓咱們看看在網絡上投放 WebP 圖像的具體步驟。

將您的JPEG和PNG轉換爲WebP

使用 imagemin-webp 插件，將 JPEG 和PNG 圖像轉換爲 WebP 很是容易。

在終端中運行如下命令來安裝它

npm install imagemin-webp
複製代碼

在 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)); 複製代碼

我發現，將quality參數設置爲85時，產生的WebP圖像，在質量上與PNG圖像類似，但會大大縮小。對於 jpeg ，我發現將quality參數設置爲75時，可讓我在視覺質量和文件大小之間找到一個很好的平衡。

老實說，我仍在嘗試這些值，所以請勿將其做爲建議。 並確保您檢查 imagemin-webp 頁面以查看其餘可用選項。

在HTML中使用WebP圖像

一旦你有了 WebP 圖像，你可使用下面的標記將它們提供給那些可使用它們的瀏覽器，同時爲那些不支持 WebP 的瀏覽器提供等價的(優化的) JPEG 或 PNG 回退。

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

使用此標記，支持 webp 媒體類型的瀏覽器將下載 WebP 進行轉換並顯示它，而其餘瀏覽器將改成下載 JPEG 變體。

任何不理解 <picture> 的瀏覽器都會跳過全部<source>，並加載底部 img 標記的src屬性中定義的內容。 所以，咱們爲全部類型的瀏覽器提供了支持，從而逐步加強了咱們的頁面。

請注意，在全部狀況下，img 標籤都是頁面上實際呈現的內容，所以它確實是語法的必需部分。 若是省略 img 標籤，則不會渲染任何圖像。

<picture> 標籤和其中定義的全部源均位於此處，以便瀏覽器能夠選擇要使用的圖像變體。 選擇來源圖片後，其網址就會饋送到 img 標籤，這就是顯示的內容。

這意味着您無需設置 <picture> 或<source>標籤的樣式，由於它們不是由瀏覽器呈現的。 所以，您能夠像之前同樣僅對 img 標籤進行樣式設置。

總結

如您所見，優化圖像以在 Web 上使用的過程並不那麼複雜，而且能夠經過減小頁面加載時間來爲客戶帶來更好的用戶體驗。