필사 모드: 画像 & 動画 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つの問題を一箇所で解かなくてはならない。

1. **フォーマット交渉(format negotiation)**: ブラウザごとに AVIF / WebP / JPEG XL / HEIC のサポートが異なる。Accept ヘッダーと User-Agent から最適なフォーマットを選ぶ。

2. **サイズ・クロップ変換**: 同じ原本を 200px · 400px · 800px · 1600px にスライス。art direction が必要なら srcset · picture 要素と連携する。

3. **品質交渉(quality)**: q=auto:eco vs q=80 vs lossless。Save-Data ヘッダーやモバイル網の推定値を見る。

4. **エッジキャッシュ**: 200+ POPにキャッシュ。初回 origin → 変換 → キャッシュ、以降はエッジヒット。

5. **メタデータ・セキュリティ**: 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 の典型例:

export default function Hero() {

return (

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)に迂回するパターンが一般的だ。

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 の典型例:

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 は事実上死亡。

実戦的な推奨:

1. 原本は可能なら JPEG XL または PNG / TIFF で保管。

2. 配信は `<picture>` または CDN の `f_auto` で AVIF → WebP → JPEG の順に交渉。

3. Apple ユーザー比率が高いサイトでは HEIC native 配信も検討。

`<picture>` 要素と art direction

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

media="(max-width: 768px)"

srcset="hero-mobile.avif"

type="image/avif"

/>

`<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:

1. メイン: H.264(最小互換)。

2. 追加: HEVC(高画質、Apple 陣営)+ AV1(モダンブラウザ、帯域削減)。

3. 一部試行: 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 にする**ことが最速の削減だ。

1. **`loading="lazy"`**: ビューポート進入時にロード。すべての画像でデフォルト推奨。LCP 候補だけ `loading="eager"`。

2. **`fetchpriority="high"`**: LCP 候補に明示。ブラウザ優先度キューの上位へ。

3. **`srcset` と `sizes`**: デバイス画素密度 + ビューポートサイズに合わせて適切な解像度のみ配信。

4. **`<picture>` art direction**: モバイルとデスクトップが異なる画像のとき。

5. **CDN キャッシュキー正規化**: query param の順、大文字小文字、不要パラメータの除去。

6. **HTTP/2 / HTTP/3 + Brotli**: CDN がデフォルトでサポート。

7. **Service Worker offline cache**: 再訪トラフィックを減らす。

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

src="/hero.jpg"

alt=""

width={1600}

height={900}

priority

fetchPriority="high"

sizes="(max-width: 768px) 100vw, 50vw"

/>

非 LCP の画像:

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つに分かれる。

1. **Per-transform (Cloudinary credits、Vercel Image、Cloudflare Images transform)**: 変換回数に直接課金。トラフィックパターンがばらつくと予測しづらい。

2. **Per-GB-delivered (Bunny、Cloudflare の一部、Imgix)**: 配信データ量に課金。トラフィックが大きくなるほど単価交渉の余地がある。

3. **Storage + bandwidth (S3 + CloudFront、GCS + Cloud CDN)**: 保存と配信を別建て。セルフホスト変換と組み合わせると有利。

4. **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` は自動で処理する。

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

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

1. **トラフィック規模と予測**: 月 5GB? 5TB? 50TB? 価格モデルが分かれる。

2. **地域分布**: グローバル? 韓国のみ? 日本のみ? ローカル CDN の可能性。

3. **変換カタログ要件**: GenAI が必要? `f_auto` + リサイズだけならどのツールでも可。

4. **動画を含むか**: 画像 + 動画を一箇所でやるなら Bunny / Cloudflare / Mux。

5. **フレームワーク**: Next.js? Astro? Nuxt? built-in Image コンポーネント + provider を選ぶ。

6. **DAM が必要か**: マーケチームのコラボ要件があれば DAM。開発者向けサイトなら不要。

7. **セルフホスト意思**: データ主権 / コスト / コンプラで 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 抽象化」** だ。バックエンドはその後で差し替えればよい。

References

- [Cloudinary Documentation](https://cloudinary.com/documentation)

- [Imgix Documentation](https://docs.imgix.com/)

- [ImageKit Documentation](https://docs.imagekit.io/)

- [Bunny.net Stream & Optimizer Documentation](https://docs.bunny.net/)

- [Cloudflare Images Documentation](https://developers.cloudflare.com/images/)

- [Cloudflare Stream Documentation](https://developers.cloudflare.com/stream/)

- [Mux Video Documentation](https://docs.mux.com/)

- [Fastly Image Optimizer Documentation](https://docs.fastly.com/products/image-optimizer)

- [AWS Serverless Image Handler Solution](https://aws.amazon.com/solutions/implementations/serverless-image-handler/)

- [Vercel Image Optimization Docs](https://vercel.com/docs/image-optimization)

- [Next.js Image Component](https://nextjs.org/docs/app/api-reference/components/image)

- [Astro Image and Assets](https://docs.astro.build/en/guides/images/)

- [SvelteKit Image Optimization (`enhanced:img`)](https://kit.svelte.dev/docs/images)

- [Nuxt Image](https://image.nuxt.com/)

- [Gatsby Plugin Image](https://www.gatsbyjs.com/plugins/gatsby-plugin-image/)

- [Sharp (libvips binding for Node)](https://sharp.pixelplumbing.com/)

- [imgproxy Docs](https://docs.imgproxy.net/)

- [Thumbor GitHub](https://github.com/thumbor/thumbor)

- [libvips Documentation](https://www.libvips.org/)

- [AVIF Format Overview (Web.dev)](https://web.dev/articles/compress-images-avif)

- [WebP Format Overview](https://developers.google.com/speed/webp)

- [JPEG XL Reference](https://jpegxl.info/)

- [HLS Specification (RFC 8216)](https://datatracker.ietf.org/doc/html/rfc8216)

- [MPEG-DASH Standard](https://dashif.org/)

- [CMAF Overview (ISO/IEC 23000-19)](https://www.iso.org/standard/79106.html)

- [AV1 / AOMedia](https://aomedia.org/)

- [VVC / H.266 Reference](https://www.itu.int/rec/T-REC-H.266)

- [Core Web Vitals (Google Search Central)](https://developers.google.com/search/docs/appearance/core-web-vitals)

- [HTTP Archive Web Almanac](https://almanac.httparchive.org/)

- [NHN Cloud Image Service](https://www.toast.com/service/contents-delivery/image-service)

- [NAVER Cloud Platform CDN](https://www.ncloud.com/product/networking/cdnplus)

- [Sakura Internet Image Flux](https://www.sakura.ad.jp/services/imageflux/)