LabHub

ブログ

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

2026-05-16 · 24 分で読めます · #image-cdn#video-cdn#cloudinary#imgix#imagekit#bunny-cdn#cloudflare-images#mux#fastly#vercel-image#avif#webp#japanese

한국어English日本語

はじめに — 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社が市場を分け合う。

副選択肢として 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

主要トランスフォーム:

料金は 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

主要パラメータ:

Imgix は変換カタログが Cloudinary より短いが、URL キャッシュキーがすっきりしている。変換カタログを GenAI まで広げず、正統な画像変換に集中する。価格は Standard 75/mo(100Kmasters、100Krendered)、Premium75/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 する。主要:

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

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

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

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

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

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

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月の価格:

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

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月時点のブラウザサポート状況:

実戦的な推奨:

  1. 原本は可能なら JPEG XL または PNG / TIFF で保管。
  2. 配信は <picture> または CDN の f_auto で AVIF → WebP → JPEG の順に交渉。
  3. 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 の典型的 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つに分かれる。

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

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

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

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 機能が本格的に入った。

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

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

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

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

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

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

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

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

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

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

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

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

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 利用:

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

  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月の公示価格 ベースで概略):

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

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

画像 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つ:

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

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

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

References

コメント

まだコメントはありません。

ログインするとコメントできます