画像の圧縮、手動だとめんどくさいのでNuxtで自動化した備忘録です。
Contents
環境
- nuxt 2.14.3
nuxt-optimized-imagesをインストール
画像圧縮の本体に@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
の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