画像 & 動画 CDN + メディア最適化 2026 完全ガイド - Cloudinary · Imgix · ImageKit · Bunny CDN · Cloudflare Images · Mux Video · Fastly Image Optimizer · Vercel Image · Next.js Image · AVIF · WebP 徹底解説

はじめに — 2026年5月、メディアCDNが再び熱い理由

2026年Q1時点で、Webページの平均重量はモバイル2.4MB、デスクトップ2.9MB(HTTP Archive Web Almanac 2026先行データ)を突破した。このうち50%以上が画像と動画である。Core Web VitalsのLCP閾値2.5秒を守るには、結局何を、いつ、どのフォーマットと解像度で配信するかがすべてだ。

そこに2024〜2026年のAIコンテンツ爆発が乗っている。ECの商品写真はStable Diffusion系パイプラインが自動生成し、ショート動画はRunway · Pika · Lumaが生成する。原本アセット数そのものが爆増し、変換回数も伸びた。「原本1枚に対してバリアント30枚」が普通の時代だ。

本記事では、画像CDN + 動画CDN + メディア最適化スタックを2026年5月時点で、SaaS、ハイパースケーラー、フレームワーク統合、セルフホストまで一度に見る。最後に韓国・日本のローカルCDN選択肢、AI補正フロー、コスト最適化パターンまで整理する。

メディアCDNが解くべき5つの問題

画像 · 動画CDNは単に「速く送る」だけではなく、5つの問題を一箇所で解かなくてはならない。

フォーマット交渉(format negotiation): ブラウザごとに AVIF / WebP / JPEG XL / HEIC のサポートが異なる。Accept ヘッダーと User-Agent から最適なフォーマットを選ぶ。
サイズ・クロップ変換: 同じ原本を 200px · 400px · 800px · 1600px にスライス。art direction が必要なら srcset · picture 要素と連携する。
品質交渉(quality): q=auto:eco vs q=80 vs lossless。Save-Data ヘッダーやモバイル網の推定値を見る。
エッジキャッシュ: 200+ POPにキャッシュ。初回 origin → 変換 → キャッシュ、以降はエッジヒット。
メタデータ・セキュリティ: signed URL、EXIF除去、ウォーターマーク、DRM(動画)。

この5つを全部できれば「画像CDN」、動画トランスコードが加われば「動画CDN」、資産管理・コラボまで加われば「DAM(Digital Asset Management)」になる。

画像SaaS CDN — 5強を一望する

画像に特化した SaaS CDN のうち、2026年時点の市場シェアでは事実上5社が市場を分け合う。

Cloudinary: イスラエル発のSaaS。2025年から GenAI Suite(Generative Fill、Background Removal、AI Upscale)を正式リリース。最も豊富な変換カタログ。無料 25 monthly credits。
Imgix: URL ベース変換の正攻法。シンプルな query param API。米国市場で強い。
ImageKit: インド発、コスパチャンピオン。Cloudinary 互換 API + より低価格。
Bunny.net Optimizer + Bunny Stream: スロベニア発。画像 + 動画 CDN 統合、価格設定が非常に攻撃的。
Uploadcare: ウクライナ発。DAM寄り。アップロードウィジェット + 変換 + CDN がまとまる。

副選択肢として Sirv、Cloudimage、Kraken.io(Internet Marketing Ninjas)、KeyCDN Image Processing、Optimole も健在。グローバルトラフィックではなく特定リージョン中心のサイトなら、わざわざ Cloudinary の値段を払う理由はない。

Cloudinary — 変換カタログと GenAI

Cloudinary の強みは単純な変換ではなく変換カタログの圧倒的な量である。2026年5月時点で、以下はすべて URL 1行で可能だ。

https://res.cloudinary.com/demo/image/upload/
  w_800,h_600,c_fill,g_auto,q_auto:eco,f_auto/
  e_background_removal/
  l_text:Arial_60_bold:Hello/
  sample.jpg

主要トランスフォーム:

