Nuxtの画像圧縮をNuxt Optimized Imagesにしてみた

1743 ワード
画像圧縮 nuxt imagemin imagemin テキストリンク

TL;DR

インストールして数行追加で完全自動で画像圧縮してくれる Nuxt Optimized Images がとても便利だった。

使用した経緯

いつものNuxt環境でコーディングしていたら
IE11およびSafariで画像が正しく表示されない現象が発生しました。

原因はどうやら圧縮後の画像の形式が実際の画像形式と違うため。
「○○イメージをデコードできません。」のようなエラーメッセージが出ていました。

真っ先に疑ったのは画像圧縮モジュール。
「nuxt-imagemin」を使っていて、いろいろ検索してみたけれど
同様の現象が起きてる情報など発見できず。

もしかすると自分の設定が悪いのかも…と思ってドキュメントを見たけど、特別おかしなことをしているようでもない。
というか以前から思っていたけどドキュメントがちょっと見づらい…

もうめんどくさくなったので、一旦別のものに変えてみようと
gitのスターの数がより多い「Nuxt Optimized Images」を入れてみたら、即問題なく動きました
ダメならモジュールジプシーか…と思ってたので安心しました（笑）

設定など

ドキュメントにあるようにmodulesに設定してあげるだけでよくて
外部の圧縮プラグインをインストールするだけ。
後はモジュールで勝手に判断してくれるので、特別な設定は不要。
とりあえず「imagemin-mozjpeg」と「imagemin-pngquant」あたりをインストールしてます。

私はgenerate時の画像はハッシュとかではなく、指定した名前そのままで書き出したいので
オプションは以下な感じにしました。

  modules: [
    '@bazzite/nuxt-optimized-images'
  ],
  optimizedImages: {
    optimizeImages: true,
    imagesName: ({ isDev }) => isDev ? '[path][name][hash:optimized].[ext]' : 'img/[name].[ext]'
  },