필사 모드: 이미지 호스팅 & CDN 2026 — Cloudinary / ImageKit / Bunny CDN / Imgix / Cloudflare Images / jsDelivr / Vercel next/image / ImageFlux 심층 비교

프롤로그 — 이미지가 가장 느린 자원이 된 시대

2026년의 웹페이지 평균 크기는 약 2.6MB이고, 그중 **이미지가 절반 이상**을 차지한다. Largest Contentful Paint(LCP)의 가장 흔한 후보는 hero 이미지다. 모바일 4G에서 LCP가 2.5초를 넘으면 "Poor" 등급을 받고, Core Web Vitals 점수가 떨어지면 검색 노출이 직접적으로 줄어든다.

이걸 해결하는 방법은 셋이다.

1. **이미지 자체를 작게 만든다.** WebP·AVIF·JPEG XL로 변환하고, 디바이스에 맞는 해상도만 보낸다.

2. **이미지를 사용자 근처에서 받게 한다.** CDN 엣지에 캐싱해서 RTT를 줄인다.

3. **이미지 로딩 순서를 제어한다.** hero에 `fetchpriority="high"`, 아래쪽엔 `loading="lazy"`.

2026년 현재, 이 세 가지를 **하나의 URL로** 처리해 주는 게 "이미지 CDN"이다. 원본을 한 번 업로드하면, URL 파라미터로 폭·포맷·품질·자르기·AI 향상을 지정해 변환된 결과를 엣지에서 받는다. 한 번 변환된 결과는 캐시되어 재방문 시엔 즉시 응답한다.

이 글은 2026년의 이미지 호스팅·CDN 시장을 한 호흡으로 정리한다. 매니지드 SaaS(Cloudinary·ImageKit·Bunny·Imgix·Cloudflare Images·gumlet), 하이퍼스케일러(AWS·GCP·Azure·Akamai·Fastly), 무료 OSS CDN(jsDelivr·statically·unpkg·esm.sh), 프레임워크 통합(Vercel·next/image), 그리고 한국·일본의 토착 솔루션까지.

1장 · 2026년 이미지 호스팅 & CDN 지도 — 4 분류

먼저 큰 그림. 2026년 이미지 인프라는 네 갈래로 나뉜다.

[1] 매니지드 이미지 CDN (SaaS)

Cloudinary — 리더, AI 변환, 60+ SDK

ImageKit — 인도/글로벌, 가성비 좋은 대안

Bunny CDN — 독일, 가장 싼 트래픽 단가

Imgix — 프리미엄, 사진가·미디어 회사

Cloudflare — Images $5/100K, 글로벌 엣지

Images

gumlet.io — 인도, 비디오까지 묶음

[2] 하이퍼스케일러 CDN + 오브젝트 스토리지

AWS CloudFront + S3

Google Cloud CDN + Cloud Storage

Azure Blob Storage + Azure CDN / Front Door

Akamai Image & Video Manager

Fastly Image Optimizer (IO)

[3] 무료 OSS CDN

jsDelivr — GitHub/npm/WordPress, 글로벌

statically.io — GitHub/Gist 캐시, 무료

unpkg — npm 패키지 mirroring

esm.sh — ESM 형태 변환 미러

BlazeCDN/KeyCDN — 저가 매니지드

Edgio (구 StackPath, 2022 인수·리브랜드)

[4] 프레임워크 통합

Vercel Image Optimization

Next.js next/image (loader API)

Nuxt @nuxt/image

SvelteKit @sveltejs/enhanced-img

Astro <Image />

이 네 분류는 **사용자가 누구냐**로 갈라진다.

- 1인 개발자·블로거 → [3] 무료 OSS CDN + [4] 프레임워크 통합 (비용 0원)

- 스타트업·SaaS → [1] 매니지드 이미지 CDN (Bunny·ImageKit·Cloudflare Images)

- 미디어·커머스·콘텐츠 회사 → [1] Cloudinary·Imgix (AI 변환·DAM 필요)

- 엔터프라이즈 → [2] AWS/GCP/Azure/Akamai/Fastly (계약·SLA·VPC)

2장 · Cloudinary — 2026년에도 리더, AI 변환의 표준

Cloudinary는 2011년에 시작한 이스라엘 회사로, 2026년 현재 이미지·비디오 CDN 시장의 **사실상 표준**이다. 매출 2억 달러 이상, 직원 700명 이상, 2024–2025년에 추가 펀딩을 받았다. 핵심 무기는 두 가지다.

**1. URL 변환 문법이 가장 표현력 있다.**

Cloudinary URL은 폴더가 아니라 변환 체인이다.

