はじめに
ヘッドレスEC（ShopifyなどのEC基盤と、見た目のページを分けて作る構成）に切り替えたあと、「ホスティングの請求額が想定より高い」「セール時期にページが重くなる」という悩みに行き当たることがあります。調べていくと、原因が商品画像の配信方法だった、というケースは少なくありません。
運営しているモーターサイクル用品のECサイトでも、まさにこの問題に直面しました。この記事では、ヘッドレス構成にすると画像配信の何が変わるのか、そのままにしておくと負荷と費用がどのくらい増えるのかを、技術者ではない方にも分かるように整理します。読み終わる頃には、「自分のサイトは対策が必要かどうか」を判断できるようになるはずです。
ヘッドレス化で画像の「通り道」が変わる
従来のShopifyテーマでは、画像はShopify任せだった
従来のShopifyテーマでは、商品画像はShopifyのCDN（世界各地に置かれた配布拠点のネットワーク）から直接ユーザーへ届きます。
図を一言でまとめると、「画像に関する仕事は、全部Shopifyが引き受けてくれていた」という状態です。リサイズも軽量化も配信もShopify側で行われるため、運営者が画像のことで悩む場面はほとんどありません。
ヘッドレス構成では、自分のサーバーが画像係になる
ヘッドレスにすると、ページを届けるのは自分で用意したホスティング（VercelやAWSなど、作ったページを載せておく置き場所）になります。このとき画像の通り道も変わり、構成によっては自分のサーバーが「画像の取得・変換・配信」をすべて引き受けることになります。
つまり、これまでShopifyが担っていた画像の仕事が、そっくり自分のサーバーに移ってくるわけです。Next.jsの画像表示機能（Next.js Image）を使った場合も、変換のたびにホスティング側の処理回数を消費する点は同じなんですよね。
放置すると何が起きるのか
サーバーの処理が画像だけで埋まる
商品一覧ページには、1ページで20〜50枚の画像が並びます。その1枚ごとに元画像の取得、リサイズ、フォーマット変換（WebPなど軽い形式への変換）、圧縮という処理が走るため、アクセスが増えるほどサーバーの計算資源が画像処理に取られていきます。セール時期のようにアクセスが集中する場面では、画像処理が追いつかず、サイト全体の表示が遅くなることもあります。
ホスティング費用が変換回数に比例して増える
Vercelの画像最適化は変換回数に応じた課金で、プランに含まれる回数を超えると超過料金が発生します。商品数が多いECサイトでは、この上限を早い段階で超えがちです。月間10万PVで1ページ平均20枚の画像なら、単純計算で月200万回の画像リクエスト。キャッシュ（一度変換した画像の使い回し）が効いたとしても、無視できない金額になります。AWSで変換の仕組みを自作した場合も、実行時間とリクエスト数に応じた費用がかかる点は変わりません。
キャッシュが増えるほど管理が複雑になる
同じ商品画像でも、表示サイズ（1x・2x・3x）とフォーマット（WebP・AVIF・JPEG）の組み合わせごとに別のキャッシュが必要になります。商品500点、1商品5枚の画像なら元画像は2,500枚ですが、バリエーションを掛け合わせるとキャッシュすべき画像は1万5,000枚規模。新商品の追加や画像の差し替えのたびにキャッシュが無効になるため、商品の入れ替わりが激しいサイトほど「変換し直し」が頻発します。
対策が必要なサイトの見分け方
影響が大きくなりやすい条件
次の条件に当てはまるほど、画像配信の負荷と費用は増えやすくなります。
- 商品数が数百〜数千点ある
- アパレルや雑貨など、商品の入れ替わりが多い
- ファッション・インテリアなど高解像度の画像を使っている
- セール時期にアクセスが集中する
- 海外にもユーザーがいて、各地域への配信が必要
逆に、商品数が数十点でアクセスも穏やかなサイトであれば、標準の仕組みのままでも当面は問題になりにくい、という判断もできます。
試算してみると規模感がつかめる
対策の要否を判断するときは、「商品数 × 1商品あたりの画像数 × サイズとフォーマットの組み合わせ」でキャッシュすべき枚数を、「月間PV × 1ページの画像枚数」で月の画像リクエスト数をざっくり出してみるのがおすすめです。運営中のサイトで試算したところ、対策なしの場合の超過費用は月数万円規模になり得ると分かり、構成の見直しを決めました。数字にすると、判断が具体的になります。
解決の方向性 — 画像の仕事を専門サービスに預ける
対策の基本方針は、画像の変換と配信を自分のサーバーから切り離し、外部の画像配信サービスに預けることです。代表的なサービスがCloudinary（クラウディナリー。画像の変換・最適化・配信を専門に行うクラウドサービス）で、Shopifyの商品画像をCloudinaryに流して配信する構成にすると、自社サーバーの画像負荷をゼロにできます。
従来のShopifyテーマで「Shopifyが画像係だった」のと同じ役割分担を、ヘッドレス構成でも専門サービスに任せて作り直す、という発想です。具体的なサービスの中身と選び方、実際の構築手順は、続きの2記事で解説します。