웹에 최적화된 이미지 제공

핵심 구성 요소가 AEM as a Cloud Service의 웹에 최적화된 이미지 제공 기능을 활용하여 이미지를 보다 효율적으로 전달하는 방법에 대해 알아봅니다.

개요

AEM as a Cloud Service의 웹에 최적화된 이미지 제공 기능은 DAM의 이미지 에셋을 WebP 형식으로 전달합니다. WebP는 이미지의 다운로드 크기를 평균적으로 25% 줄일 수 있어 페이지 로드 속도가 빨라집니다.

핵심 구성 요소에서 웹에 최적화된 이미지 제공을 간단하게 활성화할 수 있으며 모든 일반 브라우저에서 WebP가 지원되므로, 경험은 최종 사용자에게 투명하게 제공됩니다. 유일한 차이점은 콘텐츠가 더욱 빠르게 로드된다는 점입니다.

핵심 구성 요소에 대해 웹에 최적화된 이미지 제공 활성화

웹에 최적화된 이미지 제공을 활성화하려면 페이지 템플릿을 편집한 다음 이미지 구성 요소의 디자인 대화 상자 내에 있는 웹에 최적화된 이미지 활성화 옵션을 활성화하면 됩니다. 이 옵션은 이미지 구성 요소의 v1, v2 및 v3에 사용할 수 있습니다.

디자인 대화 상자 및 AEM 페이지 템플릿에 익숙하지 않은 경우 이 문서를 검토하십시오.

디자인 대화 상자에서 웹에 최적화된 이미지 제공 활성화

이번 단계가 끝났습니다! 이제 이미지가 이미지 구성 요소에 의해 WebP 형식으로 전달됩니다.

웹에 최적화된 이미지 제공 기능을 활성화하면 Dispatcher 구성을 확인하여 이미지 서비스에 대한 요청을 차단하지 않는지 확인할 수도 있습니다. 이 서비스의 URL은 다음 형식을 사용합니다.

/adobe/dynamicmedia/deliver/dm-aid--741ed388-d5f8-4797-8095-10c896dc9f1d/skitouring.jpg?quality=80&preferwebp=true

이는 이 정규 표현식으로 일반화할 수 있습니다.

\/adobe\/dynamicmedia\/deliver\/([^:[]|*\/])\/([\w-])\.(gif|png|png8|jpg|pjpg|bjpg|webp|webpll|webply)(?[a-z0-9=&]*)?

WebP 전달 확인

웹에 최적화된 이미지 제공은 콘텐츠 소비자에게 투명하며 마크업에 영향을 주지 않습니다. 최종 사용자가 알 수 있는 유일한 것은 더 빨라진 로드 시간입니다.

따라서 실제 비헤이비어 변경을 확인하려면 페이지 소스를 확인해야 합니다.

  1. AEM에서 이미지 구성 요소에 대해 웹에 최적화된 이미지 제공을 활성화한 템플릿에 따라 작성된 페이지를 편집합니다.
  2. 페이지 편집기에서 왼쪽 상단의 페이지 정보 버튼을 선택한 다음 게시됨으로 보기​를 선택합니다.
  3. 브라우저 개발자 도구를 사용하여 페이지 소스를 확인한 다음 렌더링된 마크업이 그대로 유지된 상태로 src 속성의 이미지가 새 이미지 서비스의 URL을 가리키는지 확인합니다.

웹에 최적화된 이미지 제공을 사용할 수 없는 경우

웹에 최적화된 이미지 제공은 AEM as a Cloud Service에서만 사용할 수 있습니다. AEM 6.5를 온프레미스 또는 로컬 개발 인스턴스에서 실행하는 경우와 같이 이 기능을 사용할 수 없는 경우 이미지 제공은 적응형 이미지 서블릿 사용으로 돌아갑니다.

웹에 최적화된 이미지 제공을 활성화해도 마크업에 영향을 주지 않는 것처럼, 적응형 이미지 서블릿으로 돌아가도 img 요소의 src 속성 URL만 변경되므로 마크업에 영향을 주지 않습니다.

자주 묻는 질문

내 환경에서 웹에 최적화된 이미지를 활성화할 수 있는 옵션이 없는 이유는 무엇입니까?

이 기능은 AEM as a Cloud Service에서만 사용할 수 있습니다. AEM에서 로컬로 실행하거나 온프레미스에서 실행하는 경우 이미지 구성 요소는 적응형 이미지 서블릿 사용으로 돌아갑니다.

서비스가 로컬 SDK에서 작동하지 않는 이유는 무엇입니까?

localhost에서 AEM SDK를 사용하는 경우 이미지 서비스를 사용할 수 없으며 이미지 렌더링은 적응형 이미지 서블릿 사용으로 돌아갑니다.

웹에 최적화된 이미지 제공 서비스를 사용하려면 프로젝트를 AEMaaCS 개발 환경에 배포하여 이미지 서비스가 어떻게 작동하는지 정확하게 테스트할 수 있습니다.

