Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
5
Help us understand the problem. What is going on with this article?
@miyawash

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

目次

画像圧縮について
画像圧縮は自動でやってしまおう
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:

5
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
5
Help us understand the problem. What is going on with this article?