f_auto: フォーマット自動交渉(AVIF/WebP/JPEG XL/JPEG/PNG)。
q_auto: 品質自動(eco、good、best)。
c_fill,g_auto: AI gravity。顔・被写体を自動検出してクロップ。
e_background_removal: 2024 GA。背景自動除去。
e_gen_fill: 2024 GA。Generative Fill による outpainting。
e_gen_replace:prompt_to: 領域置換。2025年正式リリース。

料金は monthly credits 方式。1 credit ≈ 1,000 変換または 1GB 保存または 1GB 配信。無料 25、Plus 225、Advanced 600、それ以上は Enterprise 交渉。

セルフホストを強制するなら Cloudinary は選択肢に入らない。代わりに Sharp + imgproxy の組み合わせで一部のトランスフォームを模倣する。

Imgix — URL-only transforms の極致

Imgix は「URL パラメータだけで全部やる」というシンプルさを最後まで突き通す。同じ変換を Imgix で書くと:

https://example.imgix.net/sample.jpg
  ?w=800&h=600&fit=crop&crop=faces
  &auto=format,compress&q=70

主要パラメータ:

auto=format: フォーマット自動交渉。
auto=compress: 品質自動。
fit=crop&crop=faces または crop=entropy: AI クロップ。
mask=ellipse など: マスク変換。
blur=20: ぼかし。

Imgix は変換カタログが Cloudinary より短いが、URL キャッシュキーがすっきりしている。変換カタログを GenAI まで広げず、正統な画像変換に集中する。価格は Standard $75/mo(100K masters、100K rendered)、Premium$ 300/mo。master image 単位の課金が特徴的。

ImageKit — インド発のコスパチャンピオン

ImageKit は Cloudinary と API 互換を保ちつつ、価格を半分以下に設定する。URL の形は:

https://ik.imagekit.io/demo/tr:w-800,h-600,fo-face,q-80,f-auto/sample.jpg

tr: プレフィックスが transformation、カンマで chain する。主要:

f-auto: フォーマット自動。
q-80: 品質。
fo-face: focus on face。
w-800,h-600,c-maintain_ratio: 比率維持リサイズ。
e-bgremove: 背景除去(有料アドオン)。

料金は無料20GB配信、Custom plans は GB-bandwidth 単位の課金なので、トラフィックの大きいサイトでは Cloudinary 比 30〜60% の削減事例が報告されている。

Bunny.net — スロベニア発の統合メディアスタック

Bunny.net は CDN + Bunny Optimizer + Bunny Stream をひとまとめにし、画像と動画を1アカウントで管理できる。価格は圧倒的だ。

Bunny CDN: GBあたり $0.01〜$ 0.06(リージョン別)。
Bunny Optimizer: 追加 $9.5/mo(固定)、以降は無制限変換。
Bunny Stream: 動画エンコード $0.005/min、配信$ 0.005/GB。

Optimizer は URL query で動く。

https://example.b-cdn.net/sample.jpg
  ?width=800&height=600&aspect_ratio=4:3
  &quality=80&format=auto&optimizer=image

伝統的な CDN の上に変換レイヤーを乗せる形なので、「既存 origin の資産はそのままに、変換だけ追加する」シナリオによく合う。

ハイパースケーラー画像サービス — Cloudflare · AWS · GCP · Azure

既存のハイパースケーラー CDN も画像変換を1級市民として扱う。

Cloudflare Images + Cloudflare Stream: 2026 基準で、Cloudflare Images は変換あたり課金モデルと plan-based モデルの両方を提供。画像 storage $5/100K images、transform$ 0.50/1K、配信無料。Cloudflare Stream は分あたりエンコード $5/1K min、配信$ 1/1K min。
AWS CloudFront + Lambda@Edge / CloudFront Functions + S3 Image Optimization: AWS Solutions Constructs の中で serverless-image-handler が標準パターン。Sharp を Lambda に乗せて query param で変換。
GCP Cloud CDN + Cloud Run + libvips: GCS origin → Cloud Run 関数 → Cloud CDN edge。自前実装の比重が大きい。
Azure CDN + Azure Front Door + Functions: Azure は Image Processing API が弱いので Functions + ImageSharp(.NET) または Sharp で埋める。

