Image

소개

M2Live Cloud 이미지 서비스는 이미지를 미리 변환해 두는 대신, 사용자 요청이 들어오는 순간 실시간으로 변환·최적화하여 전달합니다. 이 방식을 On-the-fly 처리라고 합니다. 원본 파일 하나만 저장하면 어떤 크기나 포맷 조합도 즉시 만들어낼 수 있고, 한 번 변환한 결과는 CDN에 자동으로 저장되어 다음 요청부터는 변환 없이 바로 응답합니다.

On-the-fly란 무엇인가요?

이미지를 미리 여러 버전으로 만들어놓지 않아도 됩니다. 기존에는 "모바일용 300px", "태블릿용 600px", "PC용 1200px" 이미지를 각각 저장해야 했지만, On-the-fly 방식에서는 원본 하나만 있으면 URL 하나로 원하는 크기와 포맷을 즉시 만들 수 있습니다.

❌ 기존 방식의 불편함

업로드마다 해상도·포맷별로 여러 파일 생성 필요
저장 공간 낭비 (원본 × 포맷 수 × 해상도 수)
새 포맷(예: AVIF)을 추가하려면 전체 이미지 재변환
변환 파이프라인(서버·스크립트)을 별도로 운영·관리

✅ On-the-fly 방식의 장점

원본 파일 하나만 저장하면 끝
요청 시점에 최적 포맷·크기로 즉시 변환
변환 결과는 CDN에 자동 캐싱 → 이후 요청은 변환 없이 즉시 응답
별도 변환 서버나 파이프라인 운영 불필요

요청이 처리되는 흐름

1

사용자 요청 — 브라우저가 이미지 URL을 요청할 때, 자신이 지원하는 포맷 목록을 Accept 헤더에 담아 보냅니다. (예: Chrome은 image/avif,image/webp를 포함)

2

CDN 캐시 조회 — 동일한 URL과 포맷 조합의 캐시가 있으면 바로 반환합니다. 추가 변환 없이 수 밀리초 내에 응답합니다.

HIT: 즉시 반환

3

On-the-fly 변환 (캐시 없을 때) — 캐시가 없으면 Accept 헤더를 분석해 브라우저에 맞는 최적 포맷을 결정하고 실시간으로 변환합니다.

AVIF / WebP 변환

4

캐시 저장 후 응답 — 변환된 결과를 CDN에 저장합니다. 다음번 동일 요청부터는 변환 없이 즉시 응답합니다. Vary: Accept 헤더로 브라우저별 포맷이 각각 독립적으로 캐싱됩니다.

주요 기능 한눈에 보기

기능	설명	비고
자동 포맷 최적화	브라우저 Accept 헤더를 보고 AVIF·WebP·JPEG 중 최적 포맷을 자동 선택	별도 파라미터 불필요
URL 기반 변환	URL에 명령어를 삽입해 리사이즈·잘라내기·품질 조정·색감·회전 등 처리	`c_hdims` 키워드 사용
애니메이션 지원	GIF를 WebP·AVIF 애니메이션으로 자동 변환	—
브라우저별 독립 캐싱	`Vary: Accept` 헤더로 Chrome(AVIF)과 Safari(AVIF 또는 WebP)가 각각 별도 캐시로 관리됨	—
이미지 분석	파일 크기·포맷·SSIM 등 메타정보를 JSON으로 반환	`analyze/src`

Image

On-the-fly 자동 최적화

URL에 아무런 파라미터를 추가하지 않아도 브라우저가 지원하는 가장 효율적인 포맷으로 자동 변환합니다. 콘솔에서 이미지 최적화를 활성화하거나, URL에 optimize 명령어를 추가하는 것만으로 바로 사용할 수 있습니다.

어떻게 브라우저에 맞는 포맷을 자동으로 결정하나요?

브라우저가 이미지를 요청할 때 HTTP Accept 헤더에 "내가 지원하는 포맷 목록"을 함께 보냅니다. M2Live Cloud는 이 헤더를 읽어 가장 효율적인 포맷으로 변환합니다. 아래 예시처럼 Chrome과 Safari 16+는 AVIF를 지원한다고 알리고, Safari 14–15는 WebP까지만 지원한다고 알립니다.

브라우저가 보내는 Accept 헤더 예시

# Chrome 85+ / Edge 121+ → AVIF로 자동 변환
Accept: image/avif,image/webp,image/apng,image/*,*/*;q=0.8

# Safari 16+ / iOS 16+ → AVIF로 자동 변환
Accept: image/avif,image/webp,image/png,image/svg+xml,image/*;q=0.8,*/*;q=0.5

# Safari 14–15 / Firefox 65+ → WebP로 자동 변환
Accept: image/webp,image/png,image/svg+xml,image/*;q=0.8,*/*;q=0.5

# IE 11 이하 → 원본 포맷 유지 (변환 없음)
Accept: image/png,image/svg+xml,image/*;q=0.8,*/*;q=0.5

브라우저 · 디바이스별 자동 변환 결과

