網站裡圖片往往是最佔空間的資源，如果沒有處理，會拖慢載入速度、影響使用體驗。透過壓縮、Lazy Loading、自適應尺寸等方式，不僅能加快網頁載入，也能減少流量消耗，甚至提升 SEO。今天的重點就是探索如何在 Nuxt 中透過 Nuxt Image 與 Lazy Loading 來達成這些優化。

Nuxt Image 是什麼？

Nuxt Image 是 Nuxt 官方提供的一個圖片最佳化模組（@nuxt/image），用來自動處理和優化網站上的圖片。它的核心目標是 加快載入速度、減少流量消耗、維持畫質。

它能做到：

• 自動調整圖片尺寸：依據不同裝置（手機、平板、桌機）產生合適大小的圖片，不必手動裁切。
• 自動壓縮與轉換格式：像是轉成 WebP / AVIF 這種更省流量的格式。
• Lazy Loading：非首屏的圖片延遲載入，等到快滾動到畫面時才下載。
• 支援多種來源：不論是本地靜態圖片（assets/public）還是外部 CDN，都能處理。
• Nuxt 結合性高：語法類似 <NuxtImg>，用法跟 <img> 很接近，學習成本低

1. 安裝

npm install @nuxt/image-edge

2. 在 nuxt.config.ts 啟用模組

export default defineNuxtConfig({
    modules: ['@nuxt/image-edge'],
})

3. 使用 <NuxtImg>

<NuxtImg src="/images/intro-pic.png" alt="intro-pic"/>

4. 常用屬性
   

所以就把過去有用到 <img> 的地方，改成 <NuxtImg> 就可以了！如此一來就不會花過多的時間、資源在載入高解析度的圖片上，讓使用體驗更好一些！
建議也可以加上alt，意指當圖片尚未載入時顯示的文字，加上後SEO的分數會變高呦。