前端效能最佳化——圖片最佳化

飛仔FeiZai發表於2023-04-04

前端

前端效能最佳化——圖片最佳化

一、圖片最佳化措施

最佳化圖片是 Web 前端最佳化的重要一環，因為圖片是 Web 頁面中最耗費頻寬和載入時間的資源之一。以下是一些透過最佳化圖片來最佳化 Web 前端的方法：

壓縮圖片：壓縮圖片可以減少圖片的檔案大小，從而減少載入時間。

使用向量圖形：使用向量圖形（如 SVG）可以減少檔案大小，並且可以在不失真的情況下無限縮放。
使用 WebP 格式圖片：WebP 是一種由 Google 開發的圖片格式，可以大幅減少檔案大小，從而減少載入時間。WebP 格式圖片可以在 Chrome、Firefox、Edge 和 Opera 等現代瀏覽器中使用。
使用適當的圖片格式：使用適當的圖片格式可以大大減少圖片的檔案大小。對於需要透明背景的圖片，使用 PNG 格式；對於顏色較少的影像，使用 GIF 格式；對於照片和複雜影像，使用 JPEG 格式。
移除圖片後設資料：圖片通常包含後設資料，例如拍攝日期、相機型號等。移除這些後設資料可以減少圖片的檔案大小。
快取圖片：將圖片快取在瀏覽器中可以減少頁面載入時間。你可以使用瀏覽器快取機制或者使用 CDN 來快取圖片。
使用 CSS Sprites：使用 CSS Sprites 可以將多個圖片合併成一個大圖，減少頁面中的圖片數量，從而減少 HTTP 請求次數，減少頁面的載入時間。
圖片預載入：透過預載入圖片，可以提高使用者體驗並減少載入時間。你可以使用 preload 或 prefetch 標籤來預載入圖片。
使用響應式圖片：使用響應式圖片可以根據裝置的解析度提供不同大小的圖片，從而減少載入時間和頻寬消耗。你可以使用 srcset 屬性和 sizes 屬性來實現響應式圖片。
使用 Lazyload 延遲載入圖片：Lazyload 是一種懶載入技術，它可以將頁面中的圖片延遲載入，直到使用者滾動到頁面中的相應位置。這可以減少頁面的初始載入時間，並且可以提高使用者的體驗。可以使用懶載入技術或 Intersection Observer API 來實現延遲載入圖片。
使用 CDN 加速圖片載入：使用 CDN 可以將圖片快取到離使用者最近的節點，從而提高圖片的載入速度和使用者的體驗。

二、圖片最佳化實踐

2.1、壓縮圖片

基於 Vue 3 + Webpack 5 的 vue.config.js 配置示例：

需要安裝 image-webpack-loader：

npm install image-webpack-loader --save-dev

在 vue.config.js 檔案中新增以下程式碼：

const { defineConfig } = require("@vue/cli-service");

module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    port: 8123,
    // 除錯時啟用 gzip 壓縮
    compress: true,
    // 除錯時允許內網穿透，讓外網的人訪問到本地除錯的 H5 頁面
    disableHostCheck: true,
  },
  configureWebpack: {
    plugins: [],
    module: {
      rules: [],
    },
  },
  chainWebpack: (config) => {
    const imagesRule = config.module.rule("images");
    imagesRule
      .use("image-webpack-loader")
      .loader("image-webpack-loader")
      .options({
        mozjpeg: {
          progressive: true,
          quality: 65,
        },
        optipng: {
          enabled: false,
        },
        pngquant: {
          quality: [0.65, 0.9],
          speed: 4,
        },
        gifsicle: {
          interlaced: false,
        },
        webp: {
          quality: 75,
        },
      });
  },
});

最佳化效果：

最佳化前：

最佳化後：

2.2、使用 SVG 格式圖片

最佳化思路：由於 JPEG、PNG 和 GIF 等格式圖片無法被 gzip 等壓縮演算法壓縮，所以透過使用 SVG 向量圖（文字型別），即可透過 gzip 等壓縮演算法對文字進行壓縮。