브라우저 / 환경	자동 변환 결과	용량 절감 효과	지원 버전
Chrome	AVIF	약 50% (JPEG 대비)	85 이상
Edge	AVIF	약 50%	121 이상
Samsung Internet	AVIF	약 50%	21 이상
Android WebView	AVIF	약 50%	Android 12 이상
Firefox	WebP	약 30%	65 이상 (WebP) / 93 이상 (AVIF 일부)
Safari (macOS)	AVIF / WebP 폴백	약 50% / 약 30%	16 이상 (AVIF) / 14–15 (WebP)
Safari (iOS)	AVIF / WebP 폴백	약 50% / 약 30%	iOS 16 이상 (AVIF) / iOS 14–15 (WebP)
IE 11 이하	원본 포맷 그대로	—	폴백 처리

처음 요청할 때와 그 이후의 차이

1

처음 요청 — 캐시 없음 — On-the-fly 변환이 실행되고, 결과물이 CDN에 저장됩니다. (Vary: Accept로 포맷별로 각각 저장)

MISS → 변환 후 캐싱

2

이후 동일 요청 — 캐시 있음 — CDN에 저장된 결과물을 바로 반환합니다. 변환 비용이 전혀 없고 응답 시간이 5ms 미만입니다.

HIT: <5ms

3

다른 브라우저의 같은 URL 요청 — Accept 헤더가 다르면 별도의 캐시 키로 처리됩니다. Chrome(AVIF)과 Safari 16+(AVIF), Safari 14–15(WebP)가 같은 URL을 요청해도 각자에게 맞는 포맷으로 응답합니다.

포맷별 독립 캐시

💡 Vary: Accept 헤더가 하는 일

CDN이 같은 URL을 포맷별로 따로 캐싱하게 해주는 HTTP 헤더입니다. Chrome·Safari 16+ 사용자에게는 AVIF, Safari 14–15 사용자에게는 WebP가 각각 빠르게 제공됩니다. 개발자가 직접 설정할 필요 없이 M2Live Cloud가 자동으로 처리합니다.

콘솔에서 활성화하는 방법

서비스 설정 → 미디어 설정 → 이미지 탭에서 아래 토글을 켜면, URL 파라미터 없이도 모든 이미지 요청에 자동 최적화가 적용됩니다.

미디어 설정 — 이미지

이미지 최적화

활성화하면 URL에 /optimize를 붙이지 않아도 모든 이미지 요청에 자동으로 적용됩니다.

이미지 최적화 활성화

JPG, PNG, GIF를 브라우저 지원 여부에 따라 AVIF 또는 WebP로 자동 변환합니다. 원본이 이미 WebP나 AVIF라면 변환 없이 그대로 전달합니다.

💡 활성화 후 기존 캐시 처리

이미지 최적화를 처음 활성화하면 기존에 캐싱된 원본 포맷 이미지는 TTL 만료 시 자동으로 갱신됩니다. 즉시 적용이 필요하다면 캐시 퍼지를 실행하세요.

Image

지원 포맷

SVG를 제외한 대부분의 이미지 포맷을 입력과 출력 모두 지원합니다. 출력 포맷은 AVIF → WebP → 원본 포맷 순서로 자동 결정되며, 브라우저가 지원하지 않는 포맷은 자동으로 폴백됩니다.

포맷별 특성 비교

어떤 포맷을 원본으로 보관하고, 어떤 포맷으로 출력할지 결정할 때 아래 표를 참고하세요.

포맷	파일 크기 (JPEG 대비)	투명도	애니메이션	HDR	브라우저 지원
AVIF	약 50% 절감	✅	✅	✅	Chrome 85+, Edge 121+, Samsung 21+, Safari 16+, iOS 16+
WebP	약 30% 절감	✅	✅	❌	Chrome, Safari 14+, Firefox 65+, iOS 14+
JPEG	기준 (100%)	❌	❌	❌	모든 브라우저
PNG	약 130~200%	✅	❌	❌	모든 브라우저
GIF	약 150~400%	부분 지원	✅	❌	모든 브라우저
SVG	가변	✅	✅	—	모든 브라우저 (변환 대상 아님)
TIFF / BMP	대용량	✅	❌	❌	입력은 지원, 출력 포맷으로는 미지원

포맷 가이드

AVIF — 가장 적극 권장

현재 가장 효율적인 이미지 포맷입니다. AV1 코덱 기반으로 JPEG보다 최대 50% 용량을 줄이면서도 화질이 더 좋습니다. HDR, 투명도, 애니메이션까지 모두 지원합니다. 2024년 기준 전 세계 브라우저 점유율 90% 이상에서 지원됩니다.

WebP — 넓은 호환성

Google이 개발한 고효율 포맷입니다. JPEG보다 약 30% 용량이 작으며, 거의 모든 현대 브라우저에서 지원됩니다. AVIF를 지원하지 않는 Safari 14–15, iOS 14–15, Firefox 65+ 사용자에게 자동으로 폴백 제공됩니다.

JPEG / PNG / GIF — 안전한 폴백

AVIF·WebP를 지원하지 않는 구형 브라우저(IE 등)에 자동으로 제공됩니다. GIF 애니메이션은 WebP나 AVIF로 변환하면 최대 80%까지 용량을 줄일 수 있습니다. 원본 보관 포맷으로 JPEG와 PNG를 권장합니다.

