網頁如何做到體驗很好的圖片載入

你有沒有想過相簿相關的 Web 服務如何同時載入那麼多張圖，但又不會讓體驗感覺很糟糕？

當一個網頁很多張圖時，最常見的情況是會因為圖還在下載的情況，導致某些畫面還在渲染，讓網站感覺很慢似的。

這時候有幾種做法：

1. 為圖片加上 lazy loading

例如：

<img src="image.jpg" alt="..." loading="lazy" />

img 標籤的 loading="lazy" 屬性會讓瀏覽器優先載入螢幕可顯示的區域，其他超出區域的圖片就會延遲載入，直到使用者滑到接近的區域時，才開始載入。

這個方法真的很簡單，只是 loading 屬性 Safari 還未支援，如果客戶有用 Safari 的話，就得自己實作 lazy loading 。

不過 lazy loading 還是無法解決圖檔太大時，下載需要時間的問題，使用者還是會看到空白區域⋯⋯。

這時需要：

2. 除了壓縮圖檔之外，還可以用 1 個經過高斯模糊的影像當圖片背景，由於這個背景經過處理，所以 image size 會非常小，使用者可以很快看到畫面中有模糊的區域，讓使用者可以意識到圖片正在處理中，接著等到真正的圖片下載完成之後，真正的圖片就會蓋掉模糊的背景（此時也可以用 js 把模糊背景去除）

這就是體驗較好的圖片載入流程介紹，想知道詳細的話可以看留言的 YT 影片，時間約 15 分鐘，但是講解得很清楚！

How to Load Images Like a Pro