フラット価格(Cloudflare)と従量価格(AWS / GCP / Azure)が分かれるが、トラフィックパターンが安定していれば Cloudflare が単純かつ安い。

フレームワーク統合 — Next.js Image · Astro Image · SvelteKit · Nuxt · Gatsby

フロントエンドフレームワークが画像コンポーネントを1級として扱い始めたのは Next.js 10(2020)からだ。2026年5月時点の標準は以下のとおり。

Next.js Image + Vercel Image Optimization: 従量制。Pro plan に 5,000 transforms 含む、以降は transform あたり $0.005。Local + Remote loaders 両対応。
Astro Image (astro:assets): build-time 変換 + runtime Sharp。静的サイトに最強。
SvelteKit + enhanced:img (Vite plugin): build-time 変換 + responsive srcset 自動生成。
Nuxt Image: provider 抽象化。Cloudinary、Imgix、ImageKit、Bunny など8つ以上のバックエンド。
Gatsby Image (gatsby-plugin-image): build-time 中心。Gatsby Cloud(現 Netlify)の画像 CDN と統合。

Next.js Image の典型例:

import Image from 'next/image'

export default function Hero() {
  return (
    <Image
      src="/hero.jpg"
      alt="Hero"
      width={1600}
      height={900}
      sizes="(max-width: 768px) 100vw, 50vw"
      priority
      fetchPriority="high"
    />
  )
}

Next.js Image は自動的に srcset を生成し、ブラウザの Accept ヘッダーに応じて AVIF / WebP / JPEG のいずれかを返す。priority は LCP 候補、fetchPriority="high" はブラウザ優先度ヒントだ。

Vercel Image Optimization — 変換あたり課金の実際のコスト

Vercel Image Optimization は Next.js Image のバックエンドである。2026年5月の価格:

Hobby: 1,000 transforms/mo 無料、以降は使用不可。
Pro: 5,000 transforms/mo 含む、超過分は transform あたり $0.005。
Enterprise: 交渉。

「transform」は unique URL 単位なので、キャッシュヒットは費用ゼロ。トラフィックが大きいサイトでは Pro の transform 単価が負担になりうるので、外部 loader(Cloudinary、Imgix、ImageKit)に迂回するパターンが一般的だ。

import Image from 'next/image'

const cloudinaryLoader = ({ src, width, quality }) => {
  return `https://res.cloudinary.com/demo/image/upload/w_$WIDTH,q_$QUALITY,f_auto/$SRC`
    .replace('$WIDTH', width)
    .replace('$QUALITY', (quality || 75).toString())
    .replace('$SRC', src)
}

export default function Pic() {
  return <Image loader={cloudinaryLoader} src="hero.jpg" width={1200} height={800} alt="" />
}

ここで $WIDTH、$QUALITY、$SRC をプレースホルダにしているのは、MDX 内の prose でテンプレートリテラルが危険になる場合を避けるためで、実コードではバッククォート + 標準テンプレートリテラルを使う。

セルフホスト変換 — Sharp · imgproxy · Thumbor · libvips

SaaS を使わず自前の変換サーバーを動かすなら、2026年の標準は以下:

Sharp (Node, libvips バインディング): Node エコシステム1位。Next.js Image も内部で sharp を使う。速くてメモリ効率がよい。
imgproxy (Go): 単一バイナリのサーバー。URL signed ベース、libvips を使う。セルフホスト用として最も人気。
Thumbor (Python): Globo.com 製の OSS。長く安定しているが、メモリ・速度では imgproxy に劣る。
Pillow / Pillow-SIMD (Python): Django · Flask などの Python バックエンドから直接呼ぶ。
libvips (C): 上記ツールのほとんどのバックエンドエンジン。CLI(vips、vipsthumbnail)としても使える。
ImageMagick / GraphicsMagick: 互換性の面では依然健在だが、速度とメモリは libvips 比 5〜10倍遅い。

Sharp の典型例:

import sharp from 'sharp'

await sharp('input.jpg')
  .resize({ width: 1200, height: 800, fit: 'cover' })
  .toFormat('avif', { quality: 60 })
  .toFile('output.avif')

