이미지 품질 최적화 우수 사례

허용되는 결과를 렌더링하는 데 많은 요소가 기여하므로 이미지 품질을 최적화하는 것은 시간이 많이 걸릴 수 있습니다. 그 결과는 부분적으로 주관적이다. 왜냐하면 개인은 이미지의 질을 다르게 인식하기 때문이다. 구조화된 실험이 핵심입니다.

AEM에는 이미지를 조정 및 최적화하고 결과를 렌더링하기 위한 100개 이상의 다이내믹 미디어 이미지 제공 명령이 포함되어 있습니다. 다음 지침은 몇 가지 필수 명령 및 우수 사례를 사용하여 프로세스를 간소화하고 좋은 결과를 신속하게 얻을 수 있도록 도와줍니다.

이미지 형식(&fmt=) 우수 사례

  • JPG 또는 PNG는 크기와 무게를 관리할 수 있고 품질이 우수한 이미지를 전달하는 데 가장 좋은 방법입니다.
  • URL에 형식 명령을 제공하지 않으면 Dynamic Media 이미지 배달은 기본적으로 전달을 위해 JPG로 설정됩니다.
  • JPG는 10:1 비율로 압축되며 일반적으로 이미지 파일 크기가 작아집니다. 이미지가 흰색 배경을 포함하는 경우처럼 일부 경우를 제외하고 PNG는 약 2:1의 비율로 압축됩니다. 일반적으로 PNG 파일 크기가 JPG 파일보다 큽니다.
  • JPG는 손실 압축을 사용합니다. 즉, 압축하는 동안 그림 요소(픽셀)가 삭제됩니다. 반면 PNG는 손실 없는 압축을 사용합니다.
  • JPG는 가장자리와 대비가 선명한 합성 이미지보다 해상도가 높은 사진 이미지를 자주 압축합니다.
  • 이미지에 투명도가 포함되어 있으면 JPG는 투명도를 지원하지 않으므로 PNG를 사용합니다.

이미지 형식에 대한 우수 사례로 가장 일반적인 설정 &fmt=JPG으로 시작합니다.

이미지 크기에 대한 우수 사례

이미지 크기를 동적으로 줄이는 것은 가장 일반적인 작업 중 하나입니다. 이 작업에는 이미지 크기를 축소하는 데 사용되는 크기 지정 및 선택적으로 다운샘플링 모드를 포함합니다.

  • 이미지 크기 조정을 위해 가장 쉽고 가장 간단한 방법은 &wid=<value>&hei=<value>,을 사용하거나 &hei=<value>만 사용하는 것입니다. 이러한 매개 변수는 종횡비에 따라 이미지 너비를 자동으로 설정합니다.
  • &resMode=<value>다운샘플링에 사용되는 알고리즘을 제어합니다. &resMode=sharp2으로 시작합니다. 이 값은 최상의 이미지 품질을 제공합니다. 다운샘플링 value =bilin을 사용하는 동안 아티팩트의 앨리어싱이 발생하는 경우가 많습니다.

이미지 크기 조정을 위한 우수 사례로 &wid=<value>&hei=<value>&resMode=sharp2 또는 &hei=<value>&resMode=sharp2 사용

이미지 선명하게 하기 우수 사례

이미지 선명하게 하기는 웹 사이트에서 이미지를 제어하는 데 가장 복잡한 측면이며 오류가 많이 발생하는 영역입니다. AEM에도 적용되는 Adobe Dynamic Media Classic 이미지 품질 및 Sharpening Best Practices 안내서를 참조하여 선명하게 하기 및 언샵 마스킹 기능이 AEM에서 작동하는 방식에 대한 자세한 내용을 살펴볼 수 있습니다.

언샵 마스크가 있는 이미지 선명하게 하기를 참조하십시오.

