如何提升網站性能？這裏有幾種圖片優化的技巧

時間 2020-07-07

原文原文鏈接

譯者：前端小智
做者：Ayo Isaiah
來源： https://www.freecodecamp.org/

點贊再看，養成習慣
本文 GitHub https://github.com/qq44924588... 上已經收錄，更多往期高贊文章的分類，也整理了不少個人文檔，和教程資料。歡迎Star和完善，你們面試能夠參照考點複習，但願咱們一塊兒有點東西。前端

圖像是web上提供的最基本的內容類型之一。他們說一張圖片賽過千言萬語。可是若是你不當心的話，圖片大小有時高達幾十兆。node

所以，雖然網絡圖像須要清晰明快，但它們尺寸能夠縮小壓縮的，使用加載時間保持在可接受的水平。git

在個人網站上，我注意到個人主頁的頁面大小超過了 1.1MB，圖片佔了約88%，我還注意到我提供的圖像比它們須要的大(在分辨率方面)，顯然，還有不少改進的空間。github

我開始閱讀 Addy Osmani 的優秀 Essential Image Optimization電子書，並開始在個人網站上按照他們的建議作了一些圖片的優化。，而後再對響應式圖像進行了一些研究並應用了它。web

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

什麼是圖像壓縮?

壓縮圖像就是在圖片保持在可接受的清晰度範圍內同時減小文件大小，我使用 imagemin 來壓縮站點上的圖像。算法

要使用 imagemin，確保你已經安裝了 Node.js，而後打開一個終端窗口，cd 進入項目，並運行如下命令:npm

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 的值，以符合你的項目結構。微信

此外要執行圖片壓縮，還須要根據要壓縮的圖像類型安裝對應的插件。

JPEG/JPG

JPG 的優勢

JPG 最大的特色是 有損壓縮。這種高效的壓縮算法使它成爲了一種很是輕巧的圖片格式。另外一方面，即便被稱爲「有損」壓縮，JPG的壓縮方式仍然是一種高質量的壓縮方式：當咱們把圖片體積壓縮至原有體積的 50% 如下時，JPG 仍然能夠保持住 60% 的品質。此外，JPG 格式以 24 位存儲單個圖，能夠呈現多達 1600 萬種顏色，足以應對大多數場景下對色彩的要求，這一點決定了它壓縮先後的質量損耗並不容易被咱們人類的肉眼所察覺——前提是你用對了業務場景。

JPG 使用場景

JPG 適用於呈現色彩豐富的圖片，在咱們平常開發中，JPG 圖片常常做爲大的背景圖、輪播圖或 Banner 圖出現。

JPG 的缺陷

有損壓縮在上文所展現的輪播圖上確實很難露出馬腳，但當它處理矢量圖形和 Logo 等線條感較強、顏色對比強烈的圖像時，人爲壓縮致使的圖片模糊會至關明顯。

此外，JPEG 圖像不支持透明度處理，透明圖片須要召喚 PNG 來呈現。

使用 MozJPEG 壓縮 jpeg

這裏使用 Mozilla 的 MozJPEG 工具，該工具能夠經過 imagemin-mozjpeg 做爲 Imagemin 插件使用。你能夠經過運行如下命令來安裝它:

npm install imagemin-mozjpeg

而後將如下內容添加到的 imagemin.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 文件夾中。

我發現將 quality 設置爲 70 在大多數狀況下能夠產生足夠清晰的圖像，但你的項目需求可能不一樣，能夠自行設置合適的值。

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

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

Addy Osmani 已經很好地總結了使用漸進式 jpeg 的優缺點。對我來講，我以爲利大於弊，因此我堅持使用默認設置。

若是你更喜歡使用原始的jpeg，能夠在 options 對象中將 progressive 設置爲 false。另外，請確保 imagemin-mozjpeg 版本的變化，請從新查看對應文檔。

你們都說簡歷沒項目寫，我就幫你們找了一個項目，還附贈【搭建教程】。

PNG (PNG-8 與 PNG-24)

PNG 的優缺點

PNG（可移植網絡圖形格式）是一種無損壓縮的高保真的圖片格式。8 和 24，這裏都是二進制數的位數。按照咱們前置知識裏提到的對應關係，8 位的 PNG 最多支持 256 種顏色，而 24 位的能夠呈現約 1600 萬種顏色。

PNG 圖片具備比 JPG 更強的色彩表現力，對線條的處理更加細膩，對透明度有良好的支持。它彌補了上文咱們提到的 JPG 的侷限性，惟一的缺點就是　體積太大。

