Image

소개

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

Instead of pre-converting images in advance, M2Live Cloud Image Service converts and optimizes images in real time at the moment of each user request. This approach is called On-the-fly processing. Store just one original file and any size or format combination can be generated instantly — and once converted, results are automatically cached on the CDN so subsequent requests are served without re-processing.

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

What is On-the-fly?

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

You no longer need to pre-generate multiple versions of your images. Previously you had to store separate files for "300px mobile", "600px tablet", and "1200px desktop", but with On-the-fly processing a single original is all you need — any size and format combination can be produced instantly from one URL.

❌ 기존 방식의 불편함

❌ Pain Points of the Traditional Approach

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

Multiple files must be generated per upload (per resolution × format)
Wasted storage (originals × number of formats × number of resolutions)
Adding a new format (e.g. AVIF) requires re-converting every image
A separate conversion pipeline (server/scripts) must be maintained

✅ On-the-fly 방식의 장점

✅ Advantages of On-the-fly

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

Store only one original file — that's it
Converted to the optimal format and size at request time
Results are automatically cached on the CDN → subsequent requests are served instantly without re-conversion
No separate conversion server or pipeline needed

요청이 처리되는 흐름

Request Processing Flow

1

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

User Request — When the browser requests an image URL, it sends the list of formats it supports in the Accept header (e.g. Chrome includes image/avif,image/webp).

2

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

CDN Cache Lookup — If a cached entry exists for the same URL and format combination, it is returned immediately within milliseconds — no conversion needed.

HIT: 즉시 반환

HIT: Instant return

3

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

On-the-fly Conversion (cache miss) — If there is no cache, the Accept header is analysed to determine the optimal format for the browser, and conversion happens in real time.

AVIF / WebP 변환

AVIF / WebP conversion

4

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

Cache & Respond — The converted result is stored on the CDN. Subsequent identical requests are served instantly without re-conversion. The Vary: Accept header ensures each browser's format is cached independently.

주요 기능 한눈에 보기

Feature Overview

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

Feature	Description	Notes
Auto Format Optimization	Reads the browser Accept header and automatically selects the best format among AVIF, WebP, and JPEG	No extra parameters needed
URL-based Transforms	Insert commands into the URL to handle resize, crop, quality, color, rotate, and more	Uses `c_hdims` keyword
Animation Support	Automatically converts GIF to WebP or AVIF animation	—
Per-browser Independent Caching	The `Vary: Accept` header lets Chrome (AVIF) and Safari (AVIF or WebP) each maintain their own separate cache	—
Image Analysis	Returns metadata such as file size, format, and SSIM as JSON	`analyze/src`

Image

On-the-fly 자동 최적화

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

Images are automatically converted to the most efficient format supported by the browser — no URL parameters required. Simply enable image optimization in the console, or add the optimize command to the URL.

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

How is the optimal format determined automatically?

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

When a browser requests an image it sends the list of formats it supports in the HTTP Accept header. M2Live Cloud reads this header and converts to the most efficient format. As shown below, Chrome and Safari 16+ advertise AVIF support, while Safari 14–15 advertise only 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

Browser Accept Header Examples

# Chrome 85+ / Edge 121+ → auto-converted to AVIF
Accept: image/avif,image/webp,image/apng,image/*,*/*;q=0.8

# Safari 16+ / iOS 16+ → auto-converted to AVIF
Accept: image/avif,image/webp,image/png,image/svg+xml,image/*;q=0.8,*/*;q=0.5

# Safari 14–15 / Firefox 65+ → auto-converted to WebP
Accept: image/webp,image/png,image/svg+xml,image/*;q=0.8,*/*;q=0.5

# IE 11 and below → original format preserved (no conversion)
Accept: image/png,image/svg+xml,image/*;q=0.8,*/*;q=0.5

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

Auto Conversion Results by Browser / Device

