이미지 & 비디오 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년 1분기 기준 모바일 2.4MB, 데스크톱 2.9MB(HTTP Archive Web Almanac 2026 사전 공개 데이터)를 돌파했다. 이 가운데 50% 이상이 이미지와 비디오다. Core Web Vitals의 LCP 임계값 2.5초를 지키려면 결국 무엇을, 언제, 어떤 포맷과 해상도로 전송하느냐가 전부다.

여기에 2024 ~ 2026년의 AI 콘텐츠 폭증이 더해졌다. 이커머스 상품 사진을 Stable Diffusion 기반 파이프라인이 자동 생성하고, 숏폼 비디오를 Runway · Pika · Luma가 만들어낸다. 원본 자산 수 자체가 폭증했고, 변환 횟수도 늘어났다. "원본 한 장에 변형 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 → 변환 → 캐시, 이후 요청은 엣지 hit.
메타데이터 / 보안: signed URL, EXIF 제거, watermark, 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 한 줄로 가능하다.

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 or crop=entropy: AI 크롭.
mask=ellipse etc.: 마스크 변환.
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: prefix가 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 단위 과금이라 traffic이 큰 사이트에서 Cloudinary 대비 30~60% 절감 사례가 보고된다.

Bunny.net — 슬로베니아발 통합 미디어 스택

Bunny.net은 CDN + Bunny Optimizer + Bunny Stream을 묶어 이미지와 비디오를 한 계정에서 관리한다. 가격이 압도적이다.

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) or 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 단위라 캐시 hit는 비용 없음. 트래픽이 큰 사이트는 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="" />
}

placeholder 값으로 $WIDTH, $QUALITY, $SRC를 쓰는 이유는 MDX 안에서 백틱 안 템플릿 리터럴이 안전하지 않은 경우를 피하기 위한 것이고, 실제 코드에선 백틱 + 표준 템플릿 리터럴을 쓴다.

셀프호스트 트랜스폼 — 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 카메라 기본 포맷). 웹에서는 Safari만 native, 다른 곳에선 변환 필수.
JPEG (1992): 여전히 universal fallback. JPEG 2000은 사실상 사망.

실전 권장은 다음과 같다.

원본은 가능하면 JPEG XL 또는 PNG / TIFF로 보관.
송출은 <picture> 또는 CDN f_auto로 AVIF → WebP → JPEG 순 협상.
Apple 사용자 비중이 높은 사이트는 HEIC native 송출도 고려.

`<picture>` element와 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), 스트리밍(streaming), DRM, 분석(QoE)이 다 들어간다. 2026년 5월 SaaS 강자들:

Mux Video: 개발자 친화 1등. API 한 줄로 업로드 → 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 재생 가능. 모든 transcoding과 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 한 줄로 가능해지면서 별도 이미지 편집 파이프라인이 사라지는 추세다.

DAM (Digital Asset Management) — 이미지 CDN의 상위 카테고리

DAM은 이미지 CDN에 협업 · 권한 · 라이프사이클 관리를 더한 것이다. 2026년 5월 시장은 다음과 같다.

Bynder: 네덜란드 발. 마케팅 팀 DAM 1위.
Brandfolder (Smartsheet 인수): 미국. Salesforce 등 CRM 통합 강점.
Cloudinary DAM (formerly 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 설명 / 태깅. 가격은 token 기반.

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 · 카카오톡 채널 연동.

한국 사용자 비중이 절대적이면(전체 트래픽의 70% 이상이 KR) 글로벌 CDN(Cloudflare, AWS) 대비 KR 내 지연이 더 낮은 NHN / NAVER / Kakao 옵션이 메리트가 있다. 다만 글로벌 송출이 추가되면 Cloudflare가 다시 유리해진다.

일본 이미지 CDN — Sakura CDN, CDNetworks Japan, Akamai Japan, Edgio Japan

일본 시장은 다음 옵션이 크다.

Sakura Internet CDN (Image Flux): Sakura가 운영하는 이미지 변환 + 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 이하 권장. 이미지에 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 무료.
이커머스 중간 규모: 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 vs per-GB가 양립하지만 트래픽이 커지면 per-GB / flat이 유리.
프레임워크 통합(Next.js Image, Astro Image, Nuxt Image)이 표준화되면서 provider 교체 비용이 낮아졌다.

새 프로젝트를 시작한다면 첫 결정은 "어느 CDN"이 아니라 "어느 프레임워크 컴포넌트와 어떤 loader 추상화" 다. 백엔드는 그 다음에 갈아끼우면 된다.