はじめに

今回の記事では、

next/image の役割と料金
minimumCacheTTL の意味とデフォルト（1分）の課題
minimumCacheTTLの設定方法

についてお話します。

next/imageとは

next/image は、Next.js が提供する画像最適化コンポーネントです。<Image>タグで使うやつですね。
ユーザーの端末やネットワーク条件に応じて、適切なサイズ・フォーマット（WebP/AVIF など）へ自動変換し、/_next/image経由でCDNキャッシュと併用して配信してくれます。

　
デフォルトでは、キャッシュの最短TTL（minimumCacheTTL）は60秒となっています。
これは、画像の更新頻度が低いサイトにおいては短すぎるため、同じ画像でも最適化処理が再実行されやすく、コスト・レスポンスのパフォーマンス両面に悪影響を与える可能性があります。

参考：Next.js Image_minimumcachettl

https://nextjs.org/docs/app/api-reference/components/image#minimumcachettl

Vercelの画像最適化の料金体系

【注意】最新の料金は公式サイトを確認してください。
https://vercel.com/pricing

Vercelの画像最適化は、以下の3メトリクスで計測・課金されています。
- 「画像変換（Image transformations）」・・・画像のリサイズ、フォーマット変換、最適化処理の回数
- 「画像キャッシュ読み取り（Image cache reads）」・・・最適化済み画像をキャッシュから読み取る回数
- 「画像キャッシュ書き込み（Image cache writes）」・・・最適化した画像をキャッシュに書き込む回数
  ※キャッシュHITは“read”、MISS/STALEは“transform + write”としてカウントされるようです。

プランごとの料金比較表

機能項目	Hobbyプラン（無料）	Proプラン	Enterpriseプラン
Image Transformations（画像変換）
- 無料利用枠	5,000回/月	10,000回/月	カスタム
- 超過料金	利用不可	$0.05 per 1K変換〜	カスタム価格
Image Cache Reads（画像キャッシュ読み取り）
- 無料利用枠	300,000回/月	600,000回/月	カスタム
- 超過料金	利用不可	$0.40 per 1M読み取り〜	カスタム価格
Image Cache Writes（画像キャッシュ書き込み）
- 無料利用枠	100,000回/月	200,000回/月	カスタム
- 超過料金	利用不可	$4.00 per 1M書き込み〜	カスタム価格

Hobbyプラン（無料）

対象: 個人・非営利利用
制限: 無料枠を超えた場合は追加利用不可
月額料金: $0

Proプラン

対象: 小規模チーム・商用利用
従量課金: 無料枠を超えた分は使った分だけ支払い
月額基本料金: チーム1席あたり$20

Enterpriseプラン

対象: 大規模企業・エンタープライズ
カスタム設定: 利用量に応じた個別価格設定
月額料金: カスタム価格（要相談）

transformations-basedへの移行

過去のモデルでは、各請求期間中の「ユニークなソース画像数」に基づき、プランごとに上限・超過課金が決まる方式でした。現在はレガシーとして扱われ、変換ベースでの課金体系への移行が誘導されています。

項目	内容
課金モデル	請求期間内のユニークなソース画像数（プラン依存）
推奨	ダッシュボードの設定から「変換ベース（transformations-based）」への切り替えが可能

よって、画像があまり変わらないのであれば、「キャッシュヒット率を上げて、最適化処理を減らす」が基本方針となるわけです。

minimumCacheTTLの設定例

例えばブログ記事などの場合、投稿した画像ってめったに変えませんよね。
そういったケースの場合は、next.config.jsの設定にminimumCacheTTLの設定を追加して、TTLを長めに設定するだけです。

module.exports = {
  images: {
    minimumCacheTTL: 2678400, // 31日。未指定の場合のデフォルトは1日です。
  },
}"

ちなみに

今回は解説しませんが、他にも、画像の最適化は色々あるので、興味があれば調べてみてください。

sizes を適切指定して、不要なサイズの画像生成を抑制（ただし、サイズのバリエーションが多くなるほどキャッシュヒット率は下がります。）
重要な画像のみ priority を付与、その他は loading="lazy"
元画像の解像度/圧縮も見直し（オーバースペックな原本の画像は変換・配信の両方でコスト増につながる）
quality 等のパラメータをプロジェクト規約で統一し、キャッシュ断片化を抑制
そもそも最適化が不要な画像やアイコン等は、フレームワークの設定（Next.jsのunoptimized）で最適化をバイパスすると無駄な変換を減らす

おわりに

本ブログのサイトでも、ちょっと遅いよなあ・・・と感じていたの画像表示までの速度を上記のminimumCacheTTLの設定を見直すだけで、ずいぶん改善させることができました（他の最適化もしているといえばしているのですが）。

アイキャッチ画像の表示などが重要なページとかだと、こういう部分の設定が現状どうなっていたか、一度見直ししてみることをおすすめします。

それでは、また。

HTNCode