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

飛仔FeiZai發表於2023-04-04

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

一、圖片最佳化措施

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

  1. 壓縮圖片:壓縮圖片可以減少圖片的檔案大小,從而減少載入時間。
  1. 使用向量圖形:使用向量圖形(如 SVG)可以減少檔案大小,並且可以在不失真的情況下無限縮放。

  2. 使用 WebP 格式圖片:WebP 是一種由 Google 開發的圖片格式,可以大幅減少檔案大小,從而減少載入時間。WebP 格式圖片可以在 Chrome、Firefox、Edge 和 Opera 等現代瀏覽器中使用。

  3. 使用適當的圖片格式:使用適當的圖片格式可以大大減少圖片的檔案大小。對於需要透明背景的圖片,使用 PNG 格式;對於顏色較少的影像,使用 GIF 格式;對於照片和複雜影像,使用 JPEG 格式。

  4. 移除圖片後設資料:圖片通常包含後設資料,例如拍攝日期、相機型號等。移除這些後設資料可以減少圖片的檔案大小。

  5. 快取圖片:將圖片快取在瀏覽器中可以減少頁面載入時間。你可以使用瀏覽器快取機制或者使用 CDN 來快取圖片。

  6. 使用 CSS Sprites:使用 CSS Sprites 可以將多個圖片合併成一個大圖,減少頁面中的圖片數量,從而減少 HTTP 請求次數,減少頁面的載入時間。

  7. 圖片預載入:透過預載入圖片,可以提高使用者體驗並減少載入時間。你可以使用 preload 或 prefetch 標籤來預載入圖片。

  8. 使用響應式圖片:使用響應式圖片可以根據裝置的解析度提供不同大小的圖片,從而減少載入時間和頻寬消耗。你可以使用 srcset 屬性和 sizes 屬性來實現響應式圖片。

  9. 使用 Lazyload 延遲載入圖片:Lazyload 是一種懶載入技術,它可以將頁面中的圖片延遲載入,直到使用者滾動到頁面中的相應位置。這可以減少頁面的初始載入時間,並且可以提高使用者的體驗。可以使用懶載入技術或 Intersection Observer API 來實現延遲載入圖片。

  10. 使用 CDN 加速圖片載入:使用 CDN 可以將圖片快取到離使用者最近的節點,從而提高圖片的載入速度和使用者的體驗。

二、圖片最佳化實踐

2.1、壓縮圖片

  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,
            },
          });
      },
    });
    

    最佳化效果:

    最佳化前:

    img

    最佳化後:

    img

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 格式圖片

  1. 使用線上工具:jpg-to-webp

  2. 使用 Python 對圖片進行批次轉換處理:《Python 實現影像尺寸和轉換處理》

2.4、使用圖片 Base64 編碼的 DataURI

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

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

  1. 基於 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;
          });
      },
    };
    
  2. 基於 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 目錄路徑。

    最佳化效果:

    最佳化前:

    img

    img

    最佳化後:

    img

    img

    由上述對比可知,累積佈局偏移(CLS,Cumulative Layout Shift)指標得到了最佳化,是一項意料之外的最佳化,所以還無法肯定該最佳化措施能達到預期。

相關文章