AEM을 사용하면 섭취, 전달 시 또는 두 가지 모두를 통해 이미지를 선명하게 만들 수 있습니다. 그러나 대부분의 경우 한 가지 방법 또는 다른 방법을 사용하여 이미지를 선명하게 해야 하지만 두 방법 모두 선명하게 해야 합니다. 배달 시 URL에서 이미지를 선명하게 하면 최상의 결과를 얻을 수 있습니다.

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

  • 단순 선명하게 하기( &op_sharpen) - Photoshop에 사용된 선명 효과 필터와 유사하게, 단순 선명하게 하기는 동적 크기 조정 후 이미지의 최종 보기에 기본 선명하게 하기를 적용합니다. 그러나 이 방법은 사용자가 구성할 수 없습니다. 최상의 방법은 &op_sharpen을 사용하지 않는 경우에 사용하는 것입니다.

  • 언샵 마스킹( &op_USM) - 언샵 마스크는 업계 표준 선명 효과 필터입니다. 가장 좋은 방법은 아래 지침에 따라 언샵 마스킹으로 이미지를 선명하게 하는 것입니다. 언샵 마스킹을 사용하면 다음 3개의 매개 변수를 제어할 수 있습니다.

    • &op_sharpen=양,반경,임계값

      • amount (0-5, 효과의 강도)

      • radius (0-250, 선명하게 된 개체 주위에 그려지는 "선명 효과 선"의 폭(픽셀 단위로 측정됨)

         매개 변수 반경과 액수는 서로 연동된다는 점을 염두에 두십시오. 반경을 줄이는 것은 양을 증가시켜 보상할 수 있습니다. [반경]은 값이 낮으면 가장자리 픽셀만 선명하게 하는 반면, 값이 높으면 더 넓은 범위의 픽셀이 선명하게 됩니다.
        
      • threshold (0-255, 효과의 민감도)

         이 매개 변수는 가장자리 픽셀로 간주되고 필터가 선명하게 하기 전에 선명하게 된 픽셀이 주위 영역과 얼마나 달라야 하는지를 결정합니다. **threshold** 매개 변수는 피부 톤과 같이 유사한 색상이 있는 영역을 과도하게 선명하게 하지 않도록 하는 데 도움이 됩니다. 예를 들어 임계값 12는 &quot;노이즈&quot;를 추가하지 않도록 피부 톤 밝기에 약간의 변형을 무시하고 속눈썹이 스킨을 충족하는 경우와 같이 대비가 높은 영역에 가장자리 대비를 추가합니다.
        

        필터와 함께 사용하는 모범 사례를 비롯하여 이러한 3개의 매개 변수를 설정하는 방법에 대한 자세한 내용은 Adobe Dynamic Media Classic 이미지 품질 및 선명하게 하기 우수 사례 안내서(AEM의 Dynamic Media에도 적용)를 참조하십시오.

    • AEM에서는 네 번째 매개 변수를 제어할 수도 있습니다.단색(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=) 우수 사례

  • 이 매개 변수는 JPG 인코딩 품질을 제어합니다. 값이 높을수록 이미지 품질이 높지만 파일 크기가 커집니다.또는 값이 낮으면 품질이 낮지만 파일 크기가 작다는 의미입니다. 이 매개 변수의 범위는 0-100입니다.

  • 품질에 맞게 최적화하려면 매개 변수 값을 100으로 설정하지 마십시오. 90 또는 95와 100 설정의 차이는 거의 알 수 없지만 100은 이미지 파일의 크기를 불필요하게 증가시킵니다. 따라서 품질에 맞게 최적화하되 이미지 파일이 너무 커지지 않도록 하려면 qlt=<value>을 90 또는 95로 설정합니다.

  • 작은 이미지 파일 크기에 맞게 최적화하지만 이미지 품질을 허용 수준으로 유지하려면 qlt=<value>을 80으로 설정합니다. 70~75보다 낮은 값을 설정하면 이미지 품질이 크게 저하됩니다.

  • 중간에 있으려면 qlt=<value>을 85로 설정하여 중간에 있는 것이 좋습니다.

  • qlt=에서 크로마 플래그 사용

    • qlt= 매개 변수에는 ,1 값을 사용하여 RGB 색도 다운샘플링을 설정하거나 ,0 값을 사용하여 해제할 수 있는 두 번째 설정이 있습니다.
    • 간단하게 유지하려면 RGB 색채도시별 다운샘플링을 해제하십시오(,0). 이 설정을 사용하면 일반적으로 이미지 품질이 향상되며, 특히 가장자리와 대비가 선명한 합성 이미지의 경우 더욱 좋습니다.

JPG 압축에 대한 우수 사례로 &qlt=85,0을 사용합니다.

JPEG 크기 조정(&jpegSize=) 우수 사례

jpegSize는 메모리가 제한된 장치에 이미지를 전달할 때 특정 크기를 초과하지 않도록 보장하기 위한 유용한 매개 변수입니다.

  • 이 매개 변수는 KB(jpegSize=<size_in_kilobytes>)로 설정됩니다. 이미지 전달에 허용되는 최대 크기를 정의합니다.
  • &jpegSize= JPG 압축 매개 변수와 상호 작용합니다 &qlt=. 지정된 JPG 압축 매개 변수(&qlt=)의 JPG 응답이 jpegSize 값을 초과하지 않으면 정의된 대로 &qlt= 이미지가 반환됩니다. 그렇지 않은 경우 이미지가 최대 허용 크기로 맞춰질 때까지 또는 시스템에 맞지 않거나 오류가 반환될 수 없다고 판단될 때까지 &qlt=이(가) 점진적으로 감소됩니다.

JPG 이미지를 메모리가 제한된 장치에 제공하는 경우 &jpegSize=을 설정하고 매개 변수 &qlt=을 추가하는 것이 좋습니다.

우수 사례 요약

이미지 품질과 파일 크기가 작으면 다음 매개 변수 조합으로 시작하는 것이 좋습니다.

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

이러한 설정 제품을 조합하면 대부분의 환경에서 탁월한 결과를 얻을 수 있습니다.

이미지를 추가로 최적화해야 하는 경우 반경이 0.2 또는 0.3으로 설정된 상태에서 시작하여 선명하게 하기(언샵 마스킹) 매개 변수를 점진적으로 미세 조정합니다. 그런 다음 1.75에서 최대 4개(Photoshop의 400%에 해당)로 양을 점차 늘리십시오. 원하는 결과가 달성되었는지 확인합니다.

선명하게 하기 결과가 여전히 만족스럽지 않으면 반경을 십진수 증분으로 늘리십시오. 소수점 증분 단위로 1.75로 양을 다시 시작하고 서서히 4로 늘립니다. 원하는 결과를 얻을 때까지 이 과정을 반복합니다. 위의 값은 크리에이티브 스튜디오가 인증한 접근 방식이지만 다른 값부터 시작하고 다른 전략을 따를 수 있습니다. 결과가 만족스러운지 아닌지는 주관적인 문제이므로, 구조화된 실험이 핵심이다.

여러 가지를 실험하면서 워크플로우를 최적화하는 데 유용한 다음과 같은 일반적인 제안을 찾을 수도 있습니다.

  • URL에서 바로 다양한 매개 변수를 실시간으로 테스트해 보십시오.
  • Dynamic Media 이미지 제공 명령을 이미지 사전 설정으로 그룹화할 수 있는 것이 좋습니다. 이미지 사전 설정은 기본적으로 $thumb_low$&product_high$ 등의 사용자 정의 사전 설정 이름을 가진 URL 명령 매크로입니다. URL 경로에 있는 사용자 정의 사전 설정 이름을 사용하면 이러한 사전 설정을 호출할 수 있습니다. 이러한 기능은 웹 사이트에서 이미지의 다양한 사용 패턴에 대한 명령 및 품질 설정을 관리하고 URL의 전체 길이를 줄이는 데 도움이 됩니다.
  • 또한 AEM은 통합 시 선명하게 하기 이미지를 적용하는 등 이미지 품질을 조정하는 고급 방법을 제공합니다. 렌더링 결과를 보다 세부적으로 조정하고 최적화하는 옵션일 수 있는 고급 사용 사례의 경우, Adobe Professional Services은(는) 사용자 정의된 통찰력과 최상의 작업 방법을 도울 수 있습니다.

이 페이지에서는

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now