More than 3 years have passed since last update.

5分でできる。nuxt/vueで自動画像圧縮の方法（超絶簡単）

Posted at 2021-02-01

画像圧縮って手動でするの面倒ですよねー。
それが、png・jpeg・svgなどそれぞれで圧縮するとなるとさらに面倒ですよねー。
サイトパフォーマンス的にも画像は軽くしておきたいけど、自動でどうかならんかなーって思いますよね。

画像圧縮は自動でやってしまおう

ということで手動で圧縮するのは面倒なので自動で圧縮してもらいましょう！

まず必要なのは
next-optimized-images
が必要です。
あとは、圧縮したい画像形式によって必要な
Optimization Packages
を入れますー。

では、実際にnext-optimized-imagesを入れてみましょう。

yarn add --dev @aceforth/nuxt-optimized-images imagemin-mozjpeg imagemin-pngquant imagemin-svgo

これを叩くだけで入りますー。

あとはnext.config.jsに下記を記述しますー。

next.config.ts

{
  buildModules: [
    '@aceforth/nuxt-optimized-images',
  ],
  optimizedImages: {
    optimizeImages: true
  }
}

これで終わりですーw

ただ、next-optimized-imagesは

optimized for production builds, not development builds.

とあるので、開発では実行されず、本番用で実行されるのがデフォルト設定となってます。
ですので、開発でも実行させたい場合は

next.config.ts

{
  buildModules: [
    '@aceforth/nuxt-optimized-images',
  ],
  optimizedImages: {
    optimizeImages: true,
    optimizeImagesInDev: true,
  }
}

optimizeImagesInDev: true,

を追加するだけで開発でも実行されます。

これで、もう手動での画像圧縮とはおさらばですねー！
素敵な画像圧縮ライフをお送りくださいー。