Skip to Content
比較の観点画像の自動最適化

画像の自動最適化

根拠: Nextra の staticImage と静的 import は、画像の寸法情報に加え、安定した オーサリング、遅延読み込み、レイアウトの挙動を提供します。ただし、この GitHub Pages 向けデプロイの本番設定は images: { unoptimized: true } です。

そのため、このエクスポートでは Next.js によるリサイズ、形式変換、オプティマイザへの リクエストは行われません。オーサリングとレイアウト上の利点は残りますが、この デプロイにおける画像最適化は部分的です。

安定した画像メタデータを持つダイアグラム

next/image を直接使い、propsを細かく制御することもできます:

Nextra banner

ハンズオンでの所見(主観): このサンプルでは、静的エクスポート時の画像の オーサリングとレイアウトの挙動は良好に感じられました。

この2つの画像がこのプロジェクトでどこに配置されているかは アセット配置 を、デプロイ上のトレードオフは 評価 を参照してください。

Last updated on