입력 포맷

JPEG, PNG, WebP, AVIF, TIFF, GIF, HEIC/HEIF, RAW를 지원합니다. 애니메이션 GIF 등 애니메이션 포맷도 지원합니다.

출력 포맷 및 최대 해상도

포맷	최대 해상도
`PNG`	65,536 × 65,536
`JPG`, `GIF`	65,536 × 65,536
`TIFF`	16,383 × 16,383
`WebP`	16,383 × 16,383
`AVIF`	16,384 × 16,384

ℹ SVG는 변환 대상이 아닙니다

SVG는 벡터/텍스트 포맷이라 On-the-fly 변환이 적용되지 않습니다. 원본 그대로 전달되며, CDN 캐싱은 정상적으로 동작합니다.

Image

URL기반 변환

URL에 c_hdims 키워드와 변환 명령어를 삽입하여 On-the-fly로 이미지를 가공합니다. 변환 결과는 CDN에 캐싱되어 반복 요청은 추가 변환 없이 즉시 응답합니다.

URL 구조

기본 패턴

https://cdn.myservice.com/path/to/image.jpg/c_hdims/[명령어]/[파라미터]

명령어 전체 목록

명령어	설명	주요 파라미터
`optimize`	브라우저 최적 포맷 자동 변환 및 최고 압축률 제공	—
`format`	출력 포맷 명시 지정	`avif`, `webp`, `jpeg`, `png`, `gif`, `tiff`
`resize`	원본 비율 유지하며 크기 조정 (더 작은 쪽 기준)	`가로x세로`, `!크기`, `^크기`, `%비율`
`resizec`	축소 시 resize, 확대 시 투명 캔버스 확장	`가로x세로`
`resizef`	resize 후 부족한 여백 캔버스 확장	`가로x세로`
`resizemc`	축소 시 resize 후 캔버스 확장, 확대 시 캔버스만 확장	`가로x세로`
`resizecrop`	resize 후 NorthGravity 기준 crop	`가로x세로+X+Y`
`crop`	좌상단 기준 특정 영역 잘라내기	`가로x세로+X+Y`
`cropcenter`	이미지 중심 기준 잘라내기	`가로x세로+X+Y`
`cropc`	가로/세로 중 min 또는 max 기준 중앙 crop	`min`, `max`
`crophm`	가로 변경 기준 margin을 주어 NorthGravity crop	`가로x세로+X+Y`
`quality`	출력 품질(압축률) 조정	`1~100`
`strip`	비가시 메타정보 삭제 (기본값: true)	`true`, `false`
`grayscale`	흑백 변환	`true`, `false`
`brightness`	명도 조절	`-100~100`
`sepia`	세피아 색조 변환	`true`, `false`
`invert`	색상 반전	`true`, `false`
`sharpen`	선명도 조절	`Radius×sigma`
`trim`	이미지 가장자리 배경 삭제	`true`, `false`
`extent`	캔버스 크기 조정	`가로x세로`
`rotate`	각도만큼 회전	`0~360`
`flipflop`	수평/수직 대칭이동	`horizontal`, `vertical`
`analyze/src`	이미지 메타정보 JSON 반환	—
`analyze/ssim`	원본 대비 가공 이미지 유사성 비교	—

⚠ 서비스 키워드 변경 금지

서비스 키워드 c_hdims는 변경할 수 없습니다. 변경 시 기존 캐시 전체가 무효화되어 원본 요청이 급증합니다.

URL 변환과 캐시 키

URL 파라미터가 다르면 별도의 캐시 항목으로 저장됩니다. 아래 세 URL은 모두 독립적인 캐시 항목입니다.

URL별 독립 캐싱 예시

photo.jpg/c_hdims/resize/400x300   → 400px 버전 캐싱
photo.jpg/c_hdims/resize/800x600   → 800px 버전 캐싱
photo.jpg/c_hdims/resize/1200x900  → 1200px 버전 캐싱
# 각각 독립적인 캐시 항목으로 저장됨

Image › Transformations

포맷 변경

format 명령어로 출력 포맷을 직접 지정합니다. SVG를 제외한 거의 모든 이미지 포맷 간 변환을 지원합니다.

예제

포맷 변경 예제

https://example.com/sample.jpg/c_hdims/format/webp
https://example.com/sample.jpg/c_hdims/format/avif

사용 가능한 포맷 값

파라미터 값	설명	언제 쓰면 좋을까요?
`avif`	AVIF 포맷으로 강제 변환. 용량이 가장 작습니다	Chrome/Edge 전용 서비스, 또는 `<picture>` 태그로 폴백을 따로 처리하는 경우
`webp`	WebP 포맷으로 강제 변환	iOS·Android 앱 내 WebView, Safari 14+를 확실히 지원하는 경우
`jpeg`	JPEG 포맷으로 강제 변환	투명도가 없는 사진류 이미지를 모든 환경에서 안전하게 제공할 때
`png`	PNG 포맷으로 강제 변환	투명도(알파 채널)를 반드시 보존해야 하는 경우

AVIF 제약사항 및 옵션

AVIF 옵션 예제

