為什麼我們需要關注Image component
由於前端時間拜讀 今晚來點Web前端效能優化大補帖 了解到前端網站中圖片優化的一些方法(消化完相關知識點會再整理成一篇文章)，於似乎有回頭檢測之前所寫的專案在Image處理上的一些差異，又因為公司專案幾乎都是用Next.js，那就得瞧瞧Next.js 中的 Image 組件究竟幫我做了多少事情。
首先，我們先將一張6000 x 3375且檔案大小為1.5MB左右的圖片放置到public/images/samoyed.jpg。
使用一般的<img>標籤
<img src="/images/samoyed.jpg" alt=""/>
在Slow 3G情況下，不論是Type或是Size都是下載與原始照片同樣的內容，並且耗時1分鐘多去做這件事情。
再來看看LightHouse表現如何。
tip: 若LightHouse 顯示 is warming up 無法執行，可在URL輸入chorme://restart解決
我們可以看到LCP花費了大量的時間(5.3s)，且TTI時間也會受到影響。
( 目前Lighthose已經移除TTI 10%的權重轉至CLS。參考網址 )
這會造成使用者體驗不佳以及影響SEO。
使用<Image> component
<Image src={Samoyed} alt="" />
一樣在Slow 3G的情況下，可以發現Tpye已經被轉換成Webp(檔案差異可參考之前的文章)，Size也只剩下189KB，並且耗時大幅減少至9.59s，在這邊可以先注意我們的圖片被轉換成w=3840&q=75了( 後面會在紀錄為什麼會這樣轉換以及參考依據是什麼)
一樣來看看LightHouse表現如何？
單純將<img/>改變成<Image/> LCP花費時間已經大幅減少。
使用Image component 搭配 sizes Prop
<Image src={Samoyed} alt="" sizes="100vw" />
可以發現 在不同視窗大小下若沒給sizes prop則都是會laod同一個寬度(3840)的照片，若輸入size prop(暫時先給100vw)則會依照不同view去更動要下載的照片寬度，尺寸也會隨之縮小。
再來看一下Element
我們關注一下兩個img tag 裡面的srcset是有不同的。
(srcset相關可參考，文章)
相信有人發現文章一開始提及的3840默默地出現在這邊了 :）
小結：
此篇大概先以各種情況紀錄及印證next/image中的Image component的確是有做到許多優化的，詳細該如何使用後續會持續記錄文章。
詳細Image optimization 可參考官方網站。
參考資料：
https://www.youtube.com/watch?v=ZKG8JBdgSos&ab_channel=ZachGollwitzer
https://web.dev/vitals/
https://nextjs.org/docs/pages/building-your-application/optimizing/images
repo：
https://github.com/kenny02238/Next.js-Image/tree/main/app/component/imgVsImage
