LoginSignup
0
0

Next.jsのImageコンポーネントでICCプロファイル付きの画像を取り扱う場合の注意

Last updated at Posted at 2024-05-10

状況

以下のような環境を考える

  • Next.js
  • Vercel以外でホスティングしている(今回はAWS ECSのNode.jsコンテナ)

問題

  • デザイナーからICCプロファイル付きの画像を渡された
  • Vercel以外でNext.jsをホスティングした場合、最適化後の画像にICCプロファイルが適用されない

Next.jsのデフォルトのImage Loaderはsquoosh

Next.jsの npx next start コマンドで動く productiom モードにおいて、デフォルトのimage loaderとして squoosh が選択される。

squooshは内部的にはWebPコーデックとして libwebp が動いている模様

Sharpを指定する

以下のように

next.config.js
  images: {
    output: 'standalone',
  },

libwebpではデフォルトでICCプロファイルが削除される仕様とのこと

それに対して sharp では libvips が使われている模様

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0