延遲圖片載入需要注意什麼
將不在首屏、非當前必要的圖片延遲載入，可以先把頻寬留給頁面較早需要的資源，減少初始傳輸量，也有機會加快使用者看到主要內容的速度。那該怎麼做，我們就接下來看下去！
非首屏圖片透過 loading="lazy" 延遲載入
對不在首屏、短時間內不一定會被看到的圖片，可以使用 <img loading="lazy">，讓瀏覽器延後載入圖片。這樣初始載入時就能先處理較早需要的資源，避免一開始就下載所有圖片。並且如果圖片最後沒有出現在使用者看到的內容中，也可以省下不必要的網路傳輸。
loading="lazy" 是提供給瀏覽器的提示，不是精準控制載入時機的命令；實際是否載入、何時開始載入，仍會由瀏覽器依照圖片位置與當下條件判斷。
第一個 viewport 內就看得到的圖片，尤其是主要內容或 LCP 圖片，通常應該使用 eager，不要設定 loading="lazy"。因為瀏覽器需要先知道圖片在頁面上的位置，才能決定延遲載入時機；對首屏圖片套用 loading="lazy"，反而可能讓主要內容更晚出現。
如果需求需要依照距離 viewport 多遠開始載入，或是使用自訂的觸發條件，就可以考慮 Intersection Observer。
Intersection Observer
雖然透過 Intersection Observer 可以更細緻地控制圖片的載入時機，但因為需要自行處理觀察器、圖片來源，以及載入完成後停止觀察等邏輯，也會增加實作與維護成本。
例如可以透過 rootMargin 把判定範圍往 viewport 外擴，在圖片真正出現前就觸發 callback。
如果只是要延遲載入 <img>，通常先使用原生 loading="lazy" 就夠了；如果需求複雜到需要自己控制載入時機，或是要處理 CSS background-image 等 loading 不適用的情境，再使用 Intersection Observer 會比較合適！
為什麼要設定圖片寬高
如果圖片還沒有載入完成，而且 HTML 或 CSS 沒有提供它的尺寸，瀏覽器就不知道它應該占據多大的空間，後面的內容可能會先往上排；等圖片載入後，版面又被往下推，造成版面位移 (layout shift)。除了透過 CSS 設定尺寸，也可以透過 HTML 的 width 與 height 屬性提供尺寸，讓瀏覽器在圖片載入前先保留對應的空間，降低 Cumulative Layout Shift (CLS)。
如果圖片寬度會跟著容器變化，可以透過 CSS 的 aspect-ratio 設定圖片比例，讓瀏覽器在圖片載入前先保留對應的空間。下面假設原圖比例是 800 × 450：
<img class="product-image" src="image.png" loading="lazy" alt="商品圖片">.product-image {
display: block;
width: 100%;
aspect-ratio: 800 / 450;
object-fit: cover;
}aspect-ratio 的比例要和實際圖片一致；如果比例不同，object-fit: cover 可能會裁切圖片。若希望完整顯示圖片，可以改用 object-fit: contain。
即使使用 loading="lazy" 也應該設定圖片尺寸，而且寬高比例要和實際圖片一致；這是為了保留正確比例，不是設定任意數字就可以。
<img src="image.png" loading="lazy" alt="商品圖片" width="800" height="450">圖片 Placeholder
圖片延遲載入時，可以在真正圖片出現前提供 placeholder，避免使用者長時間只看到空白，也能讓圖片載入前後的畫面轉換更自然！
常見做法包括：
skeleton：先顯示圖片區塊的佔位樣式，這是很常見的做法，不少 UI 框架也會提供對應元件。實際效果可以參考 這裡；如果目前有使用元件庫，也可以查查看是否有對應的 Skeleton 元件可以使用！LQIP：先產生原圖的低解析度版本，例如縮小後的 JPEG、WebP 或 AVIF，並在原圖載入完成前先顯示。實務上通常會將這張低解析度圖片放大，再搭配模糊效果隱藏像素化與壓縮痕跡，讓使用者先感受到圖片的大致色彩、構圖與內容；等原圖載入完成後，再替換成原圖。實際效果可以參考 這裡SQIP：以 SVG 實作的低品質圖片預覽。它會先分析原始圖片，利用少量幾何圖形與主要色彩近似圖片內容，再搭配模糊效果作為placeholder。相比一般使用低解析度 JPEG／WebP 的 LQIP，SQIP 在不同顯示尺寸下都能維持平滑，但計算成本通常較高，而且呈現效果會更偏向抽象化。實際效果可以參考 這裡
如果頁面重視內容結構的穩定，可以先設定圖片尺寸或比例；如果希望使用者先看到接近原圖的內容，則可以搭配低品質預覽圖。實務上通常會兩者一起做，才能同時穩定版面與改善等待期間的視覺體驗！