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
11
Help us understand the problem. What is going on with this article?
@webiscuit

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

More than 1 year has passed since last update.

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]'
  },
11
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
webiscuit
Freelance Front End Developer / フリーランスフロントエンドエンジニア。2002年からコーディングしています。最近はNuxtが好きです。TOEIC920/FCE保持

Comments

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