크기 및 레이아웃 파라미터#

강력한 크기 조정 파라미터로 이미지의 크기와 레이아웃을 제어하세요. 가장 많이 사용되는 변환 옵션입니다.

너비 (w)#

설명#

출력 이미지의 너비를 픽셀 단위로 설정합니다.

범위#

최소: 1px
최대: 16384px

사용법#

?transform=w:800

예시#

800px 너비로 크기 조정 (비율 유지)

?transform=w:800

원본 이미지

너비 300px 적용

높이 (h)#

설명#

출력 이미지의 높이를 픽셀 단위로 설정합니다.

범위#

최소: 1px
최대: 16384px

사용법#

?transform=h:600

예시#

600px 높이로 크기 조정 (비율 유지)

?transform=h:600

너비와 높이 함께 사용

?transform=w:800,h:600

너비와 높이를 모두 지정하면, fit 파라미터가 이미지 크기 조정 방식을 결정합니다.

맞춤 모드 (Fit)#

설명#

너비와 높이를 모두 지정했을 때, fit 파라미터가 지정된 크기 내에서 이미지를 어떻게 조정할지 결정합니다.

기본값#

cover - 이미지가 전체 영역을 채우도록 크기 조정 (필요시 자르기)

사용 가능한 모드#

contain#

설명: 비율을 유지하면서 지정된 크기 내에 전체 이미지가 들어가도록 조정합니다. 빈 공간이 생길 수 있습니다.

?transform=w:400,h:300,fit:contain

사용 사례: 로고, 전체 이미지가 보여야 하는 제품 이미지

원본 (800x600)

contain (400x300)

cover (기본값)#

설명: 비율을 유지하면서 지정된 영역을 완전히 채웁니다. 이미지가 잘릴 수 있습니다.

?transform=w:400,h:300,fit:cover

사용 사례: 썸네일, 히어로 이미지, 일관된 크기가 필요한 카드

원본 (800x600)

cover (400x300)

fill#

설명: 비율을 무시하고 정확히 지정된 크기로 조정합니다. 이미지가 늘어나거나 찌그러질 수 있습니다.

?transform=w:400,h:300,fit:fill

사용 사례: 왜곡이 허용되는 특정 크기 요구사항

inside#

설명: 지정된 크기 내에 맞도록 조정합니다. 축소만 하고 확대는 하지 않습니다.

?transform=w:400,h:300,fit:inside

사용 사례: 최대 크기를 초과하지 않도록 보장

outside#

설명: 지정된 크기 이상이 되도록 조정합니다. 확대만 하고 축소는 하지 않습니다.

?transform=w:400,h:300,fit:outside

사용 사례: 최소 크기를 충족하도록 보장

맞춤 모드 비교#

Fit 모드	비율 유지	확대 가능	축소 가능	자르기
`contain`	✅ 예	✅ 예	✅ 예	❌ 아니오
`cover`	✅ 예	✅ 예	✅ 예	✅ 예
`fill`	❌ 아니오	✅ 예	✅ 예	❌ 아니오
`inside`	✅ 예	❌ 아니오	✅ 예	❌ 아니오
`outside`	✅ 예	✅ 예	❌ 아니오	❌ 아니오

Device Pixel Ratio (DPR)#

설명#

DPR(Device Pixel Ratio)은 고해상도 디스플레이를 위해 실제 이미지 크기를 조정하면서 표시 크기는 일관되게 유지합니다. Retina 및 고DPI 화면에서 선명한 이미지를 위해 필수적입니다.

범위#

최소: 1.0
최대: 4.0
기본값: 1.0

DPR 작동 방식#

실제 이미지 크기는 지정된 크기에 DPR 값을 곱하여 계산됩니다:

실제 이미지 크기 = 지정 크기 × DPR

예시:

w:300,dpr:1.0 → 실제 너비: 300px
w:300,dpr:2.0 → 실제 너비: 600px
w:300,dpr:3.0 → 실제 너비: 900px

브라우저는 이미지를 지정된 크기(300px)로 표시하지만, 고DPI 디스플레이에서 선명한 렌더링을 위해 더 큰 이미지를 다운로드합니다.

사용법#

?transform=w:800,dpr:2.0

시각적 비교#

DPR 1.0 (실제 300px)

DPR 2.0 (실제 600px)

DPR 3.0 (실제 900px)

권장 DPR 값#

기기 유형	권장 DPR	예시
일반 디스플레이	1.0	구형 모니터, 기본 노트북
데스크탑 레티나	2.0	MacBook Pro, iMac, 4K 모니터
모바일 일반	2.0	대부분의 현대 스마트폰
모바일 고급	3.0	iPhone Pro, Samsung Galaxy S 시리즈

DPR 사용 예시#

데스크탑 표준 해상도

?transform=w:400,h:300,dpr:2.0

고해상도 레티나 모바일

?transform=w:400,h:300,dpr:3.0

DPR이 적용된 반응형

?transform=w:800,dpr:2.0,format:auto,fit:cover

일반적인 사용 사례#

반응형 썸네일#

제품 목록용 정사각형 썸네일:

?transform=w:200,h:200,fit:cover,dpr:2.0

히어로 이미지#

랜딩 페이지용 고품질 히어로 이미지:

?transform=w:1920,h:1080,fit:cover,dpr:2.0

프로필 사진#

일관된 원형 프로필 이미지:

?transform=w:128,h:128,fit:cover,dpr:3.0

모바일 최적화#

모바일 기기용 최적화 이미지:

?transform=w:375,dpr:3.0,format:auto,fit:cover

데스크탑 히어로#

데스크탑 최적화 히어로 이미지:

?transform=w:1200,dpr:2.0,format:webp,fit:cover

다음 단계#

시각 효과 - 회전, 블러 등 추가
영역 및 출력 - 영역 추출 및 출력 포맷 제어
Best Practices - 최적화 전략 배우기