imgproxy の URL 形:

https://imgproxy.example.com/insecure/
  rs:fill:800:600:1/g:sm/q:80/f:webp/
  plain/https://origin.example.com/sample.jpg

imgproxy は運用コストが最も低いセルフホスト選択肢である。K8s に deployment ひとつ + autoscale、origin は S3 / R2 / GCS。

モダンフォーマット 2026 — AVIF、WebP、JPEG XL、HEIF/HEIC、JPEG

2026年5月時点のブラウザサポート状況:

AVIF: Chrome 85+(2020)、Firefox 93+(2021)、Safari 16+(2022)。全メジャーブラウザでサポート。JPEG 比 30〜50% 小さい。
WebP: 2010年に Google が作ったフォーマット。全モダンブラウザでサポート。AVIF より圧縮率は低いがエンコードは速い。
JPEG XL: Firefox(2022〜)、Safari 17+(2023)。Chrome は 2022年に導入、2023年に削除 → 2024年に再議論 → 2026年5月時点で flag-behind 復活。AVIF 比、無損圧縮に強い。
HEIF/HEIC: Apple デバイス native(iPhone カメラのデフォルトフォーマット)。Web では Safari のみ native、それ以外は変換必須。
JPEG (1992): 依然として universal fallback。JPEG 2000 は事実上死亡。

実戦的な推奨:

原本は可能なら JPEG XL または PNG / TIFF で保管。
配信は <picture> または CDN の f_auto で AVIF → WebP → JPEG の順に交渉。
Apple ユーザー比率が高いサイトでは HEIC native 配信も検討。

`<picture>` 要素と art direction

art direction が必要な場合は <picture> を直接書く。

<picture>
  <source
    media="(max-width: 768px)"
    srcset="hero-mobile.avif"
    type="image/avif"
  />
  <source media="(max-width: 768px)" srcset="hero-mobile.webp" type="image/webp" />
  <source srcset="hero-desktop.avif" type="image/avif" />
  <source srcset="hero-desktop.webp" type="image/webp" />
  <img src="hero-desktop.jpg" alt="Hero" />
</picture>

<picture> は art direction(画像そのものを差し替える)とフォーマット交渉(同じ画像の異なるフォーマット)を一度に処理する。<img srcset> は同じ画像の異なる解像度だけを処理する。

動画 CDN — Mux、Cloudflare Stream、Bunny Stream、AWS Elemental

動画は画像より1〜2桁複雑だ。エンコード(transcoding)、パッケージング(packaging)、ストリーミング、DRM、分析(QoE)がすべて入る。2026年5月の SaaS 強者:

Mux Video: 開発者フレンドリーの1位。API 1本でアップロード → HLS/DASH パッケージング → CDN 配信。料金はエンコード分あたり $0.0045〜$ 0.05、配信 GB あたり $0.005〜$ 0.01。
Cloudflare Stream: 分あたりエンコード $5/1K、配信$ 1/1K。価格はシンプル。
Bunny Stream: 分あたりエンコード $0.005、配信$ 0.005/GB。価格圧倒的。
AWS Elemental MediaConvert + IVS: エンコード + ライブストリーミングを束ねる。AWS エコシステム内部の標準。
JW Player、Brightcove、Vimeo Pro/Enterprise: プレーヤー + CDN + DAM まで統合した OTT ソリューション。
Wowza、Daily.co、LiveKit、Agora: リアルタイム / ビデオ会議領域。

Mux の典型的 API:

curl https://api.mux.com/video/v1/assets \
  -H "Content-Type: application/json" \
  -u $MUX_TOKEN_ID:$MUX_TOKEN_SECRET \
  -d '{
    "input": "https://example.com/video.mp4",
    "playback_policy": ["public"],
    "encoding_tier": "smart"
  }'

レスポンスで playback_id が返れば、https://stream.mux.com/$PLAYBACK_ID.m3u8 で HLS 再生可能。すべてのトランスコードと CDN は Mux 側で処理される。

アダプティブストリーミング — HLS、DASH、CMAF、LL-HLS、WebRTC

