eureka

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

1

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

環境

  • nuxt 2.14.3

nuxt-optimized-imagesをインストール

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

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

圧縮したい画像に対応したモジュールを追加でインストールする

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

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

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

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

nuxt.config.jsで設定を有効にする

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

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

  optimizedImages: {
    optimizeImages: true,
  },

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

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

開発環境でも画像圧縮をしたいとき

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

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

参考にしたサイト

1