Mark Ku's Blog
首頁 關於我
解決 Nextjs image loader 造成,docker image 肥大的問題
Frontend
解決 Nextjs image loader 造成,docker image 肥大的問題
Mark Ku
Mark Ku
July 26, 2022
1 min

問題

透過 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 類似的服務縮圖服務 => 不建議太麻煩了

Tags

Mark Ku

Mark Ku

Software Developer

8年以上豐富網站開發經驗,直播系統、POS系統、電子商務、平台網站、SEO、金流串接、DevOps、Infra 出身,帶過幾次團隊,目前專注於北美及德國市場電商網站開發團隊。

Expertise

前端(React)
後端(C#)
網路管理
DevOps
溝通
領導

Social Media

facebook github website

Related Posts

NEXTJS 13.3.4 昇級踩坑筆記,Server side component 時代來臨 - migrate page route to app route
NEXTJS 13.3.4 昇級踩坑筆記,Server side component 時代來臨 - migrate page route to app route
May 27, 2023
1 min

Quick Links

關於我

Social Media