Nuxt Imageで画像を最適化する方法 ― 導入からCore Web Vitals改善まで

# 自動セットアップ（推奨）
npx nuxt module add image

# 手動インストール
npm install @nuxt/image

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/image'],
  image: {
    // 画像オプション
  }
})

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/image'],
  image: {
    quality: 80,
    format: ['webp'],
    screens: {
      xs: 320,
      sm: 640,
      md: 768,
      lg: 1024,
      xl: 1280,
      '2xl': 1536,
    },
    domains: ['example.com'],
  }
})

<template>
  <NuxtImg
    src="/images/hero.jpg"
    alt="ヒーロー画像"
    width="1200"
    height="630"
    sizes="100vw md:80vw lg:1200px"
    quality="80"
    format="webp"
    loading="lazy"
  />
</template>

<template>
  <NuxtPicture
    src="/images/product.jpg"
    alt="製品写真"
    width="800"
    height="600"
    sizes="100vw sm:50vw lg:400px"
    format="avif,webp"
  />
</template>

<NuxtImg
  src="/images/banner.jpg"
  alt="バナー"
  sizes="100vw sm:50vw md:33vw lg:400px"
/>

<!-- 1xと2xの画像を生成 -->
<NuxtImg
  src="/images/icon.png"
  alt="アイコン"
  width="64"
  height="64"
  densities="x1 x2"
/>

<NuxtImg
  src="/images/hero.jpg"
  alt="メインビジュアル"
  sizes="100vw"
  preload
/>

<link rel="preload" as="image" href="/_ipx/w_1280/images/hero.jpg" imagesizes="100vw" imagesrcset="..." fetchpriority="high">

<NuxtImg
  src="/images/content.jpg"
  alt="コンテンツ画像"
  loading="lazy"
  sizes="100vw md:80vw"
/>

<!-- 自動生成のぼかしプレースホルダー -->
<NuxtImg
  src="/images/photo.jpg"
  alt="写真"
  placeholder
  width="800"
  height="600"
/>

<!-- サイズとぼかし量を指定 -->
<NuxtImg
  src="/images/photo.jpg"
  alt="写真"
  :placeholder="[50, 25, 75, 5]"
  width="800"
  height="600"
/>

// nuxt.config.ts - IPXの追加設定例
export default defineNuxtConfig({
  image: {
    ipx: {
      modifiers: {
        quality: 80,
        format: 'webp',
      }
    }
  }
})

// nuxt.config.ts
export default defineNuxtConfig({
  image: {
    provider: 'cloudinary',
    cloudinary: {
      baseURL: 'https://res.cloudinary.com/your-cloud-name/image/upload'
    }
  }
})

<template>
  <NuxtImg
    provider="cloudinary"
    src="/v1234567890/sample.jpg"
    alt="Cloudinary画像"
    width="600"
    height="400"
  />
</template>

<template>
  <!-- デフォルト（IPX）で処理 -->
  <NuxtImg src="/images/local.jpg" alt="ローカル画像" />

  <!-- Cloudinaryで処理 -->
  <NuxtImg provider="cloudinary" src="/remote/photo.jpg" alt="外部画像" />
</template>

<!-- LCP画像のベストプラクティス -->
<template>
  <NuxtImg
    src="/images/hero.jpg"
    alt="メインビジュアル"
    width="1280"
    height="720"
    sizes="100vw lg:1280px"
    quality="85"
    format="webp"
    preload
    :densities="['x1', 'x2']"
  />
</template>

<!-- width/height でアスペクト比を確定 -->
<NuxtImg
  src="/images/card.jpg"
  alt="カード画像"
  width="400"
  height="300"
  loading="lazy"
  class="w-full h-auto"
/>

<NuxtImg
  src="/images/wide-banner.jpg"
  alt="全幅バナー"
  sizes="100vw"
  quality="80"
  loading="lazy"
/>

<NuxtImg
  src="/images/article.jpg"
  alt="記事画像"
  sizes="100vw md:80vw lg:720px"
  quality="75"
  loading="lazy"
/>

<template>
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
    <div v-for="item in items" :key="item.id">
      <NuxtImg
        :src="item.image"
        :alt="item.title"
        width="400"
        height="300"
        sizes="100vw sm:50vw lg:33vw"
        quality="70"
        loading="lazy"
      />
    </div>
  </div>
</template>

<NuxtPicture
  src="/images/photo.jpg"
  alt="風景写真"
  sizes="100vw md:80vw lg:960px"
  format="avif,webp"
  quality="80"
  loading="lazy"
/>

// nuxt.config.ts - SSG向け設定
export default defineNuxtConfig({
  image: {
    // SSG時は自動的にipxStaticが使用される
    // staticFilenameでファイル命名規則を指定可能
    staticFilename: '[publicPath]/images/[name]-[hash].[ext]',
  }
})

// nuxt.config.ts
export default defineNuxtConfig({
  image: {
    domains: [
      'images.unsplash.com',
      'cdn.example.com',
    ],
  }
})

<NuxtImg
  src="https://images.unsplash.com/photo-xxxxx"
  alt="Unsplash画像"
  width="800"
  height="600"
  loading="lazy"
/>

// nuxt.config.ts
export default defineNuxtConfig({
  image: {
    presets: {
      thumbnail: {
        modifiers: {
          width: 200,
          height: 200,
          fit: 'cover',
          quality: 60,
          format: 'webp',
        }
      },
      hero: {
        modifiers: {
          width: 1280,
          height: 720,
          fit: 'cover',
          quality: 85,
          format: 'webp',
        }
      },
    }
  }
})

<template>
  <!-- presetsを適用 -->
  <NuxtImg preset="thumbnail" src="/images/avatar.jpg" alt="アバター" />
  <NuxtImg preset="hero" src="/images/hero.jpg" alt="ヒーロー" />
</template>

<!-- NG: assets内の画像 -->
<NuxtImg src="~/assets/images/photo.jpg" />

<!-- OK: public内の画像 -->
<NuxtImg src="/images/photo.jpg" />