브라우저 / 환경	자동 변환 결과	용량 절감 효과	지원 버전
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 이하	원본 포맷 그대로	—	폴백 처리

Browser / Environment	Auto Conversion Result	Size Savings	Supported Version
Chrome	AVIF	~50% (vs JPEG)	85+
Edge	AVIF	~50%	121+
Samsung Internet	AVIF	~50%	21+
Android WebView	AVIF	~50%	Android 12+
Firefox	WebP	~30%	65+ (WebP) / 93+ (AVIF partial)
Safari (macOS)	AVIF / WebP fallback	~50% / ~30%	16+ (AVIF) / 14–15 (WebP)
Safari (iOS)	AVIF / WebP fallback	~50% / ~30%	iOS 16+ (AVIF) / iOS 14–15 (WebP)
IE 11 and below	Original format unchanged	—	Fallback handling

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

First Request vs. Subsequent Requests

1

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

First Request — Cache miss — On-the-fly conversion runs and the result is stored on the CDN (each format stored separately via Vary: Accept).

MISS → 변환 후 캐싱

MISS → Convert & cache

2

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

Subsequent Same Request — Cache hit — The stored result is returned immediately from the CDN. Zero conversion cost; response time under 5 ms.

HIT: <5ms

3

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

Same URL from a Different Browser — A different Accept header means a separate cache key. Chrome (AVIF), Safari 16+ (AVIF), and Safari 14–15 (WebP) all requesting the same URL each receive the format best suited to them.

포맷별 독립 캐시

Independent cache per format

💡 Vary: Accept 헤더가 하는 일

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

💡 What the Vary: Accept Header Does

This HTTP header instructs the CDN to cache the same URL separately per format. Chrome and Safari 16+ users receive AVIF; Safari 14–15 users receive WebP — each served quickly. M2Live Cloud handles this automatically with no developer configuration required.

콘솔에서 활성화하는 방법

How to Enable in the Console

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

Turn on the toggle below in the Service Settings → Media Settings → Image tab to apply automatic optimization to all image requests without any URL parameters.

미디어 설정 — 이미지

이미지 최적화

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

이미지 최적화 활성화

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

Media Settings — Image

Image Optimization

When enabled, automatic optimization is applied to all image requests without adding /optimize to the URL.

Enable Image Optimization

Automatically converts JPG, PNG, and GIF to AVIF or WebP based on browser support. If the source is already WebP or AVIF, it is delivered as-is without conversion.

💡 활성화 후 기존 캐시 처리

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

💡 Existing Cache After Enabling

When image optimization is first enabled, previously cached images in the original format are automatically refreshed upon TTL expiry. If you need immediate effect, run a cache purge.

Image

지원 포맷

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

Most image formats are supported for both input and output — SVG being the exception. The output format is automatically determined in the order AVIF → WebP → original format, with automatic fallback for formats unsupported by the browser.

포맷별 특성 비교

Format Comparison

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

Use the table below when deciding which format to keep as the original and which to output.