動画転送プロトコルは5つに分かれる。

HLS (HTTP Live Streaming、Apple): 最も普遍。.m3u8 manifest + .ts セグメント。全モダンクライアントでサポート。
DASH (MPEG-DASH): HLS とほぼ同機能、.mpd manifest + .m4s セグメント。非 Apple 陣営で人気。
CMAF (Common Media Application Format): HLS / DASH が同じ fMP4 セグメントを共有。ストレージコスト削減。
LL-HLS、Low-Latency DASH: ガラス・ツー・ガラス遅延を 2〜4 秒まで短縮。通常 HLS は 10〜30 秒。
WebRTC: サブ秒遅延。ビデオ会議 / ライブインタラクティブ限定。LiveKit、Daily.co、Agora が主力。

CMAF + LL-HLS / LL-DASH の組み合わせが2026年のライブストリーミング標準だ。VOD は HLS + DASH(CMAF で統一)の組み合わせが無難。

コーデック 2026 — AV1、HEVC、H.264、VVC、VP9、LCEVC

コーデックは別レイヤーだ。コンテナ(.mp4、.ts)とは無関係に圧縮効率が分かれる。

H.264 (AVC): 2003年標準。依然として universal。全デバイスがデコード可能。
HEVC (H.265): H.264 比 50% 改善。Apple デバイス、最新 Android、最新 TV がサポート。ライセンスが複雑(MPEG-LA、HEVC Advance、Velos Media)。
VP9 (Google): HEVC 同等の圧縮率、royalty-free。YouTube がメイン。
AV1 (AOMedia): 2018年標準。次世代 royalty-free コーデック。Netflix、YouTube、Twitch が採用。エンコード速度の遅さが欠点だったが、SVT-AV1、libaom の最適化で2025年以降は実用域。
VVC (H.266): 2020年標準。HEVC 比 50% 改善。2026年から一部 8K / VR コンテンツで採用開始。
LCEVC (V-Nova、MPEG-5 Part 2): 既存コーデックの上に enhancement layer を乗せる方式。base codec(H.264 等)+ LCEVC enhancement。

2026年推奨エンコード ladder:

メイン: H.264(最小互換)。
追加: HEVC(高画質、Apple 陣営)+ AV1(モダンブラウザ、帯域削減)。
一部試行: VVC(8K)、LCEVC(低帯域)。

CDN が multi-codec ABR(adaptive bitrate)を自動生成してくれることが、Mux、Cloudflare Stream、Bunny Stream のコアバリューである。

AI 補正 — アップスケール、スマートクロップ、Generative Fill

2024年から CDN に AI 機能が本格的に入った。

AI アップスケーリング: 低解像度の原本を 4K まで拡大。Topaz Gigapixel、Real-ESRGAN、SUPIR(2024 ICLR)。iter75 で別途扱う。
スマートクロップ / focal point detection: 顔・被写体を自動検出してクロップ。Cloudinary g_auto、ImageKit fo-face、Imgix crop=faces。
Generative Fill / Outpainting: 余白を自動で埋める。Cloudinary e_gen_fill(2024 GA)、Adobe Firefly Services。
Background Removal: Cloudinary e_background_removal(2024 GA)、Remove.bg API、Photoroom API。
Object Replacement: 領域置換。Cloudinary e_gen_replace(2025 GA)。

これらの機能が CDN URL 1行で可能になったことで、別途の画像編集パイプラインが消えていく傾向にある。

DAM (Digital Asset Management) — 画像 CDN の上位カテゴリ

DAM は画像 CDN にコラボレーション・権限・ライフサイクル管理を加えたものだ。2026年5月の市場は以下:

Bynder: オランダ発。マーケティングチーム DAM の1位。
Brandfolder (Smartsheet が買収): 米国。Salesforce などの CRM 統合に強い。
Cloudinary DAM (旧 Wirewheel): Cloudinary の上のコラボレーションレイヤー。
MediaValet: カナダ。
Aprimo: 米国。エンタープライズのマーケティングオペレーション統合。
OpenText Hightail: コラボレーション + 資産共有。

