用 LQIP 讓圖片載入不再跳來跳去

瀏覽有大量圖片的網頁時，應該都遇過這種情況：圖片還沒載入完成，畫面就一直跳動，文字被推來推去，或是圖片從上到下一條一條慢慢出現。這些體驗都不太好，尤其在網速較慢的環境下會更明顯。

LQIP（Low Quality Image Placeholder）是一種常見的圖片載入優化技術，核心概念很簡單：在原始圖片還沒下載完成之前，先用一張極小的低畫質圖片當作佔位，等實際要顯示的圖載入完成後再替換上去。

為什麼需要 LQIP？

如果只是把 <img> 丟上去什麼都不處理，會遇到兩個問題：

1. 版面跳動（Layout Shift）：圖片載入前沒有預留空間，載入後把其他內容擠開，造成 CLS（Cumulative Layout Shift）分數變差
2. 載入體驗差：圖片從空白到完整顯示的過程中，要嘛是一片空白，要嘛是一條一條慢慢出現，使用者會覺得頁面還在「壞掉」的狀態

LQIP 同時解決了這兩個問題：透過預先知道圖片的寬高比來預留空間，再用一張模糊的縮圖做視覺過渡，整個載入過程會流暢很多。

我的做法

我在自己的照片牆專案 被光保存的瞬間 中實作了這個技術。這個專案會一次顯示大量照片，每張照片又有高解析度的原圖，很適合拿來做這種優化。

整體流程分成三個階段：上傳時預處理、照片牆渲染、Lightbox 原圖載入。

上傳時預處理

在圖片上傳到後端時，我會做三件事：

1. 記錄原圖的寬高：用來計算 aspect ratio，讓前台在任何圖片載入前就能預留正確的空間
2. 產生 blurDataUrl：把圖片壓縮成極小尺寸（寬度大概 20~32px），轉成 base64 字串直接存進資料庫
3. 產生 thumbnail：壓縮成適合在照片牆上瀏覽的中等尺寸縮圖，上傳到儲存空間

1
// 概念上的處理流程
2
const metadata = await sharp(imageBuffer).metadata()
3
const { width, height } = metadata
4

5
// 產生 base64 模糊圖
6
const blurBuffer = await sharp(imageBuffer)
7
  .resize(32)
8
  .blur(1)
9
  .toBuffer()
10
const blurDataUrl = `data:image/jpeg;base64,${blurBuffer.toString('base64')}`
11

12
// 產生 thumbnail
13
const thumbnailBuffer = await sharp(imageBuffer)
14
  .resize(480)
15
  .toBuffer()
16

17
// 儲存：原圖 URL、thumbnail URL、blurDataUrl、寬高

blurDataUrl 是 base64，可以直接跟著 API 回應一起回來，不需要額外的 HTTP 請求。一張 32px 寬的模糊圖通常只有幾百 bytes，對回應大小幾乎沒有影響。

照片牆渲染：blurDataUrl → thumbnail

頁面載入後，每張照片的載入會經過兩個階段：

1. 立即顯示 blurDataUrl：因為是 base64，不需要任何網路請求，頁面一渲染就能看到模糊的佔位圖，同時 aspect ratio 也已經是正確的
2. thumbnail 載入完成後替換：瀏覽器在背景下載 thumbnail，下載完成後替換掉模糊圖

1
<template>
2
  <div
3
    class="image-wrapper"
4
    :style="{ aspectRatio: `${image.width} / ${image.height}` }"
5
    @click="openLightbox(image)"
6
  >
7
    <!-- 底層：blurDataUrl 作為佔位 -->
8
    <img :src="image.blurDataUrl" class="blur-placeholder" />
9

10
    <!-- 上層：thumbnail 載入完成後顯示 -->
11
    <img
12
      :src="image.thumbnailUrl"
13
      :class="{ loaded: thumbnailLoaded }"
14
      class="thumbnail"
15
      @load="thumbnailLoaded = true"
16
    />
17
  </div>
18
</template>

1
.image-wrapper {
2
  position: relative;
3
  overflow: hidden;
4
  cursor: pointer;
5
}
6

7
.blur-placeholder,
8
.thumbnail {
9
  position: absolute;
10
  inset: 0;
11
  width: 100%;
12
  height: 100%;
13
  object-fit: cover;
14
}
15

16
.thumbnail {
17
  opacity: 0;
18
  transition: opacity 0.3s ease;
19
}
20

21
.thumbnail.loaded {
22
  opacity: 1;
23
}

使用者看到的效果是：頁面一打開，所有照片的位置就已經排好，每張都是模糊但有輪廓的樣子。接著 thumbnail 陸續載入完成，一張一張從模糊變清晰，整個過程很順暢，沒有版面跳動。

Lightbox 原圖載入：thumbnail → 原圖

使用者在照片牆上點擊某張照片後，會打開 Lightbox 來查看原始解析度的大圖。這時候又是一次從小圖到大圖的載入過程，一樣可以套用同樣的策略：

1. 先顯示 thumbnail：因為 thumbnail 已經在照片牆階段載入過了，瀏覽器有快取，可以瞬間顯示
2. 原圖載入完成後替換：高解析度原圖下載完成後，替換掉 thumbnail

1
<!-- Lightbox -->
2
<div class="lightbox" v-if="currentImage">
3
  <img :src="currentImage.thumbnailUrl" class="lightbox-placeholder" />
4
  <img
5
    :src="currentImage.originalUrl"
6
    :class="{ loaded: originalLoaded }"
7
    class="lightbox-original"
8
    @load="originalLoaded = true"
9
  />
10
</div>

因為 Lightbox 中的 thumbnail 已經被快取過，使用者點開後會先看到一張稍微模糊但完整的圖，而不是一片空白等原圖慢慢載入。原圖載入完成後再無縫切換成高解析度版本。

三層載入的完整流程

整理一下使用者實際看到的體驗：

每一層都不會出現空白或版面跳動，使用者在任何時刻都能看到「有東西」的畫面。

小結

LQIP 的實作不複雜，核心就是讓每個階段都有東西可以顯示：

1. 上傳時：記錄寬高、產生 base64 模糊圖（blurDataUrl）、產生 thumbnail
2. 照片牆：先顯示 blurDataUrl，thumbnail 載入後替換
3. Lightbox：先顯示已快取的 thumbnail，原圖載入後替換

在圖片量大或原圖解析度高的場景下，這種分層載入的效果會特別明顯。與其讓使用者盯著空白方塊等圖片慢慢冒出來，不如在每個階段都給他一個「夠用」的畫面。