# 애니메이션 GIF를 AVIF로 변환
https://example.com/animate.gif/c_hdims/format/avif

# 스틸이미지 GIF를 AVIF로 변환 (애니메이션 AVIF 미지원 브라우저 호환 옵션)
https://example.com/still.gif/c_hdims/format/avif;stillonly

# AVIF 변환 불가 시 WebP로 변환, WebP 변환 불가 시 원본 응답
https://example.com/animate.gif/c_hdims/format/avif;stillonly;fallback=webp

옵션	설명
`stillonly`	스틸이미지만 처리한다. 애니메이션이라면 원본을 응답한다.
`fallback`	예외 발생으로 처리 불가 시 후속 포맷 또는 원본을 응답한다. 포맷+최적화 후 용량 증가 시 예외처리한다. (단, 이미지 편집 명령 시 제외)

💡 /optimize와 /format의 차이점

optimize — 브라우저의 Accept 헤더를 읽어 지원하는 포맷 중 가장 효율적인 것을 자동 선택합니다. 대부분의 경우 이 방식을 권장합니다.
format/avif처럼 포맷을 직접 지정하면 브라우저 지원 여부와 관계없이 해당 포맷이 반환됩니다. AVIF 미지원 브라우저(IE, Safari 14–15 등)에서는 이미지가 깨져 보일 수 있습니다.
<picture> 태그와 함께 사용할 때는 format으로 포맷을 명시적으로 지정하는 것이 더 정확합니다.

Image › Transformations

리사이즈

이미지 크기를 변경합니다. resize는 가장 기본이 되는 명령어로 원본 비율을 유지하며, 변경된 가로/세로 중 더 작은 길이로 서비스합니다.

예제

리사이즈 예제

# 기본 리사이즈 (비율 유지, 더 작은 쪽 기준)
https://example.com/sample.jpg/c_hdims/resize/600x400
https://example.com/sample.jpg/c_hdims/resizec/600x400
https://example.com/sample.jpg/c_hdims/resizef/600x400
https://example.com/sample.jpg/c_hdims/resizef/600x400;bgcolor=yellow
https://example.com/sample.jpg/c_hdims/resizemc/600x400
https://example.com/sample.jpg/c_hdims/resizemc/600x400;bgcolor=0xFFFF00
https://example.com/sample.jpg/c_hdims/resizecrop/600x400+10+40

# 비율 무시 (! 기호)
https://example.com/sample.jpg/c_hdims/resize/!600x400

# 더 큰 이미지로 서비스 (^ 기호)
https://example.com/sample.jpg/c_hdims/resize/^1000x500

# 조건부 리사이즈 (> 또는 < 기호)
https://example.com/sample.jpg/c_hdims/resize/>1000x500
https://example.com/sample.jpg/c_hdims/resize/1000x>500

# 비율로 변경 (% 기호)
https://example.com/sample.jpg/c_hdims/resize/50%25

명령어 상세

명령어	파라미터	설명
`resize`	`가로x세로`	원본 비율을 유지하며 리사이즈. 가로/세로 기준으로 변환했을 때 더 작은 이미지를 반환한다.
`resizec`	`가로x세로`	입력값이 원본보다 작으면 `resize` 수행. 원본보다 크면 투명 캔버스를 확장. JPEG는 투명색 미지원으로 PNG로 자동 변환됨.
`resizef`	`가로x세로`	입력값에 맞춰 `resize` 먼저 진행 후, 부족한 여백 캔버스를 확장.
`resizemc`	`가로x세로`	입력값이 원본보다 작으면 `resize` 후 캔버스 확장. 원본보다 크면 resize 없이 CenterGravity로 캔버스 합성.
`resizecrop`	`가로x세로+X+Y`	입력값이 원본보다 작으면 `^` 옵션으로 resize 후 NorthGravity 기준 crop. 원본보다 크면 NorthGravity 기준 crop 후 `resizemc` 수행.

💡 반응형 이미지에 활용하기

<img
  src="https://cdn.myservice.com/images/img.jpg/c_hdims/resize/800x600"
  srcset="https://cdn.myservice.com/images/img.jpg/c_hdims/resize/400x300 400w,
          https://cdn.myservice.com/images/img.jpg/c_hdims/resize/800x600 800w,
          https://cdn.myservice.com/images/img.jpg/c_hdims/resize/1200x900 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 900px) 800px, 1200px"
  alt="상품 이미지">

Image › Transformations

잘라내기

이미지를 기준점을 중심으로 잘라냅니다.

예제

잘라내기 예제

# 좌상단으로부터 offset만큼 떨어진 점을 기준으로 500×300 잘라내기
https://example.com/sample.jpg/c_hdims/crop/500x300+10+40

# 이미지 중심 기준으로 잘라내기
https://example.com/sample.jpg/c_hdims/cropcenter/500x300+10+10

# 가로/세로 중 min 기준 중앙 잘라내기
https://example.com/sample.jpg/c_hdims/cropc/min
https://example.com/sample.jpg/c_hdims/cropc/max

명령어 상세

명령어	파라미터	설명
`crop`	`가로x세로+X+Y`	이미지를 가로×세로 크기만큼 잘라낸다. X, Y 값에 따라 기준점이 이동. (기본값: 좌상단 0,0)
`cropcenter`	`가로x세로+X+Y`	이미지를 가로×세로 크기만큼 잘라낸다. X, Y 값에 따라 기준점이 이동. (기본값: 이미지 정중앙)
`cropc`	`min` 또는 `max`	`min`: 가로·세로 중 작은 값으로 이미지 중앙 기준 crop. `max`: 큰 값 기준 — crop 영역이 커지거나 같아져 원본 그대로 서비스.
`crophm`	`가로x세로+X+Y`	가로 변경 기준 (세로값 - 리사이즈 세로값) / 10으로 margin을 주어 NorthGravity 기준으로 crop.

Image › Transformations

최적화 / 품질

quality 명령어로 손실 이미지 품질을 조정하고, optimize 명령어로 원본에 가까운 화질을 유지하며 최고의 압축률을 제공합니다.

예제

품질 조정 예제

# 품질 85로 지정
https://example.com/sample.jpg/c_hdims/quality/85

# 최고 압축률 자동 최적화
https://example.com/sample.jpg/c_hdims/optimize

명령어 상세

명령어	파라미터	설명
`quality`	`1~100`	이미지 품질을 변환한다. JPEG, PNG, WebP, AVIF 지원. PNG 품질 조절 시 팔레트 형식으로 자동 변환된다.
`strip`	`true` 또는 `false`	이미지의 비가시 정보(메타데이터)를 삭제한다. 명령 부재 시 기본값 `true`로 자동 설정.
`optimize`	—	원본에 가까운 화질을 유지하며 최고의 압축률을 제공한다.

💡 상황별 권장 품질값

q=85~90 — 고해상도 사진, 포트폴리오, 확대 보기가 필요한 제품 이미지
q=75~80 — 일반 제품 이미지, 배너, 콘텐츠 이미지 (가장 많이 쓰이는 범위)
q=60~70 — 썸네일, 목록 페이지 이미지, 용량이 중요한 경우

Image › Transformations

색감 변경

흑백 이미지 변환 등 다양한 색감 변경을 지원합니다.

예제

색감 변경 예제

https://example.com/sample.jpg/c_hdims/grayscale/true
https://example.com/sample.jpg/c_hdims/brightness/40
https://example.com/sample.jpg/c_hdims/sepia/true
https://example.com/sample.jpg/c_hdims/invert/true
https://example.com/sample.jpg/c_hdims/sharpen/0x1

명령어 상세

명령어	파라미터	설명
`grayscale`	`true`, `false`	흑백으로 변경한다.
`brightness`	`-100~100`	명도를 조절한다.
`sepia`	`true`, `false`	세피아 색조로 변경한다.
`invert`	`true`, `false`	색상을 반전시킨다.
`sharpen`	`Radius×sigma`	선명도를 조절한다.

Image › Transformations

캔버스 조정

이미지 캔버스를 조정합니다.

예제

캔버스 조정 예제

# 이미지 가장자리 배경 삭제
https://example.com/sample.jpg/c_hdims/trim/true

# 캔버스 크기를 700×500으로 조정
https://example.com/sample.jpg/c_hdims/extent/700x500

# 배경색 지정과 함께 캔버스 조정
https://example.com/sample.jpg/c_hdims/extent/700x500;bgcolor=yellow

명령어 상세

명령어	파라미터	설명
`trim`	`true`, `false`	이미지 가장자리의 배경을 삭제한다. 알파 채널(투명)이 있다면 알파 및 비알파 채널의 경계선을 가장자리로 한다.
`extent`	`가로x세로`	입력값에 맞춰 캔버스 크기를 조절한다. 입력값이 원본보다 작으면 `cropcenter`와 동일한 결과. 원본보다 크면 캔버스 크기만 확장된다.

Image › Transformations

배경색 지정

이미지가 확장되는 경우 배경색을 지정합니다. 미지정 시 기본값은 white입니다.

예제

extent, resizef, resizemc 명령어는 캔버스가 확장될 수 있습니다. 이때 배경색을 지정할 수 있습니다.

배경색 지정 예제

# 색상명으로 지정
https://example.com/sample.jpg/c_hdims/extent/700x500;bgcolor=yellow
https://example.com/sample.jpg/c_hdims/resizef/700x500;bgcolor=red
https://example.com/sample.jpg/c_hdims/resizemc/700x500;bgcolor=blue

# 16진수 색상코드로 지정 (0x 접두사 사용)
https://example.com/sample.jpg/c_hdims/extent/700x500;bgcolor=0xFFFF00

ℹ bgcolor는 명령어가 아닌 옵션 변수입니다

bgcolor=색상명 — CSS 색상명 목록 참고
bgcolor=색상코드 — 0xFFFFFF와 같이 0x 문자로 시작하는 16진수 코드

Image › Transformations

회전

이미지를 회전하거나 뒤집습니다.

예제

회전 예제

# 90도 회전
https://example.com/sample.jpg/c_hdims/rotate/90

# 수직 대칭이동
https://example.com/sample.jpg/c_hdims/flipflop/vertical

명령어 상세

