圖片該如何優化來提高網站性能

Posted on by

概述

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

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

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標簽進行樣式設置。

以上就是圖片該如何優化來提高網站性能的詳細內容，更多關於優化圖片提高網站性能的資料請關註WalkonNet其它相關文章！

推薦閱讀：