DAM 市場は SaaS の値段がとても高い(年 $20K〜$ 100K+)。中小規模では Cloudinary または Bunny + Notion / Airtable の組み合わせで代替するパターンが多い。

AI 画像タグ付け — Cloudinary AI、Google Vision、AWS Rekognition、Clarifai

資産が増えると検索が問題になる。AI タグ付け API:

Cloudinary AI Tagging (Add-On): Imagga、Google、AWS、Microsoft の4エンジンから選択。
Google Cloud Vision API: label、object detection、OCR、landmark、face、safe search。
AWS Rekognition: 同じカタログ、AWS 統合。
Azure AI Vision (旧 Computer Vision): 同等。
Clarifai: カスタムモデル学習が可能な vision PaaS。
OpenAI Vision (GPT-4o、GPT-5): free-form 説明 / タグ付け。価格はトークンベース。

2026年5月のトレンドはLLM ベースのマルチモーダルタグ付けだ。Clarifai、Cloudinary は GPT-5 / Claude / Gemini ベースの自然言語タグ付けをオプションで提供する。

韓国の画像 CDN — NHN Cloud、NAVER Cloud、Kakao i Cloud

韓国ローカル CDN の選択肢:

NHN Cloud Image Service: NHN(旧 NHN Toast)Cloud。KR/JP リージョンに強い。韓国語ドキュメント。
NAVER Cloud Image (旧 NAVER Cloud Platform): NAVER 自前インフラ。KR に強い。クラウド + CDN 統合。
Kakao i Cloud: カカオエンタープライズ。KR に強い。KakaoTalk · カカオ Channel との連携。

韓国ユーザー比率が圧倒的(全トラフィックの 70% 以上が KR)なら、グローバル CDN(Cloudflare、AWS)比で KR 内の遅延がより低い NHN / NAVER / Kakao が有利になる。グローバル配信も加わると再び Cloudflare が有利になる。

日本の画像 CDN — Sakura CDN、CDNetworks Japan、Akamai Japan、Edgio Japan

日本市場は次の選択肢が大きい。

Sakura Internet CDN (Image Flux): さくらが運営する画像変換 + CDN。JP に強い。
CDNetworks Japan: グローバル CDN だが JP 拠点が強い。
Akamai Japan: エンタープライズ標準。
Edgio Japan (旧 Limelight Networks): 動画 CDN に強かったが、2024年に chapter 11 → 再構築。2026年5月時点で一部サービスを維持。
J:COM Vision、NTT Communications CDN: 通信キャリア発。

JP コンテンツ比率の高いサイト(漫画、アニメストリーミング等)は、Sakura Image Flux + Bunny / Cloudflare グローバルの組み合わせが一般的だ。

コスト最適化パターン — Lazy loading、srcset、fetchpriority

CDN 価格をいくら下げても、不要な変換と配信を 0 にすることが最速の削減だ。

loading="lazy": ビューポート進入時にロード。すべての画像でデフォルト推奨。LCP 候補だけ loading="eager"。
fetchpriority="high": LCP 候補に明示。ブラウザ優先度キューの上位へ。
srcset と sizes: デバイス画素密度 + ビューポートサイズに合わせて適切な解像度のみ配信。
<picture> art direction: モバイルとデスクトップが異なる画像のとき。
CDN キャッシュキー正規化: query param の順、大文字小文字、不要パラメータの除去。
HTTP/2 / HTTP/3 + Brotli: CDN がデフォルトでサポート。
Service Worker offline cache: 再訪トラフィックを減らす。

LCP 候補画像の Next.js Image 利用:

<Image
  src="/hero.jpg"
  alt=""
  width={1600}
  height={900}
  priority
  fetchPriority="high"
  sizes="(max-width: 768px) 100vw, 50vw"
/>

非 LCP の画像:

<Image
  src="/thumb.jpg"
  alt=""
  width={400}
  height={300}
  loading="lazy"
  sizes="(max-width: 768px) 50vw, 25vw"
/>

価格モデル比較 — Per-transform vs Per-GB vs Flat

画像 CDN の価格モデルは大きく3つに分かれる。