명령어	파라미터	설명
`rotate`	`0~360`	각도만큼 회전시킨다.
`flipflop`	`horizontal` 또는 `vertical`	수평, 수직으로 대칭이동시킨다.

Image › Transformations

분석

이미지 분석 정보를 JSON 형식으로 응답합니다.

예제

분석 예제

# 이미지 메타정보 분석
https://example.com/sample.jpg/c_hdims/analyze/src

# 리사이즈된 이미지 정보를 얻으려면 키워드를 한 번 더 사용
https://example.com/sample.jpg/c_hdims/resize/100/c_hdims/analyze/src

# optimize된 이미지와 원본 이미지의 유사성 비교
https://example.com/sample.jpg/c_hdims/optimize/analyze/ssim

ℹ /analyze/src는 이미지 가공 함수가 아닙니다

리사이즈된 이미지의 정보를 얻으려면 위 예제처럼 c_hdims 키워드를 한 번 더 사용해야 합니다.

analyze/src 응답 예시

JSON 응답 예시

{
  "enable": true,
  "url": "/image.jpg",
  "result": {
    "image": {
      "size": 3866,
      "format": "jpeg",
      "width": 477,
      "height": 776,
      "animated": false,
      "quality": 85,
      "colorspace": "srgb",
      "chromaSubsampling": "4:4:4"
    },
    "elapsed": { "init": 2, "complete": 14 },
    "function": {
      "keyword": "hdims",
      "minSourceSize": 0,
      "maxSourceSize": 104857600,
      "optimizable": ["png", "jpeg", "gif", "webp", "avif"]
    }
  }
}

필드	설명
`enable`	HYPERDIMS 모듈에 적재/처리 가능하면 `true`, 불가하면 `false`
`image.size`	용량 (단위: bytes)
`image.format`	포맷
`image.width/height`	가로/세로 길이 (단위: px)
`image.animated`	애니메이션 여부
`image.quality`	이미지 압축품질 (이미지 제공 시 존재)
`image.colorspace`	색 공간 (이미지 제공 시 존재)
`image.chromaSubsampling`	크로마 서브샘플링 (이미지 제공 시 존재)
`elapsed.init`	호출시점 ~ 원본이미지 초기화 (ms)
`elapsed.complete`	호출시점 ~ 완료 (ms)
`function.optimizable`	최적화 가능한 포맷 목록

analyze/ssim — 유사성 비교

원본과 가공된 이미지의 유사성을 SSIM 방식으로 비교합니다. 동일 해상도에서만 동작합니다.

SSIM 응답 예시

{
  "enable": true,
  "url": "/sample.jpg",
  "result": { "ssim": 0.95 }
}

ssim 값의 범위는 0~1이며, 원본과 가공된 이미지가 완전히 동일하면 1입니다.

Image › Operations

설정

서비스 설정 → 미디어 설정 → 이미지 탭에서 On-the-fly 이미지 최적화를 관리합니다. 설정 변경은 이후 들어오는 새 요청부터 바로 적용됩니다. 다만 이미 CDN에 캐싱된 이미지는 퍼지를 실행하기 전까지 기존 방식대로 제공됩니다.

설정 항목

설정	기본값	하는 일	변경 시 주의사항
이미지 최적화 활성화	OFF	JPG·PNG·GIF를 브라우저 지원 여부에 따라 AVIF 또는 WebP로 자동 변환합니다	활성화하면 기존 캐시와 새 포맷이 혼재할 수 있습니다. 변경 후 캐시 퍼지를 권장합니다
서비스 키워드	`c_hdims`	URL 변환 명령어 앞에 오는 고정 키워드입니다	변경이 불가합니다. 절대 수정하지 마세요

미디어 설정 — 이미지

이미지 최적화

이 설정을 켜면 모든 이미지 요청에 자동으로 최적 포맷 변환이 적용됩니다. URL에 /optimize를 추가하지 않아도 됩니다.

이미지 최적화 활성화

JPG, PNG, GIF를 브라우저 지원 여부에 따라 AVIF 또는 WebP로 자동 변환합니다. 원본이 이미 AVIF나 WebP라면 변환 없이 그대로 전달합니다.

🚫 c_hdims 키워드는 절대 변경하지 마세요

c_hdims를 변경하는 순간, CDN에 저장된 모든 변환 이미지의 캐시 URL이 한꺼번에 무효화됩니다. 이로 인해 원본 서버로 요청이 폭증하고, 서비스 응답 속도가 급격히 저하될 수 있습니다. 키워드 변경이 꼭 필요한 상황이라면 반드시 기술지원팀에 먼저 문의하세요.

최적화를 켜기 전 vs 켠 후 비교

최적화 OFF 상태

원본 포맷을 그대로 전달합니다 (JPEG → JPEG)
URL에 optimize를 직접 추가해야 자동 변환됩니다
Vary: Accept 헤더가 적용되지 않습니다

최적화 ON 상태

모든 이미지 요청에 자동으로 최적 포맷이 적용됩니다
기존 URL을 그대로 사용해도 됩니다 (코드 변경 불필요)
Vary: Accept 헤더가 자동 적용되어 포맷별 독립 캐싱이 됩니다

Image › Operations

Best Practice

M2Live Cloud 이미지 서비스를 처음 도입하거나 운영 중에 더 효율적으로 사용하고 싶다면 아래 가이드를 참고하세요.

포맷·원본 관리 전략

✅ 이렇게 하세요

이미지 최적화 설정을 ON으로 활성화하세요. URL을 바꾸지 않아도 브라우저에 맞는 포맷이 자동으로 적용됩니다.
원본은 항상 고해상도 JPEG 또는 PNG로 보관하세요.
투명도가 필요한 이미지는 PNG로 원본 보관하고, 출력은 WebP나 AVIF로 자동 변환되도록 두세요.
GIF 애니메이션은 원본 그대로 보관하세요. WebP나 AVIF 애니메이션으로 자동 변환됩니다.

❌ 이렇게는 하지 마세요

원본을 직접 WebP나 AVIF로 변환해서 업로드하지 마세요. 화질 손실이 누적됩니다.
format/avif처럼 포맷을 강제 지정하지 마세요. 미지원 브라우저에서 이미지가 깨져 보입니다.
URL에 타임스탬프나 무작위 파라미터를 추가하지 마세요. 캐시 키가 분산되어 히트율이 급감합니다.
SVG를 JPEG나 PNG로 변환하지 마세요. 벡터 품질이 사라지고 파일 크기만 커집니다.

상황별 권장 URL 패턴

상황	권장 URL 패턴	이유
일반 이미지 — 최적화만 원할 때	`img.jpg/c_hdims/optimize`	브라우저에 맞는 최적 포맷이 자동 선택됩니다
반응형 이미지 — 크기 지정	`img.jpg/c_hdims/resize/800x600`	원본 비율 유지하며 더 작은 쪽 기준으로 리사이즈
정사각형 썸네일	`img.jpg/c_hdims/resizecrop/200x200+0+0`	리사이즈 + NorthGravity 기준 crop을 한 번에 처리
투명 PNG → 배경 있는 이미지	`logo.png/c_hdims/extent/700x500;bgcolor=white`	캔버스 확장 시 흰색 배경 지정
파일 업데이트 후 즉시 반영	`img.jpg?v=abc123`처럼 버전 해시 추가	CDN 퍼지 없이 새 버전을 즉시 제공

캐시 히트율을 높이는 방법

💡 히트율이 낮다면 아래를 먼저 확인하세요

URL 파라미터를 통일하세요. ?size=large처럼 불필요한 파라미터가 붙으면 URL마다 별도 캐시 키가 만들어져 히트율이 낮아집니다.
같은 결과를 내는 URL 형식은 하나로 통일하세요. 표기가 다르면 별도 캐시로 관리됩니다.
설정 변경 후에는 캐시 퍼지를 실행하세요. On-the-fly 최적화 설정을 바꿨는데 이미지가 바뀌지 않으면, 이전 캐시가 남아 있는 것입니다.

반응형 이미지 구현 예시

HTML — picture + srcset 반응형 이미지

<!-- AVIF 우선, WebP 폴백, JPEG 최종 폴백 -->
<picture>
  <source type="image/avif"
    srcset="
      https://cdn.myservice.com/images/img.jpg/c_hdims/resize/400x300/c_hdims/format/avif  400w,
      https://cdn.myservice.com/images/img.jpg/c_hdims/resize/800x600/c_hdims/format/avif  800w,
      https://cdn.myservice.com/images/img.jpg/c_hdims/resize/1200x900/c_hdims/format/avif 1200w"
    sizes="(max-width: 600px) 400px, (max-width: 900px) 800px, 1200px">
  <source type="image/webp"
    srcset="
      https://cdn.myservice.com/images/img.jpg/c_hdims/resize/400x300/c_hdims/format/webp  400w,
      https://cdn.myservice.com/images/img.jpg/c_hdims/resize/800x600/c_hdims/format/webp  800w,
      https://cdn.myservice.com/images/img.jpg/c_hdims/resize/1200x900/c_hdims/format/webp 1200w"
    sizes="(max-width: 600px) 400px, (max-width: 900px) 800px, 1200px">
  <img src="https://cdn.myservice.com/images/img.jpg/c_hdims/resize/800x600"
    alt="상품 이미지" loading="lazy" width="800" height="600">
</picture>

💡 이미지 최적화 ON 상태라면 더 간단하게 할 수 있어요

이미지 최적화 설정이 활성화되어 있으면, 아래처럼 일반 <img> 태그만 써도 브라우저에 맞는 최적 포맷이 자동으로 제공됩니다.

<!-- Chrome에는 AVIF, Safari 16+에는 AVIF, Safari 14–15에는 WebP가 자동 제공됩니다 -->
<img src="https://cdn.myservice.com/images/product.jpg" alt="상품 이미지" loading="lazy">

Image › Operations

비용절감 팁

비용은 고유변환 수와 전송량에 비례합니다.

고유변환 수

고유변환이란 월 단위로 원본 × 변환으로 정의합니다. 예를 들어 아래의 경우 고유변환은 3개입니다.

고유변환 예시

/sample.jpg/c_hdims/resize/100x100
/sample.jpg/c_hdims/resize/200x200
/sample.jpg/c_hdims/resize/200x200/c_hdims/grayscale/true

