Help us understand the problem. What is going on with this article?

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

TL;DR

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

使用した経緯

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

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

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

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

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

設定など

ドキュメントにあるように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]'
  },
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.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした