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

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

AEM에는 이미지를 조정 및 최적화하고 렌더링 결과를 렌더링하기 위한 100개 이상의 dynamic media 이미지 전달 명령이 포함되어 있습니다. 다음 지침을 통해 프로세스를 간소화하고 몇 가지 필수 명령과 모범 사례를 사용하여 신속하게 좋은 결과를 얻을 수 있습니다.

이미지 형식에 대한 우수 사례(&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 이미지 품질 및 선명하게 하기 우수 사례 안내서를 참조하여 AEM에서 선명하게 하기 및 언샵 마스킹이 작동하는 방식에 대해 자세히 알아보십시오.

언샵 마스크로 이미지 선명하게 하기도 참조하십시오.

AEM을 사용하면 섭취, 게재 시 또는 둘 다에 따라 이미지를 선명하게 할 수 있습니다. 그러나 대부분의 경우 한 가지 방법 또는 다른 방법만 사용하여 이미지를 선명하게 해야 하지만 두 방법 모두 이미지를 선명하게 해야 합니다. 배달 시 URL에서 이미지를 선명하게 하면 일반적으로 최상의 결과를 제공합니다.

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

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

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

    • &op_sharpen=amount,radius,임계값

      • 금액 (0-5, 효과 강도)

      • radius (0-250, 선명하게 표시된 개체 주위에 그려지는 "선명도"의 너비(픽셀 단위)입니다.)

         매개변수 반경과 양이 서로 작용한다는 점을 명심하십시오. 감소 반경은 양을 증가시켜 보상할 수 있다. 반경은 값이 낮을수록 가장자리 픽셀만 선명하게 표시되므로 보다 세밀하게 제어할 수 있지만 값이 높을수록 더 넓은 범위의 픽셀 범위가 선명하게 표시됩니다.

      • 임계값 (0-255, 효과 민감도)

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

        필터에 사용하는 우수 사례를 비롯하여 이러한 세 매개 변수를 설정하는 방법에 대한 자세한 내용은 Dynamic Media Classic 이미지 품질 Adobe 및 선명하게 하기 우수 사례 안내서(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%에 해당)로 점차 늘리십시오. 원하는 결과가 달성되었는지 확인합니다.

선명하게 하기 결과가 여전히 만족스럽지 않으면 반지름을 십진수 증분으로 늘리십시오. 10진마다 증가하기 위해 1.75로 다시 시작하고 점차 4로 늘립니다. 원하는 결과를 얻을 때까지 이 프로세스를 반복합니다. 위의 값은 Creative Studio에서 검증한 접근 방법이지만 다른 값으로 시작하고 다른 전략을 따를 수 있습니다. 결과가 만족스럽든 아니든 주관적인 문제가 되므로 구조화된 실험이 관건이다.

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

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

이 페이지에서는