PNG 應用場景

前面咱們提到，複雜的、色彩層次豐富的圖片，用 PNG 來處理的話，成本會比較高，咱們通常會交給 JPG 去存儲。

考慮到 PNG 在處理線條和顏色對比度方面的優點，咱們主要用它來呈現小的 Logo、顏色簡單且對比強烈的圖片或背景等。

使用 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 能夠在文件大小和圖像質量之間較好的折衷方案。

有了這些設置，我能夠獲得一個屏幕截圖，個人網站從 913kb 到 187kb，沒有任何明顯的視覺損失，驚人的79% 的降幅!

這是兩個文件。看一看，本身判斷一下:

WebP

WebP 的優勢

WebP 像 JPEG 同樣對細節豐富的圖片信手拈來，像 PNG 同樣支持透明，像 GIF 同樣能夠顯示動態圖片——它集多種圖片文件格式的優勢於一身。
WebP 的官方介紹對這一點有着更權威的闡述：

與 PNG 相比，WebP 無損圖像的尺寸縮小了 26％。在等效的 SSIM 質量指數下，WebP 有損圖像比同類 JPEG 圖像小25-34％。無損 WebP 支持透明度（也稱爲 alpha 通道），僅需 22％的額外字節。對於有損 RGB 壓縮可接受的狀況，有損 WebP 也支持透明度，與 PNG 相比，一般提供 3 倍的文件大小。

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

WebP 是谷歌引入的一種相對較新的格式，它的目標是經過以無損和有損格式編碼圖像來提供更小的文件大小，使其成爲 JPEG 和 PNG 的一個很好的替代方案。

WebP 圖像的清晰度一般能夠與 JPEG 和 PNG相提並論，並且文件大小要小得多。例如，當我將屏幕截圖從上面轉換到 WebP 時，我獲得了一個 88kb 的文件，其質量與 913kb 的原始圖像至關，減小了90% !

看看這三張圖片，你能說出區別嗎?

就我我的而言，我認爲視覺效果是能夠比較的，並且節省下來的大小是不容忽視的。

既然咱們已經認識到在可能的狀況下使用WebP格式是有價值的，那麼很重要的一點是—它不能徹底替代 JPEG 和 PNG，由於瀏覽器對 WebP 支持並不廣泛。

在撰寫本文時，Firefox、Safari 和 Edge 都是不支持WebP的瀏覽器。

然而，根據 caniuse.com 的數據，全球超過70%的用戶使用支持WebP的瀏覽器。這意味着，經過使用 WebP 圖像，能夠爲大約 70% 的客戶提供更快的 web 頁面及更好的體驗。

安裝它，運行如下命令：

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 會生成質量與 PNG 至關但小得多的 WebP 圖像。對於 jpeg，我發現將 quality 設置爲 75 能夠在視覺和文件大小之間取得很好的平衡。

提供 HTML格式的WebP圖像

一旦有了 WebP 圖像，可使用如下標記將它們提供給可使用它們的瀏覽器，同時向不兼容 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>

使用此標記，理解 image/webp 媒體類型的瀏覽器將下載 Webp 圖片並顯示它，而其餘瀏覽器將下載 JPEG 圖片。

任何不支持 <picture> 的瀏覽器都將跳過全部 source 標籤，並加載底部 img 標籤。所以，咱們經過提供對全部瀏覽器類的支持，逐步加強了咱們的頁面。

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

<picture> 標籤和其中定義的全部 source 都在那裏，以便瀏覽器能夠選擇要使用的圖片的路徑。選擇源圖像後，其 URL 將傳給 img 標記，這就是顯示的內容。

這意味着你無需設置 <picture> 或 source 標記的樣式，由於瀏覽器不會渲染這些標記。所以，你能夠像之前同樣繼續使用 img 標籤進行樣式設置。

總結

正如你所看到的，優化 web 上使用的圖像的過程並不複雜，經過減小頁面加載時間，能夠爲客戶帶來更好的用戶體驗，但願本文對你有所幫助，共進步！

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

原文：

https://medium.freecodecamp.o...

交流

文章每週持續更新，能夠微信搜索「大遷世界」第一時間閱讀和催更（比博客早一到兩篇喲），本文 GitHub https://github.com/qq449245884/xiaozhi 已經收錄，整理了不少個人文檔，歡迎Star和完善，你們面試能夠參照考點複習，另外關注公衆號，後臺回覆福利，便可看到福利，你懂的。