[AEM Assets]{class="badge positive" title="AEM Assets에 적용됩니다)."}

이미지 품질 최적화 모범 사례 best-practices-for-optimizing-the-quality-of-your-images

마지막 업데이트: 2026년 9월 29일

적용 대상:
Experience Manager as a Cloud Service

작성 대상:

사용자

TIP

Dynamic Media를 처음 사용하십니까? Dynamic Media에 대한 빠르고 간략한 개요를 보려면 Dynamic Media를 사용하여 작업을 참조하십시오.

Adobe Experience Manager은 이미지를 조정, 최적화 및 렌더링하기 위해 100개 이상의 Dynamic Media 이미지 게재 명령을(를) 제공합니다. 이 광범위한 명령 세트를 사용하면 해상도 및 압축에서 선명하게 하기 및 색상 렌더링에 이르기까지 이미지 처리 및 제공 방식의 거의 모든 측면을 제어할 수 있습니다.

해상도, 압축 수준, 파일 형식, 선명하게 하기, 색상 정확도와 같은 몇 가지 서로 다른 요소가 허용되는 결과에 기여하므로 이미지 품질을 최적화하는 것은 반복적인 프로세스이며 경우에 따라 시간이 오래 걸립니다. 개인 사용자가 이미지 품질을 다르게 인식하고 보기 조건이 디스플레이, 브라우저 또는 장치마다 다르기 때문에 결과는 부분적으로 주관적입니다. 이러한 가변성 때문에 구조화된 실험이 필수적입니다: 한 번에 한 변수를 체계적으로 조정하고 렌더링된 출력을 비교하는 것이 일관된 품질을 유지하는 가장 안정적인 경로입니다.

다음 모범 사례는 일련의 핵심 명령과 검증된 기술을 사용하여 프로세스를 간소화하고 고품질 결과를 효율적으로 제공합니다. 이러한 이미지를 적용하는 것은 미학 그 이상의 중요한 문제입니다. 적절히 최적화된 이미지는 파일 크기와 로드 시간을 줄여 페이지 성능, 사용자 경험 및 전체 범위의 디바이스 및 네트워크 조건에 대한 전달을 향상시킵니다.

이미지 품질에 영향을 주는 주요 요소

해상도 및 치수 — 전달된 픽셀 치수를 실제 디스플레이 크기와 일치시켜 불필요한 업스케일링 또는 다운스케일링 아티팩트를 방지합니다.
압축 — 적극적인 압축은 대역폭을 줄이지만 아티팩트를 가져올 수 있으므로 파일 크기와 화면 표시 품질 손실의 균형을 유지합니다.
파일 형식 — 품질과 배달 효율성의 균형을 맞추기 위해 이미지 콘텐츠와 대상 장치에 가장 적합한 형식을 선택합니다.
선명하게 하기 — 크기를 조정하는 동안 발생하는 연화를 상쇄하는 선명하게 하기를 적용하여 세부 정보를 인식합니다.
색상 렌더링 — 다양한 디스플레이 및 보기 환경에서 이미지가 일관되게 표시되도록 정확한 색상을 유지합니다.

권장 방법

기준선을 설정합니다. 비교할 참조 지점을 갖도록 기본 설정으로 이미지를 렌더링합니다.
한 번에 하나의 변수를 조정합니다. 변수를 격리하면 어떤 조정이 어떤 효과를 발생시켰는지 명확하게 알 수 있으므로 단일 명령 또는 매개 변수를 변경한 다음 결과를 평가합니다.
렌더링된 출력을 시각적으로 비교합니다. 이미지 품질은 부분적으로 주관적이므로 대표 장치 및 디스플레이에서 결과를 나란히 검토하십시오.
성능 대비 품질 조정 품질 개선이 페이지 로드 시간 및 전달에 영향을 줄 정도로 파일 크기를 늘리지 않는지 확인합니다.
성공한 설정을 표준화합니다. 일관된 결과를 생성하는 명령 조합을 식별하면 재사용하여 향후 최적화를 간소화합니다.

