Nuxt Image

圖片通常是網頁載入速度的瓶頸。Nuxt Image 提供了一套自動化的解決方案，能即時調整圖片大小、壓縮並轉換格式，大幅提升 Core Web Vitals 分數。

安裝與設定

Nuxt Image 是一個官方模組，安裝非常簡單。請在終端機執行以下指令：

Terminal

npx nuxi@latest module add image

安裝完成後，系統會自動更新 package.json。接著，您需要在 nuxt.config.ts 中註冊模組並進行全域設定：

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@nuxt/image'],
  image: {
    // 設定預設選項
    format: ['webp'],
    quality: 80,
  }
})

基本用法

使用 <NuxtImg> 元件取代原生的 <img> 標籤。它會自動生成最佳化的圖片 URL。

自動轉換為 WebP/AVIF
自動調整尺寸 (Resize)
內建 Lazy Loading

app.vue

<template>
  <!-- 自動轉換為 WebP 並調整大小 -->
  <NuxtImg 
    src="/photos/mountain.jpg" 
    width="800" 
    height="500"
    format="webp"
    loading="lazy"
    class="rounded-lg shadow-lg"
  />
</template>

核心功能

格式轉換

自動將 JPG/PNG 轉換為更輕量的 WebP 或 AVIF，減少檔案大小達 50% 以上。

尺寸優化

根據螢幕大小自動提供合適尺寸的圖片，避免在手機上載入 4K 大圖。

延遲載入

預設啟用 Lazy Loading，只有當圖片進入視窗範圍時才開始下載，加快首屏載入速度。

圖片服務商 (Providers)

Nuxt Image 支援多種圖片來源與 CDN。除了預設的本地 IPX 處理器外，也支援第三方服務。

Vercel

Netlify

Cloudinary

nuxt.config.ts

export default defineNuxtConfig({
  image: {
    // 使用 Unsplash 作為圖片來源
    domains: ['images.unsplash.com'],
    
    // 或者設定專屬 Provider (如 Cloudinary)
    provider: 'cloudinary',
    cloudinary: {
      baseURL: 'https://res.cloudinary.com/my-cloud/image/upload/'
    }
  }
})