LoginSignup
11

More than 3 years have passed since last update.

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

Posted at

目次

画像圧縮について
画像圧縮は自動でやってしまおう
next-optimized-imagesを入れてみる

画像圧縮について

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

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

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

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

next-optimized-imagesを入れてみる

では、実際に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,

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

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11