이러한 필수 명령을 구조화된 실험과 결합하면 Dynamic Media 에셋 전반에서 고품질의 성능 좋은 이미지를 빠르고 반복적으로 제공할 수 있습니다.

Dynamic Media에서 스마트 이미징 활성화 bp-enable-smart-imaging

스마트 이미징:

Dynamic Media에서 스마트 이미징을 활성화하면 클라이언트 브라우저 기능에 따라 형식, 크기 및 품질 이미지를 자동으로 최적화할 수 있습니다. 스마트 이미징은 각 요청에 대해 이 형식 협상을 수행하여 주어진 브라우저가 지원하는 가장 효율적인 이미지를 제공하므로 페이지가 더 빨리 로드되고 대역폭이 줄어듭니다.
자세한 내용은 스마트 이미징을 참조하세요.
각 브라우저에 가장 작은 크기의 적합한 파일을 전달하면 전송되는 페이로드가 감소하고 페이지 로드 시간이 향상되므로 이러한 매개변수를 동적으로 조정하여 이미지 전달 성능을 향상시킵니다.
관리자와 개발자는 자체 평가 도구 스냅숏을 사용하여 스마트 이미징을 평가할 수 있습니다.

이미지 형식:

사용 사례에 특별히 필요한 경우가 아니면 URL에서 명시적 fmt=webp(WebP) 또는 fmt=avif(AVIF) 명령을 사용하지 마십시오. URL에서 형식을 하드 코딩하는 것은 자동 협상을 무시하며, Smart Imaging이 보다 효율적인 대안을 지원하는 브라우저에 대해 최적의 형식을 제공하지 못하도록 할 수 있습니다.
스마트 이미징은 각 요청에 가장 적합한 형식을 자동으로 선택합니다. 이렇게 하면 전송되는 바이트가 줄어들고 최적의 대역폭 이득이 발생합니다.

기본 동작:

URL에 format 명령이 지정되지 않고 스마트 이미징이 활성화되지 않은 경우 Dynamic Media 이미지 게재의 기본값은 JPEG 형식입니다. 따라서 스마트 이미징을 사용하도록 설정할 때까지 WebP 및 AVIF과 같은 차세대 형식이 자동으로 제공되지 않습니다.

이미지 형식에 대한 정보에 입각한 선택을 하고 스마트 이미징을 활성화함으로써 전달 성능과 사용자 경험을 직접 향상시킬 수 있습니다.

소스 이미지 선택 모범 사례 bp-select-source-image

소스 이미지 작업에 대한 필수 고려 사항:

Source 이미지 형식:
- 무손실 형식 — PNG(Portable Network Graphics), TIFF(Tagged Image File Format) 또는 PSD(Photoshop Document) 사용 — 이미지 품질을 높게 유지하고 JPEG과 같은 손실 형식으로 인해 나타나는 시각적 왜곡인 압축 아티팩트를 제거합니다.
- 이러한 형식은 모든 원본 픽셀 데이터를 유지합니다. 따라서 파일을 처리할 때마다 품질이 손실되지 않으므로 파일을 편집하고, 다시 터치하고, 다시 저장하는 데 이상적입니다.
Source 이미지 크기:
- 고해상도 이미지(으)로 시작하면 작은 이미지를 업스케일링하면 캡처되지 않은 세부 정보를 복구할 수 없으므로 보다 세밀하고 유연성이 향상됩니다.
- 여러 디바이스 또는 화면 해상도와 같이 다양한 크기로 이미지를 표시해야 하는 경우 소스 이미지가 클수록 모든 대상 차원에서 더 나은 비율 조정 및 더 선명한 결과를 얻을 수 있습니다.
- 고객이 미세한 세부 정보를 검사하는 제품 사진과 같이 확대/축소를 지원하는 이미지의 경우 가장 긴 쪽의 약 2,000픽셀 이상의 차원을 목표로 합니다.
- 확대/축소가 필요하지 않은 로고 또는 배너는 의도한 사용에 필요한 최대 크기로 업로드할 수 있습니다.

모든 다운스트림 크기 조정, 자르기 및 압축 단계는 원본 파일의 장단점을 그대로 따르므로 소스 수준에서 이러한 옵션을 선택하면 최종 시각적 콘텐츠의 품질이 직접 결정됩니다.