포맷	파일 크기 (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	대용량	✅	❌	❌	입력은 지원, 출력 포맷으로는 미지원

Format	File Size (vs JPEG)	Transparency	Animation	HDR	Browser Support
AVIF	~50% savings	✅	✅	✅	Chrome 85+, Edge 121+, Samsung 21+, Safari 16+, iOS 16+
WebP	~30% savings	✅	✅	❌	Chrome, Safari 14+, Firefox 65+, iOS 14+
JPEG	Baseline (100%)	❌	❌	❌	All browsers
PNG	~130–200%	✅	❌	❌	All browsers
GIF	~150–400%	Partial	✅	❌	All browsers
SVG	Variable	✅	✅	—	All browsers (not a conversion target)
TIFF / BMP	Large	✅	❌	❌	Input supported; not supported as output format

포맷 가이드

Format Guide

AVIF — 가장 적극 권장

AVIF — Strongly Recommended

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

The most efficient image format currently available. Based on the AV1 codec, it reduces file size by up to 50% compared to JPEG while delivering better quality. Supports HDR, transparency, and animation. As of 2024, supported by over 90% of browsers worldwide.

WebP — 넓은 호환성

WebP — Wide Compatibility

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

A high-efficiency format developed by Google. About 30% smaller than JPEG and supported by nearly all modern browsers. Automatically provided as fallback to Safari 14–15, iOS 14–15, and Firefox 65+ users who do not support AVIF.

JPEG / PNG / GIF — 안전한 폴백

JPEG / PNG / GIF — Safe Fallback

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

Automatically served to legacy browsers (IE, etc.) that do not support AVIF or WebP. Converting GIF animations to WebP or AVIF can reduce file size by up to 80%. JPEG and PNG are recommended for storing originals.

입력 포맷

Input Formats

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

JPEG, PNG, WebP, AVIF, TIFF, GIF, HEIC/HEIF, and RAW are supported. Animated formats such as animated GIF are also supported.

출력 포맷 및 최대 해상도

Output Formats and Maximum Resolution

포맷	최대 해상도
`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

Format	Maximum Resolution
`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 캐싱은 정상적으로 동작합니다.

ℹ SVG is not a conversion target

SVG is a vector/text format and On-the-fly conversion does not apply. It is delivered as-is while CDN caching continues to work normally.

Image

URL기반 변환

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

Insert the c_hdims keyword and transform commands into the URL to process images on-the-fly. Results are cached on the CDN so repeated requests are served instantly without re-conversion.

URL 구조

URL Structure

기본 패턴

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

Basic Pattern

https://cdn.myservice.com/path/to/image.jpg/c_hdims/[command]/[parameter]

명령어 전체 목록

Full Command Reference

명령어	설명	주요 파라미터
`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`	원본 대비 가공 이미지 유사성 비교	—

Command	Description	Key Parameters
`optimize`	Auto-selects the optimal format for the browser and delivers maximum compression	—
`format`	Explicitly sets the output format	`avif`, `webp`, `jpeg`, `png`, `gif`, `tiff`
`resize`	Resizes while preserving aspect ratio (smaller side as reference)	`WxH`, `!size`, `^size`, `%ratio`
`resizec`	resize when smaller than original; expands with transparent canvas when larger	`WxH`
`resizef`	resize to fit, then pads remaining space with canvas	`WxH`
`resizemc`	When smaller: resize then expand canvas; when larger: expand canvas only (CenterGravity)	`WxH`
`resizecrop`	resize then crop using NorthGravity	`WxH+X+Y`
`crop`	Crop a specific area from the top-left origin	`WxH+X+Y`
`cropcenter`	Crop from the image center	`WxH+X+Y`
`cropc`	Center crop based on min or max of width/height	`min`, `max`
`crophm`	NorthGravity crop with margin derived from width change	`WxH+X+Y`
`quality`	Adjusts output quality (compression level)	`1–100`
`strip`	Removes invisible metadata (default: true)	`true`, `false`
`grayscale`	Converts to grayscale	`true`, `false`
`brightness`	Adjusts brightness	`-100–100`
`sepia`	Applies a sepia tone	`true`, `false`
`invert`	Inverts colors	`true`, `false`
`sharpen`	Adjusts sharpness	`Radius×sigma`
`trim`	Removes background edges from the image	`true`, `false`
`extent`	Adjusts canvas size	`WxH`
`rotate`	Rotates by the specified angle	`0–360`
`flipflop`	Flips horizontally or vertically	`horizontal`, `vertical`
`analyze/src`	Returns image metadata as JSON	—
`analyze/ssim`	Compares similarity between original and processed image	—

⚠ 서비스 키워드 변경 금지

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

⚠ Do Not Change the Service Keyword

The service keyword c_hdims cannot be changed. Changing it will immediately invalidate all cached transforms in the CDN, causing a surge in origin requests.

URL 변환과 캐시 키

URL Transforms and Cache Keys

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

Different URL parameters result in separate cache entries. The three URLs below are each stored as independent cache items.

URL별 독립 캐싱 예시

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

Independent Caching per URL Example

photo.jpg/c_hdims/resize/400x300   → cached as 400px version
photo.jpg/c_hdims/resize/800x600   → cached as 800px version
photo.jpg/c_hdims/resize/1200x900  → cached as 1200px version
# Each stored as an independent cache entry

Image › Transformations

포맷 변경

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

Use the format command to explicitly set the output format. Conversion between almost all image formats is supported, except SVG.

예제

Examples

포맷 변경 예제Format Conversion Examples

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

사용 가능한 포맷 값

Available Format Values

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

Parameter Value	Description	When to Use
`avif`	Forces conversion to AVIF — smallest file size	Chrome/Edge-only services, or when fallback is handled separately via `<picture>`
`webp`	Forces conversion to WebP	WebViews in iOS/Android apps, or when Safari 14+ support is confirmed
`jpeg`	Forces conversion to JPEG	Serving opaque photos safely across all environments
`png`	Forces conversion to PNG	When transparency (alpha channel) must be preserved

AVIF 제약사항 및 옵션

AVIF Constraints and Options

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

AVIF Option Examples

# Convert animated GIF to AVIF
https://example.com/animate.gif/c_hdims/format/avif

# Convert still-image GIF to AVIF (compatibility option for browsers that don't support animated AVIF)
https://example.com/still.gif/c_hdims/format/avif;stillonly

# If AVIF conversion fails, convert to WebP; if WebP also fails, return original
https://example.com/animate.gif/c_hdims/format/avif;stillonly;fallback=webp

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

Option	Description
`stillonly`	Processes still images only. If the source is animated, the original is returned as-is.
`fallback`	If processing fails due to an exception, returns the next format or the original. Also triggers when file size increases after format+optimization. (Excluded when image editing commands are used.)

💡 /optimize와 /format의 차이점

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

💡 Difference Between /optimize and /format

optimize — Reads the browser's Accept header and automatically selects the most efficient supported format. This is recommended in most cases.
Specifying a format explicitly (e.g. format/avif) returns that format regardless of browser support. Images may appear broken in browsers that don't support AVIF (IE, Safari 14–15, etc.).
When using the <picture> tag, explicitly specifying the format with format is more precise.

Image › Transformations

리사이즈

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

Resizes the image. resize is the most fundamental command — it preserves the original aspect ratio and serves the result based on the smaller of the two dimensions.

예제

Examples

리사이즈 예제

# 기본 리사이즈 (비율 유지, 더 작은 쪽 기준)
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 Examples

# Basic resize (maintain aspect ratio, based on smaller dimension)
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

# Ignore aspect ratio (! flag)
https://example.com/sample.jpg/c_hdims/resize/!600x400

# Serve at larger size (^ flag)
https://example.com/sample.jpg/c_hdims/resize/^1000x500

# Conditional resize (> or < flag)
https://example.com/sample.jpg/c_hdims/resize/>1000x500
https://example.com/sample.jpg/c_hdims/resize/1000x>500

# Resize by percentage (% flag)
https://example.com/sample.jpg/c_hdims/resize/50%25

명령어 상세

Command Details

명령어	파라미터	설명
`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` 수행.

Command	Parameter	Description
`resize`	`WxH`	Resizes while preserving aspect ratio. Returns the smaller image when computed against each dimension.
`resizec`	`WxH`	Performs `resize` if smaller than original; expands with transparent canvas if larger. JPEG is automatically converted to PNG since it does not support transparency.
`resizef`	`WxH`	Performs `resize` to fit first, then pads the remaining space by expanding the canvas.
`resizemc`	`WxH`	If smaller than original: resize then expand canvas. If larger: expand canvas only using CenterGravity without resizing.
`resizecrop`	`WxH+X+Y`	If smaller than original: resize with `^` then crop using NorthGravity. If larger: crop with NorthGravity then apply `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="상품 이미지">

💡 Using for Responsive Images

<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="Product image">

Image › Transformations

잘라내기

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

Crops the image around a reference point.

예제

Examples

잘라내기 예제

# 좌상단으로부터 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 Examples

# Crop 500×300 starting at an offset from the top-left
https://example.com/sample.jpg/c_hdims/crop/500x300+10+40

# Crop centered on the image
https://example.com/sample.jpg/c_hdims/cropcenter/500x300+10+10

# Center-crop based on shorter dimension (min)
https://example.com/sample.jpg/c_hdims/cropc/min
https://example.com/sample.jpg/c_hdims/cropc/max

명령어 상세

Command Details

명령어	파라미터	설명
`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.

Command	Parameter	Description
`crop`	`WxH+X+Y`	Crops the image to W×H. The reference point shifts by X and Y. (Default: top-left 0,0)
`cropcenter`	`WxH+X+Y`	Crops the image to W×H. The reference point shifts by X and Y. (Default: image center)
`cropc`	`min` or `max`	`min`: crops from the image center using the smaller of width/height. `max`: uses the larger value — crop area grows or stays the same, serving the original as-is.
`crophm`	`WxH+X+Y`	Crops with NorthGravity, applying a margin of (height − resized height) / 10 based on the width change.

Image › Transformations

최적화 / 품질

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

Use the quality command to adjust lossy image quality, and the optimize command to maintain near-original fidelity while achieving maximum compression.

예제

Examples

품질 조정 예제

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

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

Quality Adjustment Examples

# Set quality to 85
https://example.com/sample.jpg/c_hdims/quality/85

# Auto-optimize for maximum compression
https://example.com/sample.jpg/c_hdims/optimize

명령어 상세

Command Details

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

Command	Parameter	Description
`quality`	`1–100`	Adjusts image quality. Supports JPEG, PNG, WebP, and AVIF. PNG is automatically converted to palette format when quality is adjusted.
`strip`	`true` or `false`	Removes invisible metadata from the image. Defaults to `true` when the command is omitted.
`optimize`	—	Delivers maximum compression while maintaining near-original image quality.

💡 상황별 권장 품질값

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

💡 Recommended Quality Values by Use Case

q=85–90 — High-resolution photos, portfolios, product images that require zoom
q=75–80 — General product images, banners, content images (most commonly used range)
q=60–70 — Thumbnails, listing page images, cases where file size is critical

Image › Transformations

색감 변경

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

Supports a variety of color adjustments including grayscale conversion.

예제

Examples

색감 변경 예제Color Adjustment Examples

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

명령어 상세

Command Details

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

Command	Parameter	Description
`grayscale`	`true`, `false`	Converts to grayscale.
`brightness`	`-100–100`	Adjusts brightness.
`sepia`	`true`, `false`	Applies a sepia tone.
`invert`	`true`, `false`	Inverts colors.
`sharpen`	`Radius×sigma`	Adjusts sharpness.

Image › Transformations

캔버스 조정

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

Adjusts the image canvas.

예제

Examples

캔버스 조정 예제

# 이미지 가장자리 배경 삭제
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

Canvas Adjustment Examples

# Remove background from image edges
https://example.com/sample.jpg/c_hdims/trim/true

# Resize canvas to 700×500
https://example.com/sample.jpg/c_hdims/extent/700x500

# Resize canvas with background color
https://example.com/sample.jpg/c_hdims/extent/700x500;bgcolor=yellow

명령어 상세

Command Details

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

Command	Parameter	Description
`trim`	`true`, `false`	Removes the background from the image edges. If an alpha channel (transparency) exists, the boundary between alpha and non-alpha channels is used as the edge.
`extent`	`WxH`	Adjusts canvas size to the given dimensions. If smaller than original, the result is identical to `cropcenter`. If larger, only the canvas is expanded.

Image › Transformations

배경색 지정

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

Specifies the background color when the image canvas is expanded. Defaults to white if not specified.

예제

Examples

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

The extent, resizef, and resizemc commands may expand the canvas. You can specify a background color for the expanded area.

배경색 지정 예제

# 색상명으로 지정
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

Background Color Examples

# Specify by color name
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

# Specify by hex color code (use 0x prefix)
https://example.com/sample.jpg/c_hdims/extent/700x500;bgcolor=0xFFFF00

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

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

ℹ bgcolor is an option variable, not a command

bgcolor=color-name — See CSS named colors list
bgcolor=color-code — A hex code prefixed with 0x, e.g. 0xFFFFFF

Image › Transformations

회전

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

Rotates or flips the image.

예제

Examples

회전 예제

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

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

Rotate Examples

# Rotate 90 degrees
https://example.com/sample.jpg/c_hdims/rotate/90

# Flip vertically
https://example.com/sample.jpg/c_hdims/flipflop/vertical

명령어 상세

Command Details

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

Command	Parameter	Description
`rotate`	`0–360`	Rotates the image by the specified angle.
`flipflop`	`horizontal` or `vertical`	Flips the image horizontally or vertically.

Image › Transformations

분석

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

Returns image analysis information in JSON format.

예제

Examples

분석 예제

# 이미지 메타정보 분석
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

Analysis Examples

# Analyze image metadata
https://example.com/sample.jpg/c_hdims/analyze/src

# Use the keyword a second time to get info about a resized image
https://example.com/sample.jpg/c_hdims/resize/100/c_hdims/analyze/src

# Compare similarity between an optimized image and the original
https://example.com/sample.jpg/c_hdims/optimize/analyze/ssim

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

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

ℹ /analyze/src is not an image processing function

To obtain information about a resized image, use the c_hdims keyword a second time as shown in the example above.

analyze/src 응답 예시

analyze/src Response Example

JSON 응답 예시JSON Response Example

{
  "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`	최적화 가능한 포맷 목록

Field	Description
`enable`	`true` if the HYPERDIMS module can load/process the image; `false` otherwise
`image.size`	File size (in bytes)
`image.format`	Format
`image.width/height`	Width/height in px
`image.animated`	Whether the image is animated
`image.quality`	Compression quality (present when image is served)
`image.colorspace`	Color space (present when image is served)
`image.chromaSubsampling`	Chroma subsampling (present when image is served)
`elapsed.init`	Time from call to original image initialization (ms)
`elapsed.complete`	Time from call to completion (ms)
`function.optimizable`	List of optimizable formats

analyze/ssim — 유사성 비교

analyze/ssim — Similarity Comparison

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

Compares the similarity between the original and processed image using the SSIM method. Only works at identical resolutions.

SSIM 응답 예시SSIM Response Example

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

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

The ssim value ranges from 0 to 1, where 1 means the original and processed images are identical.

Image › Operations

설정

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

Manage On-the-fly image optimization in the Service Settings → Media Settings → Image tab. Changes take effect immediately for new incoming requests. However, images already cached on the CDN continue to be served in the previous manner until a cache purge is performed.

설정 항목

Settings

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

Setting	Default	What it does	Notes on change
Enable Image Optimization	OFF	Automatically converts JPG, PNG, and GIF to AVIF or WebP based on browser support	Enabling may cause a mix of cached original formats and new formats. A cache purge after the change is recommended
Service Keyword	`c_hdims`	The fixed keyword that precedes URL transform commands	Cannot be changed. Never modify it

미디어 설정 — 이미지

이미지 최적화

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

이미지 최적화 활성화

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

Media Settings — Image

Image Optimization

When enabled, automatic format conversion is applied to all image requests without adding /optimize to the URL.

Enable Image Optimization

Automatically converts JPG, PNG, and GIF to AVIF or WebP based on browser support. If the source is already AVIF or WebP, it is delivered as-is without conversion.

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

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

🚫 Never Change the c_hdims Keyword

The moment c_hdims is changed, all cached transform URLs stored on the CDN are immediately invalidated. This will cause a surge of requests to the origin server and a sharp drop in response speed. If a keyword change is truly necessary, contact the technical support team first.

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

Optimization OFF vs. ON Comparison

최적화 OFF 상태

Optimization OFF

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

Delivers the original format as-is (JPEG → JPEG)
You must manually add optimize to the URL for auto-conversion
The Vary: Accept header is not applied

최적화 ON 상태

Optimization ON

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

The optimal format is automatically applied to all image requests
Existing URLs work as-is — no code changes needed
The Vary: Accept header is applied automatically for per-format independent caching

Image › Operations

Best Practice

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

Whether you are adopting the M2Live Cloud image service for the first time or looking to use it more efficiently in production, refer to the guide below.

포맷·원본 관리 전략

Format and Source Management Strategy

✅ 이렇게 하세요

✅ Do This

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

Enable image optimization (ON). The optimal format for each browser is applied automatically without changing URLs.
Always store originals as high-resolution JPEG or PNG.
For images requiring transparency, keep originals as PNG and let output be auto-converted to WebP or AVIF.
Keep GIF animations as originals — they are automatically converted to WebP or AVIF animation.

❌ 이렇게는 하지 마세요

❌ Avoid This

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

Do not convert originals to WebP or AVIF before uploading — quality loss accumulates.
Do not force a format with format/avif — images may appear broken in unsupported browsers.
Do not append timestamps or random parameters to URLs — cache keys become scattered and hit rate drops sharply.
Do not convert SVG to JPEG or PNG — vector quality is lost and file size only grows.

상황별 권장 URL 패턴

Recommended URL Patterns by Use Case

상황	권장 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 퍼지 없이 새 버전을 즉시 제공

Use Case	Recommended URL Pattern	Reason
General image — optimization only	`img.jpg/c_hdims/optimize`	The optimal format for the browser is selected automatically
Responsive image — specify size	`img.jpg/c_hdims/resize/800x600`	Resizes using the smaller side while preserving aspect ratio
Square thumbnail	`img.jpg/c_hdims/resizecrop/200x200+0+0`	Resize + NorthGravity crop handled in a single step
Transparent PNG → image with background	`logo.png/c_hdims/extent/700x500;bgcolor=white`	White background applied when canvas is expanded
Immediate update after file change	Add a version hash like `img.jpg?v=abc123`	Serves the new version immediately without a CDN purge

캐시 히트율을 높이는 방법

How to Improve Cache Hit Rate

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

💡 If your hit rate is low, check these first

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

Standardize URL parameters. Unnecessary parameters like ?size=large create separate cache keys per URL, lowering the hit rate.
Use a single consistent URL format for the same result. Different representations are managed as separate caches.
Run a cache purge after changing settings. If images do not update after changing On-the-fly optimization settings, stale cache entries remain.

반응형 이미지 구현 예시

Responsive Image Implementation Example

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>

HTML — picture + srcset Responsive Image

<!-- AVIF first, WebP fallback, JPEG final fallback -->
<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">

💡 Even simpler when Image Optimization is ON

When image optimization is enabled, a plain <img> tag is all you need — the optimal format for each browser is served automatically.

<!-- Chrome gets AVIF, Safari 16+ gets AVIF, Safari 14–15 gets WebP — automatically -->
<img src="https://cdn.myservice.com/images/product.jpg" alt="Product image" loading="lazy">

Image › Operations

비용절감 팁

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

Cost scales with the number of unique transforms and data transfer volume.

고유변환 수

Unique Transform Count

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

A unique transform is defined monthly as original × transform. For example, the following counts as 3 unique transforms.

고유변환 예시Unique Transform Example

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

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

Query strings added arbitrarily to bypass browser caching also change the URL and are counted as unique transforms.

고유변환 증가 예시 (비권장)Example of Inflated Unique Transforms (Not Recommended)

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

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

In such cases, consider approaches to reduce unique transform counts, such as ignoring query strings.

캐싱 최적화

Caching Optimization

⚠ 캐싱 최적화 주의사항

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

⚠ Caching Optimization Notes

Never use the VARY header.
Set an appropriate TTL (Time To Live).
Exclude meaningless random query strings.

전송량 절감

Reducing Data Transfer

💡 전송량을 줄이는 방법

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

💡 How to Reduce Data Transfer

Use modern formats (AVIF, WebP) wherever possible — they offer the highest compression ratios.
Use the smallest resolution that can fill the display area.
Do not disable auto optimization (optimize) if you can help it.

Image › Operations

트러블슈팅

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

When an image-related issue occurs, work through the checklist below in order. If you cannot resolve it yourself, contact m2.cs@winesoft.co.kr.

증상별 원인과 해결 방법

Symptoms, Causes, and Solutions

이런 문제가 있다면	원인	해결 방법
이미지가 아예 표시되지 않음	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 응답 시간을 점검하세요.

Symptom	Cause	Solution
Image is not displayed at all	URL path error, origin server failure, or typo in `c_hdims`	Check the response code in URL diagnostics. Verify the spelling of `c_hdims`.
Transform not applied — original served as-is	Image optimization setting is off, or an old version remains in cache	Check whether optimization is enabled in Media Settings. If needed, purge the cache and retry.
Background appears black after PNG canvas expansion	Possible transparency handling error when no background color is specified	Explicitly specify the `;bgcolor=white` option.
AVIF image is not visible	Browser does not support AVIF (IE, Safari 14–15, etc.)	Use `optimize` instead of forcing `format/avif` — it automatically converts to the format best suited for the browser.
Cache hit rate is unusually low	Random URL parameters, TTL too short, or VARY header in use	Remove the VARY header, standardize URL parameters, and review CDN TTL settings.
Image appears blurry or stretched after resize	The `!size` (ignore aspect ratio) option is used, or an unintended command is applied	If aspect ratio must be preserved, use `resize/WxH` without the `!` flag.
GIF animation appears as a still image	Forcing JPEG or PNG extracts only the first frame, or the `stillonly` option is applied	Confirm the output format is WebP or AVIF, and check that the `stillonly` option is not active.
enable is false in analyze results	Image exceeds the size limit set by `maxSourceSize`	The image exceeds the size limit. Basic information is still available under `result.image`.
502 / 504 error occurs	Origin server response is too slow or timed out	Check the origin server status and review the Origin Pull response time.

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

5-Step Checklist for Fast Diagnosis

1

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

Run URL Diagnostics — Enter the image path in Domain Management → URL Diagnostics to check cache HIT/MISS, response code, and whether the CDN is involved.

2

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

Check Response Headers — Run curl -I [image URL] in a terminal and verify that Content-Type is image/avif or image/webp.

3

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

Check Image Optimization Setting — Confirm the optimization toggle is enabled in Service Settings → Media Settings → Image.

4

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

Purge Cache and Retry — If the image does not change after a settings update, purge the cache for that URL and request it again.

5

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

Check Source Image Info — Use image.jpg/c_hdims/analyze/src to retrieve the source file's size, format, and status as 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"

Terminal — Quick Diagnostic Commands

# Check full response headers
curl -I "https://cdn.myservice.com/images/product.jpg/c_hdims/optimize"

# Set Accept header to AVIF and verify conversion result
curl -H "Accept: image/avif" -I "https://cdn.myservice.com/images/product.jpg/c_hdims/optimize"

# Check image metadata as JSON
curl "https://cdn.myservice.com/images/product.jpg/c_hdims/analyze/src"