1. miyawash

    Posted

    miyawash
Changes in title
+5分でできる。nuxt/vueで自動画像圧縮の方法(超絶簡単)
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,70 @@
+# 目次
+・[画像圧縮について](#画像圧縮について)
+・[画像圧縮は自動でやってしまおう](#画像圧縮は自動でやってしまおう)
+・[next-optimized-imagesを入れてみる](#next-optimized-imagesを入れてみる)
+
+
+## 画像圧縮について
+画像圧縮って手動でするの面倒ですよねー。
+それが、png・jpeg・svgなどそれぞれで圧縮するとなるとさらに面倒ですよねー。
+サイトパフォーマンス的にも画像は軽くしておきたいけど、自動でどうかならんかなーって思いますよね。
+
+## 画像圧縮は自動でやってしまおう
+ということで手動で圧縮するのは面倒なので自動で圧縮してもらいましょう!
+
+まず必要なのは
+[next-optimized-images](https://github.com/juliomrqz/nuxt-optimized-images)
+が必要です。
+あとは、圧縮したい画像形式によって必要な
+[Optimization Packages](https://github.com/juliomrqz/nuxt-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:
+