이미지 크기에 대한 우수 사례 best-practices-for-image-size

이미지 크기를 동적으로 줄이는 것은 이미지 게재에서 가장 일반적인 작업 중 하나입니다. 이는 타겟 치수들을 지정하는 것, 및 선택적으로, 이미지를 다운스케일링하는 데 사용되는 다운샘플링 모드를 선택하는 것을 포함한다. 권장되는 모범 사례 URL 패턴은 &wid=<value>&hei=<value>&resMode=sharp2(또는 높이만 설정된 경우 &hei=<value>&resMode=sharp2)이며, 이는 크기 조정된 이미지에 가장 높은 시각적 품질을 제공합니다.

매개 변수 크기 조정

이미지 크기를 조정하려면 &wid=<value> 및 &hei=<value>을(를) 사용합니다.

&wid=<value>이(가) 이미지 너비를 설정합니다.
&hei=<value>이(가) 이미지 높이를 설정합니다.
하나의 차원만 지정하면 이러한 매개 변수는 이미지의 종횡비에 따라 다른 치수를 자동으로 계산하여 원래 비율을 유지하고 왜곡을 방지합니다.

다운샘플링 모드(resMode)

&resMode=<value>은(는) 이미지의 픽셀 치수를 줄이는 프로세스인 다운샘플링에 사용되는 알고리즘을 제어합니다. 알고리즘의 선택은 최종 스케일링된 이미지의 선명도와 품질에 직접적인 영향을 미친다.

시작: &resMode=sharp2. 이 값은 이미지 크기를 축소할 때 가장자리 세부 묘사와 미세 텍스처를 보존하여 선명하고 아티팩트가 없는 결과를 만들기 때문에 최상의 이미지 품질을 제공합니다.
&resMode=bilin(bilinear)이(가) 더 빠르지만 픽셀 평균을 더 단순하게 하므로 눈에 띄는 들쭉날쭉한 가장자리, 모아레 패턴 및 세밀한 디테일의 손실과 같은 앨리어싱 아티팩트를 자주 생성합니다. 그 결과 bilin이(가) 처리 속도를 위해 이미지 품질을 거래합니다.

bilin과(와) 달리 sharp2 모드는 시각적 충실도의 우선 순위를 지정하므로 고품질 크기 조정된 이미지를 전달하는 데 선호됩니다.

권장 모범 사례

이미지 크기를 조정하는 가장 좋은 방법은 &wid=<value>&hei=<value>&resMode=sharp2 또는 &hei=<value>&resMode=sharp2을(를) 사용하는 것입니다. 이 조합은 대상 차원을 설정하고, 올바른 종횡비를 유지하며, 최고 품질의 다운샘플링 알고리즘을 적용합니다.

이미지 선명하게 하기 우수 사례 best-practices-for-image-sharpening

이미지 선명하게 하기는 웹 사이트에서 이미지를 제어하는 가장 복잡한 측면이며 많은 실수가 발생하는 곳입니다. Experience Manager에서 선명하게 하기 및 언샵 마스킹이 작동하는 방법에 대한 자세한 내용은 다음 유용한 리소스를 참조하십시오.

모범 사례 백서 Adobe Dynamic Media Classic 이미지 품질 및 선명하게 하기 모범 사례는 Experience Manager에도 적용됩니다.
Experience Manager에서 이미지 선명하게 하기 사용 - Dynamic Media을 시청하십시오.

Experience Manager에서는 수집, 전달 또는 둘 다 동안 이미지를 선명하게 할 수 있습니다. 가장 좋은 방법은 둘 다 사용하지 않고 한 가지 방법만 사용하여 이미지를 선명하게 하는 것입니다. URL을 통해 전달 시 이미지를 선명하게 하면 수집된 에셋으로 굽는 대신 최종 렌더링된 크기로 선명하게 하기를 조정할 수 있으므로 대부분의 워크플로우에서 최상의 결과를 제공합니다.

사용할 수 있는 이미지 선명하게 하기 방법에는 두 가지가 있습니다.