https://res.cloudinary.com/<cloud>/image/upload/

w_800,h_600,c_fill,g_auto,f_auto,q_auto,e_improve/

v1700000000/sample.jpg

읽는 순서:

- `w_800,h_600` — 폭·높이

- `c_fill` — crop mode (fill, fit, scale, thumb, …)

- `g_auto` — gravity, AI가 자동으로 피사체 중심 선택

- `f_auto` — 브라우저에 맞춰 AVIF/WebP/JPEG 자동

- `q_auto` — 품질 자동

- `e_improve` — AI 색·노출 보정 효과

**2. AI 변환이 가장 깊다.**

2024–2026년에 Cloudinary가 추가한 AI 기능:

- `e_gen_remove:item` — 객체 제거 (생성형 인페인팅)

- `e_gen_replace:from_dog;to_cat` — 텍스트로 객체 교체

- `e_gen_recolor:item_shirt;color_blue` — 색만 변경

- `e_background_removal` — 배경 제거 (AI 매팅)

- `e_upscale` — 4× 업스케일

- `e_gen_fill_w_2000_h_1500` — outpainting으로 비율 변경

이건 단순 필터가 아니다. URL에 파라미터를 넣으면 **첫 요청 시 GPU 워커가 변환·캐시**하고, 이후엔 엣지에서 즉시 응답한다.

**가격(2026).**

- Free: 매월 25 credit (1 credit = 1000 변환 또는 1GB 트래픽 또는 1GB 스토리지)

- Plus: $99/month, 225 credit

- Advanced: $249/month, 600 credit

- Enterprise: 협의

AI 변환은 credit을 더 빨리 소진한다. `e_gen_remove`는 변환당 약 0.5 credit, 일반 변환은 0.001 credit.

**약점.**

- 트래픽 단가가 비싸다. 100GB 전송에 Bunny는 약 $1, Cloudinary는 plan을 초과하면 $100 이상.

- 약관·기능이 복잡하다. 처음 쓰면 "이게 무료 안에서 되는 일인지" 가늠하기 어렵다.

3장 · ImageKit — Cloudinary의 가성비 대안

ImageKit은 인도(방갈로르) 기반 회사로, 2017년에 시작했다. "Cloudinary처럼 강력한 URL 변환·AI 기능을 더 싸게"가 포지셔닝이다.

**URL 문법(거의 같음).**

https://ik.imagekit.io/<endpoint>/tr:w-800,h-600,c-maintain_ratio,fo-auto,f-auto,q-auto/sample.jpg

- `tr:` 접두사로 변환 시작

- `fo-auto` = focus auto = AI 피사체 중심

- `f-auto`, `q-auto` 동일

**AI 기능(2025–2026).**

- AI background removal

- Smart crop with face/object detection

- Generative fill (베타)

- Auto-tagging

**가격(2026).**

- Free: 매월 20GB 대역폭 + 20GB 저장

- Lite: $89/month, 100GB 대역폭

- Custom: 협의

같은 트래픽 기준 Cloudinary 대비 약 30–40% 저렴하다. **AI 기능은 살짝 약하지만**, 단순 변환·자동 포맷·responsive는 동일 수준이다.

**누구한테 맞나.**

- e-커머스 (상품 사진 수만 장)

- Cloudinary AI까지는 필요 없는 SaaS

- 인도·동남아 트래픽 비중이 큰 경우 (PoP이 좋음)

4장 · Bunny CDN — 독일의 가성비 깡패

Bunny.net(구 BunnyCDN)은 슬로베니아·독일 기반 회사로, 2026년 현재 **트래픽 단가가 가장 싼** 일반 CDN 중 하나다. "이미지 CDN"으로 출발하진 않았지만 **Bunny Optimizer**가 이미지 변환을 담당한다.

**가격(2026 기준, 트래픽 단가).**

- 유럽·북미: $0.005/GB ~ $0.01/GB

- 아시아: $0.02/GB

- Optimizer 옵션: 영상당 매월 $9.5 / pull zone

비교하자면 Cloudflare는 무료(Workers Free), AWS CloudFront는 $0.085/GB(첫 10TB), Akamai는 협의(보통 더 비쌈). Bunny는 **소규모 영상·이미지 서비스가 수십 TB를 흘려도 월 100달러 단위**로 끝난다.

**Optimizer URL 문법.**

https://yourzone.b-cdn.net/sample.jpg?width=800&height=600&optimizer=image&quality=85

- `width`, `height`

- `optimizer=image` 로 변환 활성화

- `format=auto` 로 AVIF/WebP 자동

**약점.**

- AI 기능이 거의 없다. 자동 자르기·생성형 변환은 없음.

- Cloudinary 수준의 SDK·DAM은 없음. URL 기반만.

**누구한테 맞나.**

- 비용에 민감한 스타트업·인디 개발자

- 정적 이미지 변환만 필요한 경우

- 영상까지 같이 흘리려는 경우 (Bunny Stream과 묶음)

5장 · Imgix — 프리미엄, 사진·미디어 회사가 쓰는 그 CDN

Imgix는 2010년대 초반에 시작한 미국 회사로, **사진가·디지털 미디어 회사가 가장 먼저 떠올리는** 이미지 CDN이다. The Wirecutter, Hudl, Eventbrite, Vimeo 등이 쓴다.

**URL 문법(쿼리스트링 중심).**

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

- `auto=format` 하나로 AVIF/WebP/JPEG 자동

- `auto=compress` 로 품질·인코딩 최적화

- `fit=crop`, `fit=fill`, `fit=facearea`

- `mark=overlay.png&mark-w=200&mark-x=20` — 워터마크

**강점.**

- 매우 안정적인 변환 엔진 (10년 이상 운영)

- "이미지 색 정확도"를 가장 신경 쓰는 곳 — sRGB / Display-P3 / OKLab 컬러스페이스 지원

- 비디오 변환(Imgix Video)까지 있음

**가격(2026).**

- Standard: $300/month부터 (트래픽·요청 묶음)

- 100GB 대역폭당 $0.08 / 변환 1000건당 $0.08

Cloudinary보다 살짝 비싸지만 안정성·일관성·색 정확도로 미디어 회사가 선호한다.

6장 · Cloudflare Images — $5/100K의 게임 체인저

Cloudflare Images는 2021년 출시 후, 2026년 현재 **가장 단순한 가격 모델**로 시장을 흔들고 있다.

**가격(2026).**

- Images Plan: $5/month, 100,000 이미지 저장 + 100,000 변환 무료, 추가 $5/100K

- Bandwidth: 무제한 (이게 핵심)

- Polish (자동 WebP/AVIF): Pro 플랜($25/month)에 포함

비교:

- Cloudinary 100GB 트래픽 ~ $50–100

- Bunny 100GB 트래픽 ~ $1

- Cloudflare Images 100GB 트래픽 = **무제한 = 정액**

대용량을 흘리는 곳에는 **압도적**이다.

**URL 문법(variants).**

https://imagedelivery.net/<accountHash>/<imageId>/<variantName>

variant는 미리 대시보드에서 정의한다 — `thumbnail`(150×150 cover), `hero`(1600 wide), 등. 변환 URL을 자유롭게 쓰진 못하고 **미리 정의된 variant 안에서만** 동작한다.

**약점.**

- Cloudinary 수준의 자유로운 URL 변환은 아님 (variant 기반)

- 2024년부터 **Flexible Variants** 옵션이 추가되어 URL에서 직접 폭·높이 지정도 가능(Pro/Business 이상)

- AI 변환은 거의 없음. R2 + Workers + AI Gateway로 직접 조합해야 함.

**누구한테 맞나.**

- Cloudflare 생태계에 이미 있는 SaaS (R2 + Workers + Pages 묶음)

- 트래픽이 큰 게시판·미디어

- 가격 예측 가능성을 가장 중시하는 팀

7장 · AWS CloudFront + S3 / Google Cloud CDN / Azure Blob + CDN

엔터프라이즈에서 압도적 비율을 차지하는 게 **클라우드 네이티브 조합**이다.

AWS CloudFront + S3 + Lambda@Edge / CloudFront Functions

원본은 S3 또는 사설 origin, 엣지는 CloudFront, 변환은 Lambda@Edge 또는 CloudFront Functions로 처리한다.

[Client]

|

v

[CloudFront Edge (450+ PoP)]

| cache miss

v

[Lambda@Edge — image resize]

| reads

v

[S3 origin bucket]

대표 패턴: AWS Solution Library의 **"Serverless Image Handler"** — Lambda@Edge + Sharp(libvips) 기반.

가격: CloudFront $0.085/GB(첫 10TB), Lambda@Edge 청구 별도, S3 저장 $0.023/GB/month, GET 요청 $0.0004/1000.

Google Cloud CDN + Cloud Storage + Cloud Functions

GCP는 **Imageflow** 또는 자체 Cloud Functions로 변환. **Media CDN**(2022년 출시)이 영상·이미지 최적화 묶음을 제공.

가격: CDN $0.02–0.08/GB, Storage $0.020/GB/month, Functions 별도.

