【Nuxt】nuxt-optimized-imagesで画像圧縮を自動化する

画像の圧縮、手動だとめんどくさいのでNuxtで自動化した備忘録です。

Contents

環境

画像圧縮の本体に@aceforth/nuxt-optimized-imagesを使用するのでインストールします。

$ yarn add --dev @aceforth/nuxt-optimized-images

公式で対応するモジュールをテーブルで一覧化しているので、必要なものがあればここを見てインストールします。
Nuxt Optimized Images

最適化パッケージ	説明
imagemin-mozjpeg	JPEG 画像を最適化
imagemin-pngquant	PNG 画像を最適化
imagemin-optipng	PNG 画像を最適化するための代替手段
imagemin-gifsicle	GIF 画像を最適化
imagemin-svgo	SVG 画像とアイコンを最適化
webp-loader	WebP画像を最適化し、その場でJPEG/PNG画像をWebPに変換できる
lqip-loader	低品質の画像プレースホルダを生成し、画像の支配的な色を抽出することができます
responsive-loader	その場で画像のサイズを変更したり、`srcSet`に対して複数のバージョンを作成したりすることができます。重要: 追加で `jimp` (ノード実装、遅い) か `sharp` (バイナリ、速い) をインストールする必要があります。
sqip-loader	画像をロードし、小さなSQIPプレビューを`image/svg+xml` URLエンコードされたデータとしてエクスポートします。

今回は拡張子がpngとjpgの画像を圧縮したいので、imagemin-mozjpegとimagemin-pngquantの２つをインストールします。

$ yarn add --dev imagemin-mozjpeg imagemin-pngquant

各モジュールがインストールできたら、nuxt.config.jsで設定を有効にします。

  buildModules: [
    '@aceforth/nuxt-optimized-images',
  ],

  optimizedImages: {
    optimizeImages: true,
  },

これで本番環境で画像が圧縮されるようになりました。

ちなみにnuxtのバージョンが2.9以下の場合はbuildModulesではなく、modulesに追加するようです。

デフォルトの設定では本番環境のみで圧縮されるようなので、開発環境でも圧縮を有効にしたい場合には下記を追記します。

  optimizedImages: {
    optimizeImages: true,
    optimizeImagesInDev: true, // 追加
  },