단순 선명 효과(&op_sharpen) - Adobe Photoshop 선명 효과 필터와 마찬가지로 동적 크기 조정 후 기본 선명 효과를 적용합니다. 이 메서드는 사용자가 구성할 수 없습니다. 필요한 경우 &op_sharpen을(를) 사용하지 마십시오.
언샵 마스킹(&op_USM) - 언샵 마스킹은 이미지 선명하게 보이도록 가장자리 대비를 증가시키는 업계 표준 선명하게 하기 필터입니다. 가장 좋은 방법은 아래 지침에 따라 선명하지 않은 마스킹으로 이미지를 선명하게 하는 것입니다. 언샵 마스킹을 사용하면 다음 세 가지 매개 변수를 제어할 수 있습니다.
- &op_sharpen=양, 반경, 임계값
  - 금액(0-5, 효과의 강도)
  - 반경(0-250, 선명하게 표시된 개체 주변에 그려진 "선명하게 하기 선"의 너비(픽셀 단위)입니다.)
  radius 매개 변수와 amount 매개 변수에는 반대 효과가 있습니다. 반경을 줄이면 효과가 약해지기 때문에 양을 늘려 보상할 수 있습니다. [반경]을 사용하면 값이 낮을수록 가장자리 픽셀만 선명하게 되므로 더 세밀하게 제어할 수 있지만, 값이 높을수록 넓은 폭의 픽셀이 선명하게 되므로 더 뚜렷한 후광이 생성됩니다.
  - 임계값(0-255, 효과 감도)
  이 매개 변수는 가장자리 픽셀로 간주되기 전에 선명해진 픽셀이 주변 영역과 얼마나 달라야 하는지 결정하고 필터가 선명하게 합니다. threshold 매개 변수를 사용하면 피부 색조와 같이 비슷한 색상의 영역을 너무 선명하게 하지 않도록 할 수 있습니다. 예를 들어, 임계값 12은(는) 피부 색조 밝기의 미세한 변화를 무시하여 "노이즈"를 추가하지 않는 반면 눈썹이 피부와 만나는 경우와 같이 고대비 영역에 가장자리 대비를 추가합니다.
  
  필터에 사용하는 모범 사례를 포함하여 이러한 세 매개 변수를 설정하는 방법에 대한 자세한 내용은 다음 리소스를 참조하십시오.
  - 모범 사례 백서 Adobe Dynamic Media Classic 이미지 품질 및 선명하게 하기 모범 사례는 Experience Manager에도 적용됩니다.
  - Experience Manager에서 이미지 선명하게 하기 사용 - Dynamic Media을 시청하십시오.
  - Experience Manager을 사용하면 네 번째 매개 변수인 흑백(0,1)도 제어할 수 있습니다. 이 매개 변수는 값 0을(를) 사용하여 각 색상 구성 요소에 언샵 마스킹을 별도로 적용할지 또는 값 1을(를) 사용하여 이미지 밝기/강도에 적용할지 여부를 결정합니다.

언샵 마스크 반경 매개 변수로 시작하는 것이 좋습니다. 다음으로 시작할 수 있는 반경 설정은 다음과 같습니다.

웹 사이트: 0.2-0.3픽셀
사진 인쇄(250-300ppi): 0.3-0.5픽셀
오프셋 인쇄(266-300ppi): 0.7-1.0픽셀
캔버스 인쇄(150ppi): 1.5-2.0픽셀

선명하게 하기를 세분화하려면 다음 단계를 따르십시오.

1.75에서 4(으)로 점차적으로 양을 늘립니다.
선명하게 하기가 여전히 만족스럽지 않은 경우 반지름을 소수점 단위로 늘립니다.
1.75부터 4까지 금액을 다시 실행하십시오.
결과가 만족스러울 때까지 필요에 따라 반복합니다.

0에 흑백 매개 변수 설정을 그대로 둡니다.

JPEG 압축 모범 사례(`&qlt=`) best-practices-for-jpef-compression-qlt