브라우저 캐싱을 우회하기 위해 원본에 의미없이 붙이는 쿼리스트링도 URL이 달라지기 때문에 고유변환으로 간주됩니다.

고유변환 증가 예시 (비권장)

/sample.jpg?t=1000/c_hdims/resize/100x100
/sample.jpg?t=1001/c_hdims/resize/100x100
/sample.jpg?t=1002/c_hdims/resize/100x100

이런 경우 쿼리스트링 무시 등 고유변환 수를 줄이는 방법을 고려하세요.

캐싱 최적화

⚠ 캐싱 최적화 주의사항

VARY 헤더는 절대 사용하지 마세요.
적절한 TTL(Time To Live)을 설정하세요.
무의미한 랜덤 쿼리스트링은 배제하세요.

전송량 절감

💡 전송량을 줄이는 방법

가능한 최신 포맷(AVIF, WebP)을 사용하세요. 가장 높은 압축률을 제공합니다.
전시 영역을 채울 수 있는 가장 작은 해상도를 사용하세요.
가능한 자동 최적화(optimize)를 비활성화하지 마세요.

Image › Operations

트러블슈팅

이미지 관련 문제가 생겼을 때 아래 체크리스트를 순서대로 확인해보세요. 직접 해결이 어렵다면 m2.cs@winesoft.co.kr로 문의해 주세요.

증상별 원인과 해결 방법

이런 문제가 있다면	원인	해결 방법
이미지가 아예 표시되지 않음	URL 경로 오류, 원본 서버 장애, `c_hdims` 오타	URL 진단에서 응답 코드를 확인하세요. `c_hdims` 철자를 다시 확인하세요.
변환이 적용되지 않고 원본 그대로 나옴	이미지 최적화 설정이 꺼져 있거나, 캐시에 이전 버전이 남아 있음	미디어 설정에서 최적화 활성화 여부를 확인하고, 필요하면 캐시 퍼지 후 다시 요청해보세요.
PNG 확장 후 배경이 검게 나옴	배경색 미지정 시 투명 처리 오류 가능	`;bgcolor=white` 옵션을 명시적으로 지정하세요.
AVIF 이미지가 보이지 않음	브라우저가 AVIF를 지원하지 않음 (IE, Safari 14–15 등)	`format/avif` 강제 지정 대신 `optimize`를 사용하면 브라우저에 맞는 포맷으로 자동 변환됩니다.
캐시 히트율이 유독 낮음	URL 파라미터가 무작위로 붙거나, TTL이 너무 짧거나, VARY 헤더 사용	VARY 헤더를 제거하고, URL 파라미터를 표준화하고, CDN TTL 설정을 점검하세요.
리사이즈 후 이미지가 뭉개지거나 늘어남	`!크기` (비율 무시) 옵션을 사용하거나 의도치 않은 명령어 사용	비율 유지가 필요하면 `!` 없이 `resize/가로x세로`를 사용하세요.
GIF 애니메이션이 정지 이미지로 나옴	JPEG나 PNG로 강제 변환하면 첫 프레임만 추출됨, 또는 `stillonly` 옵션 적용됨	출력 포맷이 WebP 또는 AVIF인지 확인하고, `stillonly` 옵션이 적용되어 있지 않은지 확인하세요.
analyze 결과에서 enable이 false	`maxSourceSize` 설정으로 용량 제한된 이미지	용량 제한을 초과한 이미지입니다. `result.image`에서 기본 정보는 확인 가능합니다.
502 / 504 오류가 발생함	원본 서버 응답이 너무 느리거나 타임아웃 발생	원본 서버 상태를 확인하고, Origin Pull 응답 시간을 점검하세요.

문제를 빠르게 찾는 5단계 체크리스트

1

URL 진단 실행 — 도메인 관리 → URL 진단에 해당 이미지 경로를 입력해 캐시 HIT/MISS, 응답 코드, CDN 경유 여부를 확인합니다.

2

응답 헤더 확인 — 터미널에서 curl -I [이미지 URL]을 실행하고, Content-Type이 image/avif 또는 image/webp인지 확인합니다.

3

이미지 최적화 설정 확인 — 서비스 설정 → 미디어 설정 → 이미지에서 최적화 토글이 켜져 있는지 확인합니다.

4

캐시 퍼지 후 재확인 — 설정을 변경했는데 이미지가 바뀌지 않으면, 해당 URL의 캐시를 퍼지한 뒤 다시 요청해보세요.

5

원본 이미지 정보 확인 — image.jpg/c_hdims/analyze/src로 원본 파일의 크기·포맷·상태를 JSON으로 확인합니다.

터미널 — 빠른 진단 명령어 모음

# 응답 헤더 전체 확인
curl -I "https://cdn.myservice.com/images/product.jpg/c_hdims/optimize"

# Accept 헤더를 AVIF로 지정해서 변환 결과 확인
curl -H "Accept: image/avif" -I "https://cdn.myservice.com/images/product.jpg/c_hdims/optimize"

# 이미지 메타정보 JSON으로 확인
curl "https://cdn.myservice.com/images/product.jpg/c_hdims/analyze/src"