Azure Blob Storage + Azure CDN / Front Door

Azure CDN Standard(Verizon/Akamai 백엔드)가 2025년에 일부 정리되며, 현재는 **Azure Front Door**가 주력. **Front Door Premium**에 Image Optimization이 있다(2025년 GA).

가격: Front Door Standard $0.16/GB(첫 10TB), Premium $0.25/GB.

세 클라우드 다 **VPC·Private Link·IAM·계약·SLA가 필요한 회사**가 쓴다. 가격은 매니지드 SaaS보다 비싸지만, 이미 같은 회사 안에서 다른 서비스가 같은 콘솔에 있는 게 강점.

8장 · Akamai / Fastly Image Optimizer — 엔터프라이즈 끝판왕

Akamai Image & Video Manager

Akamai는 1998년부터 운영된 CDN의 원조다. **Image & Video Manager**(IVM)가 이미지 변환 모듈로, 전 세계 엔터프라이즈가 가장 많이 쓴다.

특징:

- 350,000+ 엣지 서버

- 정책 기반 변환 (조건문 가능)

- Adaptive Image Delivery — 디바이스·연결 속도 기반 자동

- AVIF/WebP/JPEG XL 자동

가격: 협의(영업 계약). 보통 월 수천 달러부터.

Fastly Image Optimizer (IO)

Fastly는 2011년 시작, 2019년 상장. **Fastly Image Optimizer**(IO)가 변환 모듈로, GitHub·The New York Times·The Guardian·Reddit이 쓴다.

URL 문법:

https://example.com/sample.jpg?width=800&height=600&fit=crop&format=auto&quality=80

- 거의 모든 파라미터가 Imgix 호환

- 인스턴트 Purge가 매우 빠름 (수백 ms 안에 글로벌)

가격: 기본 트래픽 $0.12/GB(첫 10TB), IO는 추가 $0.05/1000 변환.

**Akamai와 Fastly의 결정적 차이.**

- Akamai = 압도적 PoP, 정책·룰셋이 강력 → 글로벌 미디어·은행

- Fastly = 개발자 친화 VCL(Varnish Configuration Language), Edge Compute → 뉴스·소셜·게이밍

9장 · jsDelivr / statically.io / unpkg / esm.sh — 무료 OSS CDN

여기부터는 **돈을 내지 않고도** 이미지·정적 자산을 실어 나르는 곳이다.

jsDelivr

가장 유명한 무료 OSS CDN. **GitHub repo·npm 패키지·WordPress 플러그인**을 그대로 CDN에 캐싱한다.

https://cdn.jsdelivr.net/gh/<user>/<repo>@<branch>/path/to/image.png

https://cdn.jsdelivr.net/npm/<package>@<version>/dist/file.js

특징:

- 전 세계 PoP (Cloudflare/Fastly/Bunny 백엔드 묶음)

- 무료, 트래픽 제한 사실상 없음

- 단 — 변환 없음. 폭·포맷 자동 같은 건 없음

- 사용량이 너무 크면 **이메일로 양해 요청**이 옴 (보통 월 100TB 이상)

OSS 프로젝트 README의 스크린샷, 라이브러리 데모, 작은 정적 사이트에 최적.

statically.io

GitHub repo + Gist를 캐싱하는 무료 CDN. **이미지 변환 일부 지원** (resize, format).

https://cdn.statically.io/gh/<user>/<repo>/<branch>/path/to/image.png

https://cdn.statically.io/img/<host>/f=auto,w=800/<path>

OSS 한정으로 무료, 그 외에도 비제한적 사용 가능. jsDelivr보다 살짝 작지만 **resize 가능**이 차별점.

unpkg

npm 패키지 mirror. `https://unpkg.com/<package>@<version>/file` 형태. 이미지 변환은 없고, 주로 JS/CSS 배포용. 이미지는 npm에 올린 경우만.

esm.sh

npm 패키지를 **ESM 형태로 변환**해 미러링. ES Module 직접 import용. `import React from "https://esm.sh/react@18.2.0"`. 이미지는 X.

요약: **jsDelivr 또는 statically.io**가 OSS·블로그·작은 사이트 이미지 CDN으로 충분하다.

10장 · KeyCDN / Edgio(구 StackPath) / gumlet.io

KeyCDN

스위스 기반, 2026년 현재도 운영. 단순한 가격 모델 — $0.04/GB(아시아), $0.02/GB(유럽·북미). Bunny 등장 이전엔 가장 싼 옵션이었다. 지금은 Bunny가 더 저렴해 위상이 약해졌지만 **신뢰도·고객지원**으로 살아남았다.