JPG 압축에 권장되는 모범 사례 설정은 &qlt=85,0입니다. 이 값은 대부분의 이미지에 대해 제어된 파일 크기와 높은 시각적 품질을 균형을 이룹니다.
이 매개 변수는 JPG 인코딩 품질을 제어합니다. 높은 값은(는) 이미지 품질은 높지만 파일 크기가 큰 것을 의미하고 낮은 값은(는) 이미지 품질은 낮지만 파일 크기가 작은 것을 의미합니다. 유효한 범위는 0-100입니다.
품질을 최적화하려면 매개 변수 값을 100(으)로 설정하지 마십시오. 90 또는 95 설정과 100 설정의 차이는 사람의 눈으로는 거의 인식되지 않습니다. 이 때문에 100 설정이 인식할 수 있는 시각적 효과 없이 이미지 파일 크기를 불필요하게 늘립니다. 따라서 크기가 너무 큰 파일을 방지하면서 품질을 최적화하려면 qlt= value을(를) 90 또는 95(으)로 설정하십시오.
이미지 품질을 허용 가능한 수준으로 유지하면서 작은 파일 크기에 맞게 최적화하려면 qlt= value을(를) 80(으)로 설정하십시오. 70-75 아래의 값은 아티팩트 차단, 밴딩 및 세부 정보 손실과 같이 눈에 띄는 심각한 저하를 초래하므로 프로덕션 이미지에는 권장되지 않습니다.
일반적인 우수 사례로, qlt= value을(를) 85(으)로 설정하는 것이 좋습니다. 이렇게 하면 다양한 이미지 콘텐츠에서 품질과 파일 크기 사이의 안정적인 중간 지표를 확보할 수 있습니다.
qlt=에서 크로마 플래그 사용
- qlt= 매개 변수에는 광도 세부 정보를 유지하면서 색상(색도) 정보의 해상도를 줄이는 압축 기술인 RGB 색도 다운샘플링을 제어하는 두 번째 설정이 있습니다. ,1 값을 사용하여 다운샘플링 on을(를) 켜거나 ,0 값을 사용하여 off을(를) 켜십시오.
- 대부분의 워크플로우에서 RGB 색도 다운샘플링을 해제(,0)한 상태로 시작합니다. 이 설정은 전체 해상도 색상 데이터를 보존하므로 더 나은 이미지 품질을 제공합니다. 이는 다운샘플링 아티팩트가 표시되는 선명한 가장자리, 높은 대비 및 미세 색상 전환이 있는 합성 이미지에 가장 중요합니다.

JPG 압축에 대한 우수 사례로 &qlt=85,0을(를) 사용하십시오.

JPEG 크기 조정 모범 사례(`&jpegSize=`) best-practices-for-jpeg-sizing-jpegsize

&jpegSize= 매개 변수는 전달된 이미지가 지정된 최대 크기를 초과하지 않도록 하여 JPEG 이미지를 메모리가 제한된 장치에 전달하는 데 필수적입니다. 파일 크기에 상한을 적용함으로써 크기가 큰 이미지가 제약된 클라이언트의 사용 가능한 메모리를 압도하지 않도록 합니다.

`&jpegSize=` 작동 방식

구문 jpegSize=<size_in_kilobytes>을(를) 사용하여 &jpegSize=을(를) KB 단위로 설정합니다. 이 값은 이미지 게재에 대해 허용되는 최대 파일 크기을(를) 정의합니다.
&jpegSize=은(는) JPEG 품질(압축) 매개 변수 &qlt=과(와) 함께 작동합니다. 지정된 &qlt= 값의 JPEG 응답이 not이(가) jpegSize 제한을 초과하는 경우 요청된 품질을 유지하면서 이미지가 정의된 대로 정확히 &qlt=과(와) 함께 반환됩니다.
이미지 does이(가) 지정된 &qlt=에서 jpegSize 제한을 초과하는 경우 이미지가 최대 허용 크기 내에 들어갈 때까지 시스템은 점진적으로 &qlt=을(를) 줄입니다. 결과적으로 크기 제약을 만족하기 위해 필요한 만큼만 품질이 감소되어 대상 장치와의 호환성을 보장한다.
시스템이 이미지를 최대 허용 크기 이내로 줄일 수 없다고 판단하면 호환되지 않는 이미지를 전달하지 않고 오류를 반환합니다.