Per-transform (Cloudinary credits、Vercel Image、Cloudflare Images transform): 変換回数に直接課金。トラフィックパターンがばらつくと予測しづらい。
Per-GB-delivered (Bunny、Cloudflare の一部、Imgix): 配信データ量に課金。トラフィックが大きくなるほど単価交渉の余地がある。
Storage + bandwidth (S3 + CloudFront、GCS + Cloud CDN): 保存と配信を別建て。セルフホスト変換と組み合わせると有利。
Flat-rate (Cloudflare Images plan-based、Bunny Optimizer): 定額。変換回数が圧倒的に多いときに有利。

月間トラフィック別の推奨組み合わせ(2026年5月の公示価格ベースで概略):

小規模(< 100GB/mo): Cloudflare Images Free / Bunny / Cloudinary Free。
中規模(100GB〜1TB): Bunny Optimizer + CDN、Imgix Standard、Cloudinary Plus。
大規模(1TB〜10TB): Cloudinary Advanced、ImageKit Custom、Bunny Volume。
超大規模(>10TB): セルフホスト imgproxy + Cloudflare R2、AWS Lambda@Edge + S3、Enterprise 交渉。

Core Web Vitals とメディア — LCP、INP、CLS

2024年3月に INP が FID を置き換えたので、Core Web Vitals の3指標は以下:

LCP (Largest Contentful Paint): 2.5秒以下推奨。ほぼ常に hero 画像が LCP 候補。画像 CDN と直結。
INP (Interaction to Next Paint): 200ms 以下推奨。画像より JS の影響が大きい。
CLS (Cumulative Layout Shift): 0.1 以下推奨。<img> に width / height(または aspect-ratio)を明示する必要がある。

画像 CDN をしっかり使っていても、<img> の width / height が抜けると CLS が崩れる。Next.js Image、Astro Image、SvelteKit enhanced:img は自動で処理する。

実戦チェックリスト — 新規プロジェクトのメディアスタック決定

新規プロジェクトを始める際は次の順で決める。

トラフィック規模と予測: 月 5GB? 5TB? 50TB? 価格モデルが分かれる。
地域分布: グローバル? 韓国のみ? 日本のみ? ローカル CDN の可能性。
変換カタログ要件: GenAI が必要? f_auto + リサイズだけならどのツールでも可。
動画を含むか: 画像 + 動画を一箇所でやるなら Bunny / Cloudflare / Mux。
フレームワーク: Next.js? Astro? Nuxt? built-in Image コンポーネント + provider を選ぶ。
DAM が必要か: マーケチームのコラボ要件があれば DAM。開発者向けサイトなら不要。
セルフホスト意思: データ主権 / コスト / コンプラで SaaS 拒否なら imgproxy + S3 / R2。

最も多い2026年の組み合わせ3つ:

開発者サイト(ブログ、ドキュメント): Next.js Image + Vercel(Pro)または Cloudflare Images 無料。
EC 中規模: Cloudinary または ImageKit + Next.js / Nuxt loader。
コンテンツ / メディア会社: Bunny Optimizer + Bunny Stream(画像 + 動画)、または Mux + Cloudflare Images。

まとめ — 2026年のメディア CDN は「一箇所で全部」が答え

2026年5月時点のメディア CDN の傾向は明確だ。

**フォーマット交渉(AVIF / WebP / JPEG XL)**は事実上デフォルト。f_auto のないツールは市場から消えた。
**AI 変換(スマートクロップ、Generative Fill、背景除去)**が1級市民として入ってきた。
画像 + 動画統合 CDN(Bunny、Cloudflare、Mux)が、別々のツールを束ねるより速く成長している。
価格モデルは per-transform と per-GB が両立するが、トラフィックが大きくなれば per-GB / flat が有利。
フレームワーク統合(Next.js Image、Astro Image、Nuxt Image)が標準化され、provider 差し替えのコストが下がった。

新規プロジェクトを始めるなら、最初の決定は「どの CDN」ではなく 「どのフレームワーク Image コンポーネントと、どの loader 抽象化」 だ。バックエンドはその後で差し替えればよい。