응답형 이미지 라이브러리 정보 about-responsive-image-library

데모 URL

설명

1

https://experienceleague.adobe.com/tools/dynamic-media-demo/is-api/responsive-static-image-simple.html?lang=ko

다음은 응답형 이미지가 웹 페이지 너비의 50%를 차지하는 컨테이너 내에 있는 간단한 예입니다. 브라우저 창의 크기가 변경될 때마다 컨테이너 너비가 변경됩니다. 이미지 너비가 200, 400, 600 및 800픽셀로 설정된 구성된 중단점 중 하나에 도달하면 새로운 렌디션이 다운로드되어 표시됩니다. 목표는 불필요한 대용량 이미지 로드를 피하고 네트워크 대역폭을 절약하는 것입니다.

URL을 클릭하여 웹 페이지를 열고 브라우저 창의 크기를 조정하고 네트워크 트래픽을 모니터링합니다.

2

https://experienceleague.adobe.com/tools/dynamic-media-demo/is-api/responsive-static-image-bootstrap.html?lang=ko

다음 Bootstrap 예제는 웹 페이지의 동일한 사용 사례를 보여 줍니다. Bootstrap CSS에 따르면 응답형 이미지가 추가된 레이아웃 셀은 360, 720 및 940 픽셀 중 하나의 폭을 가질 수 있습니다. 이러한 값은 응답형 이미지 라이브러리에 중단점으로 전달되는 것입니다. 따라서 Dynamic Media은 클라이언트의 네트워크 대역폭이 효과적으로 사용되도록 합니다. 또한 클라이언트측 브라우저의 크기 조절로 인한 시각적 아티팩트 없이 이미지가 현재 웹 페이지 레이아웃에 따라 필요한 정확한 크기로 표시되도록 합니다.

URL을 클릭하여 웹 페이지를 열고 브라우저 창의 크기를 변경하여 다른 레이아웃 중단점을 히트하고 네트워크 트래픽을 모니터링합니다.

고급 사용 사례에는 서로 다른 이미지 사전 설정이나 이미지 제공 명령 또는 둘 다를 다른 중단점 값과 연결하는 것이 포함됩니다.

3

https://experienceleague.adobe.com/tools/dynamic-media-demo/is-api/image-presets.html?lang=ko

다음 예제에서는 서로 다른 중단점 크기에 대해 서로 다른 이미지 품질과 형식의 이미지 사전 설정을 사용합니다. 작은 중단점의 경우, 이미지 제공이 6가지 색상으로만 압축된 GIF 이미지를 반환하도록 하는 낮은 품질의 사전 설정이 적용됩니다. 중간 중단점은 고압축의 JPEG에 대해 구성된 이미지 사전 설정을 사용합니다. 가장 큰 중단점은 무손실 PNG를 사용하는 고품질 이미지 사전 설정과 연결됩니다. 이러한 방법은 화면이 더 큰 디바이스가 더 큰 대역폭 및 처리 능력을 가정하는 것에 기초하여, 고품질의 이미지가 이러한 디바이스에 전달되도록 한다.

URL을 클릭하여 웹 페이지를 열고 웹 브라우저 창의 크기를 큰 항목에서 작은 항목으로 변경하고 이미지 품질이 어떻게 감소하는지 확인합니다.

4

https://experienceleague.adobe.com/tools/dynamic-media-demo/is-api/crops.html?lang=ko

이미지 사전 설정 외에도 특정 이미지 제공 명령을 중단점과 연결할 수 있습니다. 다음 예는 화면 이미지 크기가 작아짐에 따라 배너 이미지를 관심 영역으로 점진적으로 자를 수 있는 방법을 보여 줍니다. 여기서 가장 큰 중단점에는 이미지 제공 명령이 전혀 없으므로 배너 이미지가 완전히 표시됩니다. 중간 중단점에서 중간 정도의 자르기를 적용하여 "실행 중" 텍스트가 있는 실행자만 표시됩니다. 작은 중단점에서는 제품만 표시되도록 더 많은 자르기가 적용됩니다.

URL을 클릭하여 웹 페이지를 열고 브라우저 창의 크기를 조정합니다. 더 큰 이미지에서 더 작은 크기로 갈수록 이미지가 어떻게 점진적으로 자르는지 확인하십시오.

5

https://experienceleague.adobe.com/tools/dynamic-media-demo/is-api/template.html?lang=ko

이미지 제공 템플릿에서 이미지 제공 명령을 사용하여 이미지 크기에 따라 특정 템플릿 매개 변수를 제어할 수도 있습니다. 다음 예제에서는 텍스트 오버레이의 글꼴 크기를 를 사용하여 매개 변수화하는 이미지 제공 템플릿을 사용합니다. $fontsize 매개 변수. 응답 이미지는 텍스트가 항상 읽을 수 있도록 작은 이미지 크기에 대해 큰 글꼴 크기를 사용하도록 구성되어 있습니다.