Edgio (구 StackPath, 2022 인수·리브랜드 / 그 후도 부침)

원래 MaxCDN → StackPath로 인수·리브랜드 → 2022년에 **Edgio**가 인수하면서 다시 리브랜드. 2024년에 Chapter 11(파산보호) 신청 후 Akamai·Lumen 등이 자산 인수. **2026년 현재 Edgio 브랜드는 사실상 정리 단계**이고, 기존 고객은 Akamai·Lumen·Limelight·기타로 마이그레이션 중이다. 새로 가입할 곳은 아니다.

gumlet.io

인도 기반 비교적 신생 회사. **이미지 + 비디오 + DRM**을 한 묶음으로 제공. URL 변환은 ImageKit과 비슷. 가격은 ImageKit과 Bunny 사이.

https://yourdomain.gumlet.io/<image>.jpg?w=800&format=auto&quality=auto

특징은 **비디오 스트리밍·HLS·DRM**이 같은 콘솔에 있는 점. 이미지만 쓰면 ImageKit이 낫지만, 비디오를 같이 쓰면 묶기 좋다.

11장 · Vercel Image Optimization + Next.js next/image

프레임워크 레벨에서 이미지 CDN을 만든 게 **next/image**다. 그리고 그걸 가장 잘 호스팅하는 게 **Vercel**.

next/image 작동 원리

export default function Hero() {

return (

src="/hero.jpg"

width={1600}

height={900}

alt="hero"

priority

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

/>

)

}

빌드·런타임에 일어나는 일:

1. `src`를 `/_next/image?url=...&w=1600&q=75` 형태로 변환

2. Vercel 또는 self-host의 **이미지 옵티마이저**가 첫 요청 시 Sharp(libvips)로 리사이즈·AVIF/WebP 변환

3. 변환 결과를 캐시 (Vercel = CDN 엣지 / self-host = .next/cache/images)

4. `<picture>` + `<source srcSet>` 자동 생성, 반응형 자동

`priority` 가 있으면 `fetchpriority="high"` + preload 자동 삽입. `loading="lazy"` 가 기본.

Vercel Image Optimization 가격(2026)

- Hobby: 1000 source images / 5000 transformations 무료

- Pro: $20/month + 5000 source + transformations 가격 별도

- 100,000 변환 = 약 $40

비싸다. 그래서 2024–2026년에 next/image **loader 옵션**을 Cloudinary·Cloudflare Images·ImageKit·Bunny로 바꾸는 패턴이 흔해졌다.

loader 커스터마이즈

// next.config.js

module.exports = {

images: {

loader: 'custom',

loaderFile: './loaders/cloudflare.js',

},

}

// loaders/cloudflare.js

export default function cloudflareLoader({ src, width, quality }) {

const params = [`width=${width}`, `quality=${quality || 75}`, 'format=auto']

return `https://imagedelivery.net/<hash>/${src}?${params.join('&')}`

}

결과: next/image의 UX는 유지하면서 변환·CDN은 Cloudflare/Cloudinary가 처리.

12장 · AI 이미지 향상 — Cloudinary AI / ImageKit AI

2024–2026년에 이미지 CDN이 가장 빠르게 바뀐 분야가 **AI 변환**이다.

Cloudinary AI 기능 카탈로그

- **Object-aware crop** (`g_auto`) — 얼굴·피사체 중심 자르기

- **Background removal** (`e_background_removal`) — AI 매팅

- **Generative remove** (`e_gen_remove:item`) — 객체 제거

- **Generative replace** (`e_gen_replace:from_X;to_Y`) — 객체 교체

- **Generative fill** (`e_gen_fill_w_X_h_Y`) — outpainting

- **Generative recolor** (`e_gen_recolor:item_X;color_Y`) — 색만 변경

- **Upscale** (`e_upscale`) — 2×/4× 업스케일

- **Restore** (`e_restore`) — 노이즈·블러 제거

- **Improve** (`e_improve`) — 자동 색·노출 보정

이건 별도 결제(credit) 항목으로 빠진다. `e_gen_remove`는 1 변환당 약 0.5 credit.

ImageKit AI

- Smart crop with face detection

- AI background removal

- Auto-tagging

- Generative fill (베타, 2025년 말 GA)

조금 늦지만 가격이 절반이다.

직접 만들기 — Replicate + R2 + Workers

이미지 CDN의 AI 기능을 안 쓰고 **직접** 만들 수도 있다.

[Client]

|

v

[Cloudflare Worker — /api/enhance]

| upload → R2

v

