VercelからImage Optimization Source Imagesの使いすぎ警告が来た時の対応

本記事の目的

• NextをVercelにデプロイしているサービスが対象。
• サービスをリリースして数日後に下記の警告がメールで送られてきたので、それへの対処を紹介します。

Hi there,

We're getting in touch to let you know that your Personal Account, 名前, has consumed over 100% of the resources allocated to it during the current 30 day usage period, as per the Fair Use Policy.

You can find your usage summary for the last 30 days below:

Bandwidth: 247.38 MB / 100.00 GB (0.25%)
Serverless Function Execution: 0.50 GB-Hours / 100.00 GB-Hours (0.5%)
Build Execution: 0.60 Hours / 100.00 Hours (0.6%)
Image Optimization Source Images: 1,213 Source Images / 1,000 Source Images (121.3%)
Edge Middleware Invocations: 0.00 million / 1.00 million (0%)
Visit the dashboard for more details about your Personal Account's usage.

Please take immediate action to avoid your account being blocked. Should your resource usage not decrease, your Personal Account will be blocked.

Alternatively, you can create a Pro Team to use for your Projects. By using a Pro Team, you will have access to a greater level of resources more suitable for your use case.

先に結論

毎度違う画像を表示するようなnext/imageに対して、unoptimizedをつけることを検討する。

つまりこういうこと↓

image.tsx

<Image
  src={imageUrl}
  width={90}
  height={90}
  layout="intrinsic"
  alt="cover image"
  objectFit="contain"
  unoptimized //コレを追加！！！！
/>

解説

警告の意味

この警告は

Source Imagesの最適化枚数の制限を超えてるからなんとかせえよ。
なんとかしない場合はアプリ停止するからな

というもの。
Vercelでは色々なリソースの使用量に制限がかかっており、その一つにソース画像の最適化の制限がある。
無料プランで1000枚/月、proプランで3000枚/月。

ソース画像の最適化の制限とは

この「ソース画像（Source Images）」が何かというと、next/imageのsrcに与えている画像のこと。
next/imageはsrcに与えられた画像をソースとして、最適化された画像を表示してくれる。

↓を例に考えると、下のようなコードを書いた場合、ソース画像の最適化は2枚とカウントされる。

image.tsx

<Image src="/hello.png" width="700" height="745" />
<Image src="/world.png" width="700" height="745" />

しかし↓の場合は1枚としてカウントされる。
srcに与えられた画像が同じなら、何回使ってもソース画像の最適化のは1枚とカウントされる。

image.tsx

<Image src="/hello.png" width="700" height="745" />
<Image src="/hello.png" width="1400" height="1490" />

つまり基本的にnext/imageに別の画像を表示するたびにソース画像の最適化カウントが1増えると考えればよい。
これが無料プランの場合は1000枚/月に抑えないとならない。

注意すべきこと

ここで注意するべきが、毎回違う画像を表示するような使い方のときに、毎回ソース画像の最適化をおこなっているとあっという間に1000枚を超えるということ。

自分の場合は、「曲を検索してそのジャケット画像を表示する」みたいな使い方をしているところでこれをやらかした。
曲を検索するたびに7曲くらいのジャケット画像を表示していたため、色々な検索ワードでなんども検索すると、どんどんソース画像の最適化カウントが増していたよう。

このように毎回違う画像を表示する使い方の場合、ソース画像の最適化を行う必要はない。
なので

image.tsx

<Image src={img} unoptimized />

のように、unoptimizedを与えてあげることでソース画像の最適化を行わない（＝カウントが増えない）ようにしてソース画像の最適化カウントを節約する必要がある。

後書き

なお、今回の出来事から無料プランでも1000枚を超えてもいきなりサービス停止ではなく、多少の猶予をくれるということがわかった。
ちなみに自分は対処が遅かったので僕のアプリは無事停止されました。

停止されたサービスはこちら↓（多分9月末くらいには制限解除されて復活してると思います）
【個人開発】推し曲を動的に生成したOGP付きで共有できるサービス「推し曲.com」を作りました

Twitterもやってるので、よければフォローお願いします。
→https://twitter.com/ObataGenta