내 페이지의 일부 이미지에 대해 서비스가 작동하지 않는 이유는 무엇입니까?

이미지 서비스는 /content/dam에 위치한 에셋에 대해서만 작동하며 페이지에 바로 업로드되어 cq:Page 프로젝트에 저장된 이미지에 대해서는 작동하지 않습니다. 이러한 에셋은 여전히 대체 적응형 이미지 서블릿을 통해 전달됩니다.

이 서비스가 더 낮은 품질의 이미지를 표시하거나 이미지 크기를 제한하는 이유는 무엇입니까?

웹에 최적화된 이미지 서비스는 2048픽셀 이하 버전인 모든 이미지 렌디션을 고려하며 요청된 설정(폭, 자르기, 형식, 품질 등)을 적용할 기준으로 가장 큰 이미지 렌디션을 선택합니다.

이미지 서비스는 고급 이미지를 제공하지 않습니다. 따라서 이러한 렌디션은 이미지 서비스가 전달할 수 있는 최상의 크기와 품질을 정의합니다. 그러므로 모든 에셋에 2048픽셀 확대/축소 렌디션이 있는지 확인하고, 그렇지 않은 경우 재처리합니다.

내 이미지의 URL은 .WEBP가 아닌 .JPG 또는 .PNG로 종료되며 SRCSET 속성이나 PICTURE 요소가 없습니다. 이것이 정말로 최적화된 웹 형식을 사용하고 있습니까?

WebP 형식을 제공하기 위해 웹에 최적화된 이미지 제공 서비스는 “콘텐츠 협상”이라는 기술을 사용합니다. 이는 JPG 또는 PNG 파일 확장명을 요청하는 경우에도 WebP 파일 형식을 반환하지만, 이는 요청을 하는 브라우저가 image/webp HTTP 허용 헤더를 제공한 경우에만 수행됩니다. 이 기술을 지원하는 브라우저는 이 헤더를 제공할 수 있으며 이전 브라우저는 여전히 JPG 또는 PNG 파일 형식을 가져옵니다.

이 기법의 장점은 img 요소와 그 속성이 동일하게 유지될 수 있으므로 기존 사이트에 대한 최적의 호환성을 확보하고 웹에 최적화된 이미지 제공으로 원활하게 전환할 수 있다는 점입니다.

내 구성 요소와 함께 웹에 최적화된 이미지 제공을 사용할 수 있습니까?

예. 웹에 최적화된 이미지 제공 서비스는 사용자 지정 구성 요소에서 사용할 수 있습니다. 이 경우 이미지 구성 요소를 확장하는 것이 좋습니다.

다음은 에셋 URL을 생성하는 데 사용할 수 있는 서비스 인터페이스입니다.

com.adobe.cq.wcm.spi.AssetDelivery.getDeliveryURL(Resource resource, Map<String, Object> parameterMap)

이 서비스는 에셋 리소스를 첫 번째 필수 매개변수로 사용하며, 적용되는 원하는 이미지 변환의 추가 맵을 가져올 수 있으며, 여기에는 다음과 같은 매개변수가 포함될 수 있습니다.

  • path - 전달할 에셋 ID는 ([^:\[\]\|\*\/]+) 패턴이어야 합니다(예: unicorn–1234).
  • seoname - 이미지 URL에 추가할 SEO 중심의 사용자 정의 이름으로, 하이픈을 포함할 수 있으며 ([\w-]+) 패턴이어야 합니다(예: my-friend-the-unicorn).
  • format - 원하는 이미지 형식이며, gif, png, png8, jpg, pjpg, bjpg, webp, webpll, webply와 같은 형식일 수 있습니다(예: webp).
  • preferwebp - 가능한 경우 WebP 출력을 전달하고 format 매개변수를 무시하며(콘텐츠 협상 FAQ 참조) 부울입니다(예: true).
  • width - 원하는 이미지 해상도(픽셀 단위)이며, 1보다 커야 합니다(예: 400).
  • quality - 원하는 압축이며, 1에서 100 사이입니다(예: 75).
  • c - 원하는 이미지 자르기 좌표이며, 쉼표로 구분된 픽셀 값입니다(예: 100,100,400,200).
  • r - 원하는 이미지 회전각이며, 90, 180, 270일 수 있습니다(예: 90).
  • flip - 원하는 이미지 뒤집기이며, h, v, hv일 수 있습니다(예: h).

새 이미지 서비스에서 제공하는 이미지의 URL은 무엇입니까?

예제 URL 및 정규 표현식은 이전 섹션인 핵심 구성 요소에 대해 웹에 최적화된 이미지 제공 활성화를 참조하십시오.

웹에 최적화된 이미지를 활성화한 후 이미지가 표시되지 않을 수 있습니까?

아니요. 그런 경우는 발생할 수 없습니다.

이 페이지에서는