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

이미지 품질을 최적화하려면 많은 시간이 소요될 수 있습니다. 많은 요소가 허용되는 결과를 렌더링하는 데 기여합니다. 또한 이미지 품질은 개인마다 다르게 생각하므로 결과는 어느 정도 주관적입니다. 따라서 구조화된 실험이 중요합니다.

Adobe Dynamic Media Classic에는 이미지 및 렌더링 결과를 조정하고 최적화하는 100개 이상의 이미지 제공 명령이 포함되어 있습니다. 다음 지침은 프로세스를 간소화하고 일부 필수 명령 및 우수 사례를 사용하여 좋은 결과를 빨리 얻는 데 도움이 될 수 있습니다.

참조: 스마트 이미징.

TIP
Dynamic Media을 사용하여 Dynamic Media 이미지 수정자 및 스마트 이미징의 이점을 알아보십시오 스냅샷.
스냅샷은 Dynamic Media의 최적화된 동적 이미지 제공 기능을 보여 주기 위해 설계된 시각적 데모 도구입니다. 테스트 이미지 또는 Dynamic Media URL로 테스트하여 다양한 Dynamic Media 이미지 수정자의 출력을 시각적으로 관찰하고 다음에 대한 스마트 이미징 최적화를 수행합니다.
  • 파일 크기(WebP 및 AVIF 게재 포함)
  • 네트워크 대역폭
  • DPR(장치 픽셀 비율)
스냅샷을 사용하는 것이 얼마나 쉬운지 알아보려면 스냅샷 교육 비디오 (3분 17초).

이미지 형식(&fmt=) 우수 사례 best-practices-for-image-format-fmt

  • JPG 또는 PNG는 양질의 이미지를 관리할 수 있는 크기 및 용량으로 제공하는 데 적합합니다.
  • URL에 format 명령이 제공되지 않으면 Dynamic Media 이미지 제공의 기본값은 게재 JPG입니다.
  • JPG는 10:1 비율로 압축하며 일반적으로 작은 크기의 이미지 파일을 만듭니다. 이미지에 빈 배경이 포함된 경우를 제외하고 PNG는 약 2:1의 비율로 압축됩니다. 일반적으로 PNG 파일 크기는 JPG 파일보다 큽니다.
  • JPG는 손실 압축을 사용하며, 이것은 압축 중에 그림 요소(픽셀)가 제거됨을 의미합니다. 반면에 PNG는 비손실 압축을 사용합니다.
  • JPG는 종종 가장자리와 대비가 선명한 합성 이미지보다 원본에 더 충실한 사진 이미지를 압축하는 데 사용합니다.
  • 이미지에 투명도가 포함되어 있는 경우, JPG는 투명도를 지원하지 않으므로 PNG를 사용합니다.

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

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

이미지 크기를 동적으로 줄이는 것은 Dynamic Media 이미지 제공이 수행하는 가장 일반적인 작업 중 하나입니다. 이 작업에는 크기 지정이 포함되며, 원할 경우 이미지의 크기를 줄이는 데 사용되는 다운샘플링 모드 지정도 포함됩니다.

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

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

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

이미지 선명하게 하기는 웹 사이트에서 이미지를 제어하는 가장 복잡한 작업으로, 많은 실수가 발생합니다. 다음 유용한 리소스를 참조하여 Adobe Dynamic Media Classic에서 선명하게 하기 및 언샵 마스킹이 작동하는 방식에 대해 자세히 알아보십시오.

모범 사례 백서 Adobe Dynamic Media Classic 및 이미지 서버에서 이미지 선명하게 하기.

