前端性能優化——圖片優化

一、圖片優化措施

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

1. 壓縮圖片：壓縮圖片可以減少圖片的文件大小，從而減少載入時間。

2. 使用矢量圖形：使用矢量圖形（如 SVG）可以減少文件大小，並且可以在不失真的情況下無限縮放。

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

4. 使用適當的圖片格式：使用適當的圖片格式可以大大減少圖片的文件大小。對於需要透明背景的圖片，使用 PNG 格式；對於顏色較少的圖像，使用 GIF 格式；對於照片和複雜圖像，使用 JPEG 格式。

5. 移除圖片元數據：圖片通常包含元數據，例如拍攝日期、相機型號等。移除這些元數據可以減少圖片的文件大小。

6. 緩存圖片：將圖片緩存在瀏覽器中可以減少頁面載入時間。你可以使用瀏覽器緩存機制或者使用 CDN 來緩存圖片。

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

8. 圖片預載入：通過預載入圖片，可以提高用戶體驗並減少載入時間。你可以使用 preload 或 prefetch 標簽來預載入圖片。

9. 使用響應式圖片：使用響應式圖片可以根據設備的解析度提供不同大小的圖片，從而減少載入時間和帶寬消耗。你可以使用 srcset 屬性和 sizes 屬性來實現響應式圖片。

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

11. 使用 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,
           },
         });
     },
   });
   

   優化效果：

   優化前：

   

   優化後：

   

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 目錄路徑。

   優化效果：

   優化前：

   

   

   優化後：

   

   

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

作者：飛仔FeiZai

出處：https://www.cnblogs.com/yuzhihui/p/17269559.html

聲明：歡迎任何形式的轉載，但請務必註明出處！！！