如果需要使用 SVG 圖片，最好是使用專門的 SVG 編輯器或繪圖工具來建立或編輯它們，例如，Inkscape 是一個流行的開源向量圖形編輯器。

2.3、使用 WebP/AVIF 格式圖片

採用新一代格式提供圖片：WebP 和 AVIF 等圖片格式的壓縮效果通常優於 PNG 或 JPEG，因而下載速度更快，消耗的資料流量更少。

在 HTML 檔案中使用 picture 元素來載入圖片，以支援不同的圖片格式：

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

透過使用 WebP/AVIF 格式圖片，並且在 HTML 檔案中使用 picture 元素載入圖片，以支援不同的圖片格式。這樣可以有效地減少頻寬的使用和加快圖片的載入速度，從而提高網站的效能和使用者體驗。

將 PNG/JPEG 格式圖片轉換為 Webp 格式圖片

使用線上工具：jpg-to-webp
使用 Python 對圖片進行批次轉換處理：《Python 實現影像尺寸和轉換處理》

2.4、使用圖片 Base64 編碼的 DataURI

最佳化思路：由於 JPEG、PNG 和 GIF 等格式圖片無法被 gzip 等壓縮演算法壓縮，所以透過配置 webpack，在打包時，將 JPEG、PNG 和 GIF 等格式圖片轉換為圖片 Base64 編碼的 DataURI，即可透過 gzip 等壓縮演算法對文字進行壓縮。

需要注意的是，將圖片轉換為圖片 Base64 編碼的 DataURI 字串可能會導致檔案大小變大，並且會影響到應用程式的載入速度。因此，建議只將小檔案轉換為 base64 編碼的字串，而將大檔案編譯成普通的圖片檔案。

基於 Vue 2 + Webpack 4 的 vue.config.js 配置示例：

// vue.config.js

module.exports = {
  devServer: {
    host: "0.0.0.0",
    port: 9999,
    https: false,
    // 除錯時啟用 gzip 壓縮
    compress: true,
    // 除錯時允許內網穿透，讓外網的人訪問到本地除錯的 H5 頁面
    disableHostCheck: true,
  },
  configureWebpack: {
    rules: [],
    plugins: [],
  },
  configureWebpack: (config) => {},
  chainWebpack: (config) => {
    config.module
      .rule("images")
      .test(/\.(png|jpe?g|gif)$/i)
      .use("url-loader")
      .loader("url-loader")
      .tap((options) => {
        // 將檔案大小限制為100kb以內，超過100kb的檔案將被編譯成普通的圖片檔案。
        options.limit = 100 * 1024;
        return options;
      });
  },
};

基於 Vue 3 + Webpack 5 的 vue.config.js 配置示例：

// vue.config.js

const path = require("path");
const { defineConfig } = require("@vue/cli-service");

module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    port: 8123,
    // 除錯時啟用 gzip 壓縮
    compress: true,
    // 除錯時允許內網穿透，讓外網的人訪問到本地除錯的 H5 頁面
    disableHostCheck: true,
  },
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.(png|jpe?g|gif)$/i,
          type: "asset",
          parser: {
            dataUrlCondition: {
              maxSize: 100 * 1024, // 將檔案大小限制為 100kb 以內，超過 100kb 的檔案將被編譯成普通的圖片檔案。
            },
          },
        },
      ],
    },
  },
  chainWebpack: (config) => {
    config.resolve.alias.set("@", path.resolve(__dirname, "src"));
  },
});

上面的程式碼展示瞭如何使用 Webpack 5 的 asset 模組來將圖片轉換為 base64 編碼的字串。透過配置 dataUrlCondition.maxSize，可以指定將多大以下的檔案轉換為 base64 編碼的字串。超過這個大小的檔案將被編譯成普通的圖片檔案。

另外，為了避免在 Vue 3 中使用 import 語句時出現相對路徑的問題，可以透過 chainWebpack 來配置別名，使得我們可以使用@代替 src 目錄路徑。

最佳化效果：

最佳化前：