Adobe Dynamic Media Classic을 사용하면 수집, 게재 또는 둘 다에 대해 이미지를 선명하게 할 수 있습니다. 그러나 대개 한 가지 방법 또는 다른 방법만 사용하여 이미지를 선명하게 하지만 둘 다 선명하게 하지는 않습니다. URL에서 제공 시 이미지를 선명하게 하면 일반적으로 가장 좋은 결과를 얻게 됩니다.

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

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

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

    • &op_sharpen=amount,radius,threshold

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

      • radius (0-250, 선명하게 표시된 개체 주위에 그려진 "선명하게 하기 선"의 폭(픽셀 단위)입니다.)

        매개 변수에 유의하십시오 radiusamount 서로 싸우려고 노력하세요. 축소 radius 다음을 늘려서 보상할 수 있습니다. amount. Radius 값이 낮을수록 가장자리 픽셀만 선명하게 되고 값이 높을수록 넓은 폭의 픽셀이 선명하게 되므로 더 세밀하게 제어할 수 있습니다.

      • threshold (0-255, 효과 민감도)

        이 매개 변수는, 가장자리 픽셀로 간주되고 필터가 선명하게 하기 전에, 선명하게 되는 픽셀과 주변 영역 간의 필수 차이를 결정합니다. 임계값은 피부 톤과 같이 유사한 색상 영역을 지나치게 선명하게 하는 것을 방지하는 데 유용합니다. 예를 들어 임계값 12는 "노이즈"를 추가하지 않도록 피부 톤 밝기에서 약간의 변형을 무시하는 반면, 속눈썹이 피부와 접촉하는 지점과 같은 고대비 영역에는 여전히 가장자리 대비를 추가합니다.

        필터에 사용하는 모범 사례를 포함하여 이러한 세 매개 변수를 설정하는 방법에 대한 자세한 내용은 Adobe Dynamic Media Classic 및 이미지 서버에서 이미지 선명하게 하기.

      • Adobe Dynamic Media Classic을 사용하면 네 번째 매개 변수인 모노크롬( 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-jpeg-compression-qlt

  • 이 매개 변수는 JPG 인코딩 품질을 제어합니다. 값이 클수록 이미지 품질은 높지만 파일 크기도 큼을 의미하고, 값이 작을수록 이미지 품질은 낮지만 파일 크기도 작음을 의미합니다. 이 매개 변수의 범위는 0-100입니다.

  • 품질에 대해 최적화하기 위해, 매개 변수 값을 100으로 설정하지 마십시오. 설정 90 또는 95와 100 간의 차이는 거의 감지할 수 없지만, 100은 이미지 파일의 크기를 불필요하게 늘립니다. 따라서 품질을 최적화하지만 이미지 파일이 너무 커지지 않도록 하려면 다음을 설정하십시오. qlt= 값을 90 또는 95로 설정합니다.

  • 이미지 파일 크기는 작지만 이미지 품질을 허용 가능한 수준으로 유지하려면 qlt= 값을 80으로 설정합니다. 70에서 75 아래의 값은 상당한 이미지 품질 저하를 초래합니다.

  • 가장 좋은 방법은 중간에 머물기 위해 qlt= 값을 85로 설정하면 중간에 머무릅니다.

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

    • 다음 qlt= 매개 변수에는 일반적인 값을 사용하여 RGB 색도 다운샘플링을 켤 수 있는 두 번째 설정이 있습니다 ,0 (기본값) 또는 값을 사용하여 끄기 ,1.
    • 단순성을 유지하려면 RGB 색도 다운샘플링을 끄기( ,1). 이렇게 설정하면 특히 선명한 가장자리와 대비가 많은 합성 이미지의 경우 일반적으로 나은 이미지 품질을 얻을 수 있습니다.

JPG 압축 사용에 대한 우수 사례로서 &qlt=85,0.

JPEG 크기 지정(&jpegSize=) 우수 사례 best-practices-for-jpeg-sizing-jpegsize

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

  • 이 매개 변수는 KB 단위로 설정됩니다( jpegSize=<size_in_kilobytes>). 이미지 제공에 허용되는 최대 크기를 정의합니다.
  • &jpegSize= 이 JPG 압축 매개 변수와 상호 작용합니다. &qlt=. 지정된 JPG 압축 매개 변수를 사용하는 JPG 응답인 경우( &qlt=)이 다음을 초과하지 않습니다. jpegSize 값, 이미지가 &qlt= 정의된 대로. 그렇지 않으면, &qlt= 이미지가 최대 허용 크기에 맞을 때까지 또는 시스템이 이미지가 맞지 않는다고 판단하여 오류를 반환할 때까지 점차적으로 감소합니다.

모범 사례로서 다음을 설정합니다. &jpegSize= 매개 변수 추가 &qlt= 메모리가 제한된 장치에 JPG 이미지를 전달하는 경우.

우수 사례 요약 best-practices-summary

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

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에서 직접 또는 Adobe Dynamic Media Classic의 이미지 조정 기능을 사용하여 실시간으로 다양한 매개 변수를 테스트해 보십시오. 후자는 조정 작업을 위한 실시간 미리보기를 제공합니다.
  • 가장 좋은 방법은 Dynamic Media 이미지 제공 명령을 이미지 사전 설정으로 그룹화하는 것입니다. 이미지 사전 설정은 기본적으로 다음과 같은 사용자 정의 사전 설정 이름이 있는 URL 명령 매크로입니다. $thumb_low$&product_high$. URL 경로의 사용자 지정 사전 설정 이름은 이러한 사전 설정을 호출합니다. 이와 같은 기능은 웹 사이트의 다양한 이미지 사용 패턴에 대한 명령 및 품질 설정을 관리하는 데 도움이 되며 URL의 전체 길이를 단축합니다.
  • Adobe Dynamic Media Classic은 또한 수집 시 이미지 선명하게 하기를 적용하는 등, 이미지 품질을 조정하는 고급 방법을 제공합니다. 렌더링된 결과를 추가로 튜닝하고 최적화하는 것이 선택 사항인 고급 사용 사례의 경우 Adobe Professional Services을 통해 맞춤화된 인사이트 및 모범 사례를 확인할 수 있습니다.
recommendation-more-help
ba789e76-bace-4e0e-bd26-52691fb2cb26