前端效能最佳化——圖片最佳化
一、圖片最佳化措施
最佳化圖片是 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, compress: true, }, configureWebpack: { rules: [], 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
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, 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, compress: 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）指標得到了最佳化，是一項意料之外的最佳化，所以還無法肯定該最佳化措施能達到預期。