目次
Vercel の無料プラン（Hobby）で Next.js アプリをホストしていて、Image Optimization の月1,000枚無料枠を超えそう とメールが来た人向けの記事です。即時対応として unoptimized 設定で止血する方法と、恒久対応として 外部CDN/画像配信に切り出す 選択肢を整理します[1]。
届いたメールの内容
ある日、Vercel からこんなメールが届きます。
要約すると「無料枠（1,000枚）の75%を使った、100%に達したらまた知らせる」という警告です。100%を超えると追加課金が発生する可能性があるため、放置できません。
まず使用量を確認する
メール本文の usage リンクから Vercel の使用量ダッシュボードに飛びます。
下の矢印で項目を展開すると、Image Optimization だけが上限に達していることが分かります。
Image Optimization の項目をクリックすると詳細が見られます。一番下の「View Source Images」で、どの画像が変換対象になっているかを確認できます。
私のケース（ChatGPT クローン）では、メニューバーのユーザーアイコンとチャットメッセージごとのユーザー画像が next/image 経由で大量に変換されていました。
対処の選択肢
対処は大きく3パターンあります。状況と要件に応じて選びます。
| 対処 | 特徴 | 向いているケース |
|---|---|---|
A. unoptimized 全体無効化 |
1行で即時止血。ただし画像が原寸配信になる | 個人利用、画像最適化が品質に大して影響しないアプリ |
B. unoptimized 個別無効化 |
大量に出る画像だけ無効化、それ以外は最適化を維持 | アプリの一部だけ画像が多いケース（チャットアイコン等） |
| C. 外部CDN/画像配信に切り出す | Cloudinary・Cloudflare Images・AWS CloudFront 等で恒久対応 | 本番運用、画像最適化の品質を保ちたい場合 |
A: 全体を無効化（即時止血）
next.config.js を1行修正するだけで、プロジェクト全体の Image Optimization を無効化できます[2]。
module.exports = {
images: {
unoptimized: true,
},
};
これで Vercel の Image Optimization カウントは進まなくなります。Vercel のメール対応としてはひとまずこれで十分です。
B: 個別に無効化（バランス重視）
画像の最適化はSEOやLCP（読み込み速度）に効くので、できれば残したい場合の対処です。next/image コンポーネント側で unoptimized プロパティを指定すれば、その画像だけ最適化を無効化できます。
import Image from 'next/image';
const UserAvatar = () => (
<Image
src="/avatar.jpg"
alt="User"
width={500}
height={500}
unoptimized
/>
);
私のケースのように「アプリ内で大量繰り返し表示される画像」だけを unoptimized にすれば、他の重要な画像（OGP画像、トップビジュアル等）は最適化を維持できます。
C: 外部CDN/画像配信に切り出す（恒久対応）
長期的に画像数が増える見込みなら、Vercel の Image Optimization に依存しない構成に切り替えるのが筋です[1:1]。
主な選択肢:
- Cloudflare Images — 月10万枚まで $5/月程度。コスパ良
- Cloudinary — 月25クレジット無料、変換APIが豊富
- AWS CloudFront + S3 — 自分で構築する玄人向け
- imgix — 高機能・高品質、本格運用向け
next.config.js の images.loader を custom に設定して loaderFile で外部画像URLを返すローダー関数を作ると、<Image> コンポーネントを変えずに配信先を切り替えられます。
まとめ
Vercel の Image Optimization 超過は (A) 全体無効化で即止血 → (B) 個別無効化で品質維持 → (C) 外部CDNへ移行で恒久対応 の3段階で考えるとスムーズです。個人利用や暫定運用なら (A) で十分、本番運用や画像数の継続的な増加が見込まれるなら (C) に進むのが投資対効果が高いです。
Next.js のデプロイまわりで他に詰まりがちなトピックは Next.jsでundefinedエラーを防ぐ実践的な対策方法 や Next.jsブログにGiscusコメントシステムを導入する も参考になります。
参考文献
Image Optimization - Vercel Docs (2026-05-10 アクセス) ↩︎ ↩︎
Image Component - Next.js Docs (2026-05-10 アクセス) ↩︎