你知道嗎？在網路的世界裡，我們對於等待是有多不耐煩的。

特別是當我們正在迫不及待地想看到那張美麗的照片時，但你的網站就是不給力，好像一開始進去都是空白頁面...

這時，你只希望有個魔法可以立刻呈現照片！好消息，這篇文章就想告訴你一些技巧可以實現這個願望！

Image Preload with FadeIn Effect

看過電影中的魔法特效嗎？當一物件慢慢從透明到實體化，感覺超酷炫！這種方法就是讓你的網頁圖片也能如此。首先，你會載入兩張圖片，一大一小。當大圖載入完成，小圖會神奇地淡出，好像被魔法幫助一樣！

Image load with image src/srcSet tag

其實在不同裝置的螢幕寬度我們可以，我們可以利用這個標籤去渲染不同的尺寸的圖片，讓我們看一看怎麼做吧。

使用 background-image（Background Image Preload）

當我們談到時尚時，背景圖像就像是模特兒上的服飾，有時候非常重要。但你知道在技術層面，使用背景圖像有些注意事項嗎？其實，瀏覽器會稍微等待，讓你的其他元素（如文字）首先展現。另外，如果你突然決定讓背景圖像"消失"（使用display:none;），瀏覽器實際上還是會偷偷下載它！

Lazy Loading：網站的「懶人沙發」

我們都知道，有時候放鬆和稍微休息一下是很好的。告訴瀏覽器可以緩加載。

Intersection Observer API大招

我們也可以掛一個原生監聽器，去偵測是否滾動到可視範圍，再去加載，next/image就是這樣去做優化的。

好啦！現在你已經是圖片載入優化的大師了！無論是FadeIn、srcSet、background-image還是更主動優化的Intersection Observer API大招 ，你都掌握得宜！希望你能運用這些技巧，為你的網站帶來更好的使用者體驗。

參考資料:

Image Preload with FadeIn Effect
從NextJS的封裝的Image元件看如何優化圖片加載