[Replicate — SDXL/Real-ESRGAN/RemBG]

| result URL

v

[Worker — fetch + cache to R2]

|

v

[imagedelivery.net / CDN]

저렴하다(트래픽 무제한). 모델 호스팅·실패 처리·queue를 직접 짜야 한다는 게 비용.

13장 · WebP / AVIF / JPEG XL 변환 — 포맷 전쟁 2026

2026년의 이미지 포맷 풍경:

| 포맷 | 압축률(JPEG=1) | 디코드 비용 | 알파 | 애니메이션 | 브라우저 지원 (2026) |

| ------- | ------------- | ----------- | ---- | --------- | ------------------------------------ |

| JPEG | 1.0 | 매우 낮음 | X | X | 100% |

| PNG | 0.7 (사진) | 낮음 | O | X | 100% |

| WebP | 1.3–1.5 | 낮음 | O | O | 100% (IE 제외, 사실상 100%) |

| AVIF | 1.5–2.0 | 보통 | O | O | 95%+ (Chrome 85+, Firefox 93+, Safari 16.4+) |

| JPEG XL | 1.6–2.5 | 낮음 | O | O | Safari 17+, Chrome 137+(2025년 활성화) |

| HEIC | 1.8 | 보통 | O | O | Safari 11+, Chrome 우회 필요 (사실상 안 씀) |

**자동 협상(content negotiation)이 핵심이다.**

Client Accept: image/avif,image/webp,image/*,*/*;q=0.8

CDN: AVIF 디코드 가능 → AVIF 반환

아니면 WebP, 아니면 JPEG

Cloudinary `f_auto`, ImageKit `f-auto`, Imgix `auto=format`, Cloudflare Polish 모두 같은 작업을 한다.

**Apple Smart HDR · Display-P3 색공간.**

2026년 iPhone 사진은 기본적으로 HDR + Display-P3로 찍힌다. 일반 sRGB로 변환하면 **색이 죽는다**. Cloudinary·Imgix는 HDR 메타데이터(HEIF gain map)를 보존하거나 변환하는 옵션이 있다. 일반 CDN은 보통 sRGB로 다운컨버트한다.

**OKLab 컬러 보간.**

CSS Color Module Level 4에서 등장한 OKLab(2020년 발표)이 2026년 표준 그라데이션 색 공간이 되었다. 이미지 CDN의 그라데이션 합성·라이팅 효과(Cloudinary `e_artistic`, Imgix `blend-color`)도 OKLab 기반으로 옮겨가는 중.

14장 · LCP 최적화 — srcset / picture / fetchpriority

이미지 CDN이 LCP에 기여하는 건 **세 단계**다.

(1) 정확한 크기 — `srcset` + `sizes`

src="/hero-1600.jpg"

srcset="

/hero-400.jpg 400w,

/hero-800.jpg 800w,

/hero-1600.jpg 1600w,

/hero-3200.jpg 3200w

"

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

alt="hero"

/>

브라우저는 화면 크기·DPR에 맞춰 가장 작은 적합한 후보를 받는다. 모바일에서 1600px짜리를 안 받으면 LCP가 2–3배 빨라진다.

(2) 포맷 협상 — `picture` + `source`

브라우저가 AVIF 디코더가 있으면 AVIF만 받는다. JPEG는 폴백.

(3) 우선순위 — `fetchpriority` + `preload`

rel="preload"

as="image"

href="/hero-1600.avif"

imagesrcset="/hero-800.avif 800w, /hero-1600.avif 1600w"

imagesizes="(max-width: 768px) 100vw, 1600px"

type="image/avif"

/>

`fetchpriority="high"` — 다른 이미지보다 먼저 받아라. `preload` — HTML 파싱 끝나기 전에 시작해라. 둘 다 합쳐서 LCP가 약 200–500ms 단축된다.

next/image의 `priority={true}`가 이걸 자동으로 한다.

15장 · 한국 — 토스 CDN / 카카오 CDN / NAVER CDN / KT CDN

한국 시장은 글로벌 CDN과 **별도로** 토착 시장이 있다.

토스 CDN (자체 구축)

토스는 자체 CDN을 구축해 운영한다. 외부에 일반 판매하진 않지만 **토스 광고 SDK·결제 SDK가 토스 CDN을 통해 전 세계 배포**된다. 토스의 사진/이미지 자산도 자체 CDN을 거친다. 한국 내 LCP는 일반 글로벌 CDN보다 빠르다.

카카오 CDN

카카오엔터프라이즈가 운영하는 클라우드 CDN. **국내 사이트·카카오톡 채널 페이지·다음**에서 광범위하게 쓰인다.

