【Nuxt.js】画像最適化モジュール@nuxt/imageの使い方

画像最適化の必要性

WEBサイトで画像を使用している場合、ファイルサイズが大きいとページの読み込みに時間がかかってパフォーマンスが低下してしまいます。

ファイルサイズをできるだけ縮小させることができれば、パフォーマンスは向上します。

パフォーマンスを上げるにはデバイス毎に適した画像を用意して、imgタグのsrcsetやpictureタグに設定する必要がありますが、@nuxt/imageを使用すると自分で画像を複数枚用意する必要がなく、パラメーターを設定するだけで自動で最適化した画像を生成してくれます。

@nuxt/imageの導入

https://image.nuxtjs.org/

インストール

ターミナル

npm install -D @nuxt/image

初期設定

nuxt.config.jsを編集します。

nuxt.config.js

export default {
  target: 'static',
  ssr: true,
  ...
  buildModules: ['@nuxt/image'], // 追記
  ...
  // 以下追記
  image: {
    provider: 'static', // デフォルト（画像をstaticフォルダに配置します）
    // オプション
  }
}

nuxt-imgタグの使い方

index.vue

<nuxt-img
  src="/images/test.png" // static/imagesフォルダの場合
  quality="80" // 生成する画像の画質
  format="webp" // 画像フォーマット
  loading="lazy" // 遅延読み込み
  sizes="sm:80vw md:50% lg:400px xl:300px" // レスポンシブ
/>

sizesオプション

sizesオプションでは、sm、md等事前定義された画面サイズ以下の時(max-width)に表示する画像サイズを設定できます。

サイズはビューポート、px、%で指定できます。

nuxt.config.jsで事前定義されたサイズを上書き可能です。

事前定義されたサイズ

export default {
  image: {
    // 以下の値を上書き可能
    screens: {
      xs: 320,
      sm: 640,
      md: 768,
      lg: 1024,
      xl: 1280,
      xxl: 1536,
      '2xl': 1536
    },
  }
}

画像パス

画像はデフォルトではstaticフォルダに保存する必要がありますが、nuxt.config.jsでdirオプションを設定することでassetsフォルダの指定パスを参照することができるようになります。

nuxt.config.js

export default {
  image: {
    provider: 'static',
    dir: 'assets/images' // assets/imagesフォルダを参照する
  }
}

index.vue

<nuxt-img
  src="/test.png" // assets/images/test.png
/>

他にもproviderオプションで外部の画像を使用することも可能です。

nuxt-picture

nuxt-imgタグと同様のオプションでnuxt-pictureも用意されています。

nuxt-pictureタグの使い方

使い方はnuxt-imgと同様です。

sourceのmedia属性の設定方法はドキュメントに記載がありませんでした。

index.vue

<nuxt-picture
  src="/test.png" // assets/images/test.png
  quality="80" // 生成する画像の画質
  loading="lazy" // 遅延読み込み
  sizes="sm:80vw md:50% lg:400px xl:300px" // レスポンシブ
  class="opt-picture" // クラス指定（pictureタグ）
/>

CSSの適用

nuxt-pictureでsource、imgタグにCSSを適用するためにはディープセレクタを使用する必要があります。

index.scss

.opt-picture {
  & ::v-deep source,
  & ::v-deep img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

注意

client-onlyタグで囲っているとサーバーサイドで画像が生成されないため、nuxt-img、nuxt-pictureが効かなくなります。

まとめ

Nuxt.jsの画像最適化モジュール@nuxt/imageのインストール方法、設定、使い方について解説しました。

Nuxt.jsの画像最適化方法は、Nuxt Optimized Imagesを使用した方法がよく見られますが、nuxt/imageを使用しても画像最適化をすることができましたので試用してみてはどうでしょうか。

参考：https://image.nuxtjs.org/