問題

透過 next/image 元件的載入圖片，都會透過 next server 去調整圖片大小，圖片路徑會渲染成:

<img src="https://www.markkulab.com/_next/image?url=https://content.markkulab.com//Images/en-US/Lobby/same_day_rdy_next_01.png&w=1920&q=75"/>

對系統的影響

• next 伺服器渲染的效能的消耗
• docker 映像檔過大

我參考了NZXT的網站，他們也是採用 next js，應該也是用 next/image 載入圖片，因為他們採用　imgix 的縮圖服務，所以沒發生這個問題，

查看next js 官方文件，發現 next/image 的 loader 是可以客製化設定的

images: {
    loader: 'imgix',
    path: 'https://example.com/myaccount/',
  },
}

可行的解決方案

• 啟動 Cloudflare Image Optimization 連結
• 購買 imgix 服務 ( 300 USD / month )
• 自架 image loader，ex: uploadcare or …
• 棄用 next/image，自己寫新的圖片載元件，透過 cloudflare 類似的服務縮圖服務 =>　不建議太麻煩了