가격: 트래픽 $0.01–0.03/GB(국내). 글로벌 CDN보다 살짝 비싸지만 **한국 내 latency가 좋고 KT·SKT·LG의 ISP 캐싱과 잘 묶인다.**

NAVER CDN (NCP CDN+/Global CDN)

네이버 클라우드 플랫폼이 운영. 한국 내 트래픽이 큰 e-커머스·콘텐츠 회사가 많이 쓴다. **GeoIP·Adaptive bitrate 같은 부가 기능**이 카카오 CDN보다 살짝 풍부.

KT CDN

KT가 운영하는 가장 오래된 국내 CDN. 통신사 기반이라 **KT 가입자에게는 마지막 hop이 극단적으로 짧다.** 미디어·방송사 OTT 트래픽이 많이 쓴다.

**한국 사이트가 글로벌 CDN을 쓸 때의 문제.**

- AWS CloudFront 서울 PoP가 있지만, **한국 ISP 백본 라우팅 사정상** KT CDN보다 약간 늦는 경우가 있다.

- Cloudflare는 서울 PoP가 잘 동작한다.

- 100% 한국 트래픽이면 국내 CDN, 글로벌 트래픽이면 Cloudflare/Bunny가 일반적.

16장 · 일본 — メルカリ ImageFlux / pixiv ImgFlux / さくら CDN / Akamai JP

일본 시장 역시 글로벌과 별도로 강한 토착 시장이 있다.

メルカリ ImageFlux (Sakura 기반)

메르카리의 이미지 변환 시스템. 사쿠라 인터넷의 **ImageFlux** 서비스 위에서 운영된다. 메르카리의 수억 장 상품 이미지가 ImageFlux의 URL 변환을 거쳐 사용자에게 도달.

https://img.mercdn.net/.../<base64-encoded-path>

ImageFlux 자체는 사쿠라가 일반 판매하는 서비스로, **일본 내 e-커머스에서 많이 쓴다**. URL 변환 문법은 Imgix와 유사.

가격(2026): 월 5,000円부터, 트래픽·변환 묶음.

pixiv ImgFlux (자체)

픽시브가 자체 운영하는 이미지 변환 인프라. 외부 판매 X. 일러스트·만화 이미지의 고품질 변환(투명도·CMYK→sRGB·다중 레이어)이 강점.

さくらインターネット CDN

사쿠라의 일반 CDN 서비스. **일본 내 PoP**이 좋고, ImageFlux와 묶어서 쓸 수 있다.

가격: $0.01–0.02/GB(일본).

Akamai Japan

Akamai 본사의 일본 법인. **일본의 큰 미디어·방송·은행·통신**이 대부분 Akamai를 쓴다. 가격은 협의지만 매우 안정적이라는 평. NHK·NTT·KDDI 일부 서비스가 Akamai 위에서 돌아간다.

**일본 사이트가 글로벌 CDN을 쓸 때의 문제.**

- 도쿄 PoP는 Cloudflare·AWS·Akamai 모두 좋음

- 단, **JPNIC 백본을 거치는 ISP 사정** 때문에 일부 라우팅에서 사쿠라 CDN이 더 빠르기도 함

- 대형 일본 회사는 보통 **사쿠라/Akamai를 메인 + Cloudflare를 글로벌 보조**로 묶는다

17장 · 누가 무엇을 골라야 하나 — 페르소나별 권장

자, 이제 한 번 압축해 보자.

페르소나 A — 1인 개발자 / 블로거 (트래픽 < 100GB/month, 이미지 < 1000장)

**추천: jsDelivr 또는 statically.io + Vercel/Cloudflare Pages**

- 비용: $0

- 작동: GitHub repo에 이미지 올리고 `cdn.jsdelivr.net/gh/...` 또는 `cdn.statically.io/img/...`로 임베드

- 변환이 필요하면 statically.io의 `f=auto,w=800` 옵션 사용

- 호스팅은 Vercel/Cloudflare Pages 무료 플랜

- LCP는 next/image의 `priority` + 정적 빌드로 충분

페르소나 B — 스타트업 SaaS (트래픽 1–10TB/month, 이미지 수만 장)

**추천: Cloudflare Images 또는 Bunny CDN + next/image custom loader**

- Cloudflare Images = 정액 + 무제한 대역폭 = 예측 가능

- Bunny CDN = 변동제 + 매우 싼 단가 = 트래픽 큰 달도 부담 적음

- 둘 다 next/image의 loader로 통합 가능

- AI 기능은 거의 안 쓰는 케이스가 많음 → 단순 변환만 있는 게 오히려 장점