제한된 메모리 장치에 대한 모범 사례

메모리가 제한된 장치에 JPEG 이미지를 전달할 때 은(는) &jpegSize=을(를) 설정하고&qlt=과(와) 연결하는 것이 좋습니다. 이 조합을 사용하면 대상 품질과 하드 크기 한도를 모두 지정할 수 있으므로 시스템은 장치의 메모리 제한 내에 여전히 맞는 가능한 가장 높은 품질을 제공합니다.

모범 사례 요약 best-practices-summary

작은 파일 크기로 높은 이미지 품질을 달성하려면 Dynamic Media 이미지 제공 매개 변수의 권장 조합으로 시작하십시오.

fmt=jpg&qlt=85,0&resMode=sharp2&op_usm=1.75,0.3,2,0

이 조합은 대부분의 상황에서 우수한 결과를 생성하고 대부분의 이미지에 대해 신뢰할 수 있는 기준선으로 사용됩니다. op_usm 값은 USM(unsharp mask) 선명하게 하기를 적용합니다. 여기서 매개 변수는 효과의 양, 반경, 임계값 및 단색 동작을 제어합니다.

미세 조정 선명하게 하기(언샵 마스킹)

이미지를 추가로 최적화해야 하는 경우 다음 절차를 사용하여 언샵 마스크(USM) 매개 변수를 점진적으로 조정하십시오.

반경을 0.2 또는 0.3(으)로 시작 지점으로 설정합니다.
금액을 1.75에서 최대 4까지 늘립니다. 이는 Adobe Photoshop의 400%에 해당합니다.
렌더링된 이미지를 검토하여 원하는 결과가 달성되었는지 확인합니다.
선명하게 하기 결과가 여전히 만족스럽지 않으면 소수점 단위로 반경을 늘립니다.
반경이 소수점 단위로 증가할 때마다 1.75에서 양을 다시 시작한 다음 점차 4(으)로 늘립니다.
원하는 결과가 나올 때까지 4단계와 5단계를 반복합니다.

위의 값은 Creative Studios가 검증한 접근 방식을 나타내지만 다른 값으로 시작하여 다른 전략을 따를 수 있습니다. 결과가 만족스러운지 여부는 주관적인 문제이므로 각 이미지에 대한 선명도, 품질 및 파일 크기 간의 균형을 가장 잘 맞추려면 구조화된 반복 실험이 필수적입니다.

워크플로우 최적화 팁

실험할 때 워크플로를 최적화하는 데 도움이 되는 일반적인 제안은 다음과 같습니다.

URL에서 실시간으로 매개 변수를 테스트합니다. URL에서 직접 값을 조정하면 효과를 즉시 미리 보고 빠르게 반복할 수 있습니다.
명령을 이미지 사전 설정으로 그룹화합니다. Dynamic Media 이미지 제공 명령은 이미지 사전 설정으로 그룹화될 수 있습니다. 이미지 사전 설정은 $thumb_low$ 및 &product_high$과(와) 같은 사용자 지정 사전 설정 이름이 할당된 URL 명령 매크로 집합입니다. URL 경로에서 사용자 정의 사전 설정 이름을 참조하면 이러한 사전 설정이 호출됩니다. 이 기능을 사용하면 웹 사이트에서 다양한 이미지 사용 패턴에 대한 명령 및 품질 설정을 관리하고, 재사용을 통해 일관된 설정을 홍보하며, URL의 전체 길이를 줄일 수 있습니다.
Experience Manager에서 고급 조정 옵션을 사용합니다. Experience Manager은 또한 수집 시 선명하게 하기 적용과 같이, 이미지 품질을 조정하는 고급 방법을 제공합니다. 렌더링 결과를 조정하고 최적화하기 위해 Adobe의 컨설팅 서비스에서 사용자 지정된 insight과 모범 사례를 제공할 수 있습니다.

recommendation-more-help

experience-manager-cloud-service-help-main-toc