画像CDNとキャッシュ戦略 — Cache-Control/ETag/指紋付きURLの実務
画像は一度整えたら長く使う資産。配信でつまずくのは多くがキャッシュ戦略です。 本稿は Cache-Control/ETag/immutable とURL指紋（ハッシュ/バージョン）、CDNにおけるオリジン運用まで 「壊さず速い」最短構成を、失敗例とチェックリスト込みで解説します。
要点（TL;DR）
- 配信URLは指紋付き（例:
hero_v2.webpかハッシュ）。 - HTTPヘッダは
Cache-Control: public, max-age=31536000, immutableを既定、 差し替えは新URLで。 - オリジン短め、CDN長め。Purgeか新URLで即時反映。
- OGP/サイトマップは絶対URL＋HTTP200。壊れやすい所から守る。
1. なぜ“URL指紋＋immutable”が最短か
長期キャッシュは速くても差し替えが難点。そこでURLを変えられる設計にします。URLが変われば古いキャッシュは使われず、 CDNでも即時に新画像へ切替わります。検証型（ETag/Last-Modified）に頼るより事故が少なく、構成も簡単です。
命名の例
slug_hero_v1.webp → 差し替え時は slug_hero_v2.webp。あるいはビルドでハッシュを付与。2. 実務レシピ（ヘッダとキャッシュの分担）
| 場所 | 設定 | 意図 |
|---|---|---|
| CDN | public, max-age=31536000, immutable | 世界中に長期配布。差し替えは新URL/個別Purge。 |
| オリジン | public, max-age=300（例） | 編集時の更新性を確保。CDNが上書き。 |
3. ケーススタディ
ブログのヒーロー画像をリニューアル。CDNはimmutableのため反映されず…という事故を、 ファイル名を hero_v1.webp→hero_v2.webp に変えるだけで一瞬で解消。 ついでに古いOGPも絶対URLで差し替え、SNSデバッガで再取得して確実に更新しました。
4. よくある落とし穴
- 指紋なしでimmutable → 更新できずに延々古い画像。
- OGPを相対URL → クローラが取得できず無地カード。
- ETag頼みで多地域CDNの整合が乱れる。
5. 公開前チェックリスト
- URLは指紋付き（ハッシュ or v2）。
- 画像は サイトマップ・OGPとも絶対URLでHTTP200。
- CDN/オリジンのCache-Controlを分けた。
- 差し替え手順（新URL/Purge）が運用に書かれている。
6. FAQ
サムネやOGPもimmutableで良い？
指紋付きURLにしておけばOK。頻繁に差し替える運用はPurgeの癖を掴むまでmust-revalidateでも可。
ETagとハッシュは併用すべき？
どちらかで十分。指紋化していればETagはオプションです。検証型を使うときはETag/Last-Modifiedを統一的に出すこと。
7. まとめ：URLを変えられる設計が最短
キャッシュ設計の肝は“壊さず差し替える”こと。URL指紋＋長期キャッシュ、これさえ守れば配信は安定します。 画像自体の最適化は /compressor と /compare で仕上げましょう。