페르소나 C — 콘텐츠/커머스 회사 (이미지 수십만 장, AI 변환 필요)

**추천: Cloudinary (AI 변환·DAM 필요시) 또는 ImageKit (AI 절반만 필요시)**

- Cloudinary = AI 생성형 변환·DAM·Workflow 자동화·CMS 통합이 가장 깊음

- ImageKit = 30–40% 싸고, 단순 AI 기능까지는 동일 수준

- 미디어 회사 + 색 정확도 중요하면 → Imgix

- 한국이면 → 카카오/NAVER CDN을 메인, Cloudinary는 변환만

페르소나 D — 엔터프라이즈 (글로벌, 계약·SLA·VPC 필요)

**추천: Akamai Image Manager 또는 Fastly IO + S3/GCS/Blob**

- Akamai = 정책 기반·은행·미디어

- Fastly = 개발자 친화·뉴스·소셜

- 클라우드 통합 우선이면 → AWS CloudFront + Serverless Image Handler / Front Door Premium / Cloud CDN

페르소나 E — OSS 라이브러리 / 데모 사이트

**추천: jsDelivr + GitHub Pages / unpkg / esm.sh**

- 라이브러리 자체는 npm → jsDelivr/unpkg

- ESM 사용은 esm.sh

- 데모 이미지는 GitHub repo → jsDelivr/statically.io

- 비용: 영원히 $0

에필로그 — 2026년의 이미지 CDN을 한 줄로

> "이미지 한 장은 1KB부터 10MB까지인데, 사용자는 항상 100KB만 받기를 바란다.

> 그 사이를 메꾸는 게 이미지 CDN이고, 2026년엔 그게 URL 한 줄로 가능하다."

핵심 의사결정 3단계:

1. **트래픽 규모로 1차 필터** — 100GB 미만이면 무료 OSS CDN, 1TB 미만이면 Cloudflare Images/Bunny, 그 이상이면 SaaS 전용 가격 협의.

2. **AI 기능 필요성으로 2차 필터** — 안 필요하면 Bunny/Cloudflare Images, 필요하면 Cloudinary/ImageKit.

3. **프레임워크 통합으로 3차 필터** — Next.js라면 next/image의 loader API로 어떤 CDN이든 통합.

이 글을 다 읽었다면 이미 알 것이다 — "정답"은 없고, **자기 트래픽·기능·예산 조합에서 가장 단순한 것**이 정답이다. URL 한 줄이 바꾸는 LCP를 측정해 보고, 거기서부터 조정하자.

참고 / References

- Cloudinary 공식 문서: https://cloudinary.com/documentation

- Cloudinary AI 변환: https://cloudinary.com/products/cloudinary_ai

- ImageKit 공식 문서: https://docs.imagekit.io/

- Bunny.net 공식 문서: https://docs.bunny.net/

- Bunny Optimizer: https://docs.bunny.net/docs/stream-image-optimizer

- Imgix 문서: https://docs.imgix.com/

- Cloudflare Images: https://developers.cloudflare.com/images/

- Cloudflare Polish: https://developers.cloudflare.com/images/polish/

- AWS Serverless Image Handler: https://aws.amazon.com/solutions/implementations/serverless-image-handler/

- AWS CloudFront 가격: https://aws.amazon.com/cloudfront/pricing/

- Google Cloud Media CDN: https://cloud.google.com/media-cdn

- Azure Front Door: https://learn.microsoft.com/en-us/azure/frontdoor/

- Akamai Image and Video Manager: https://www.akamai.com/products/image-and-video-manager

- Fastly Image Optimizer: https://docs.fastly.com/products/image-optimization-api

- jsDelivr: https://www.jsdelivr.com/documentation

- statically.io: https://statically.io/

- unpkg: https://unpkg.com/

- esm.sh: https://esm.sh/

- KeyCDN: https://www.keycdn.com/

- Edgio (StackPath 이후): https://edg.io/ (2024년 Chapter 11)

- gumlet.io: https://www.gumlet.com/

- Vercel Image Optimization: https://vercel.com/docs/image-optimization

- Next.js next/image: https://nextjs.org/docs/app/api-reference/components/image

- Sakura ImageFlux: https://www.sakura.ad.jp/services/imageflux/

- AVIF support: https://caniuse.com/avif

- JPEG XL support: https://caniuse.com/jpegxl

- Web Vitals — LCP: https://web.dev/articles/lcp

- fetchpriority: https://web.dev/articles/fetch-priority

- OKLab color space: https://bottosson.github.io/posts/oklab/