위치:
Dynamic Imaging Service
B2C Commerce Dynamic Imaging Service를 사용하면 스토어프런트 요구 사항을 충족하기 위해 다양한 크기의 이미지를 업로드할 필요가 없습니다. 고해상도 소스 이미지를 업로드하면 Dynamic Imaging이 제품 페이지, 카탈로그 페이지, 추천 제품, 검색 결과 등 각 이미지 응용 프로그램에 대해 올바른 크기의 형식을 지정합니다. 매개변수를 적용하여 이미지 크기, 자르기, 오버레이, 형식, 배경색 및 품질 설정을 제어합니다.
내가 보유한 Salesforce Commerce 제품은 무엇입니까?
예를 들어 100,000개 품목의 제품 카탈로그가 있는 스토어프런트가 있습니다. 웹 디자인은 최대 150x150픽셀의 이미지를 지원하며 고객 검색결과의 행당 4개의 이미지를 표시합니다. 웹 디자이너가 다른 레이아웃을 만들고 이제 제품 검색에 행당 250x250픽셀 크기의 이미지 3개만 표시됩니다. 크기가 조정된 이미지를 업로드하는 대신 Dynamic Imaging Service는 기존 이미지의 크기를 조정합니다.
이미지 변환 URL 생성
URLUtils및MediaFile클래스는 단일 고해상도 이미지에서 여러 이미지 리소스를 동적으로 생성합니다. 이미지 변환 URL은 캐시 가능한 리소스를 식별하고 변환 방법을 지정합니다.
API는 변환 매개변수의 유효성을 검증하고 기본 URL 패턴에 대한 향후 변경으로부터 사용자를 보호하므로 이러한 클래스를 사용하십시오. URL을 하드 코딩하면 패턴이 변경되면 작동이 중지될 수 있습니다.
JavaScript 개체 리터럴에는 변환 매개 변수가 포함되어 있습니다. 각 메서드는 변환 매개 변수에서 파생된 URL을 반환합니다. Dynamic Imaging Service에 매개 변수를 전달하지 않으면 이미지가 원래 구성으로 전달됩니다.
예시: URL 매개 변수cy는 변환 매개 변수cropY를 대체합니다.
URLUtils클래스에는 이미지 변환 URL을 생성하기 위한 다음과 같은 메서드가 포함되어 있습니다.
public URL imageURL( String path, Object transform );
public URL imageURL( String context, String contextID, String relPath, Object transform );
공개 URL absImage( String path, Object transform );
public URL absImage( String context, String contextID, String relPath, Object transform );
public URL httpImage( String path, Object transform );
public URL httpImage( String context, String contextID, String relPath, Object transform );
공개 URL httpsImage( String path, Object transform );
공용 URL httpsImage( String context, String contextID, String relPath, Object transform );
MediaFile클래스에는 이미지 변환 URL을 생성하기 위한 이러한 메서드가 포함되어 있습니다.
공개 URL getURL( 객체 변환 );
공개 URL getAbsURL( Object transform );
공개 URL getHttpURL( Object transform );
공개 URL getHttpsURL( Object transform );
지원되는 변환
| 유형 | 오브젝트 매개변수 변환(대괄호 안의 URL 매개변수) | 설명 |
|---|---|---|
| 확장 |
scaleWidth(sw),scaleHeight(sh),scaleMode(sm)
|
scaleMode의 기본 매개 변수는
|
| 오버레이 |
imageX(ox),imageY(oy), imageURI(oimg)
|
지원되는 형식은 GIF, PNG, JPG, JP2입니다. 애니메이션 GIF는 프레임 아티팩트를 유발할 수 있으므로 애니메이션 GIF의 종횡비를 유지합니다.
경로는 서비스를 지원하는 쿼리 문자열 매개 변수를 지원해야 합니다. 오버레이된 이미지에 변형된 이미지를 사용합니다. 오버레이된 이미지가 기본 이미지의 경계를 넘어 확장되는 경우 동적 이미징은 오버레이된 이미지를 기본 이미지의 크기에 맞게 자릅니다. ( |
| 자르기 |
cropX(cx),cropY(cy),cropWidth(cw),cropHeight(ch)
|
|
| 형식 |
형식(
|
형식 변환 매개 변수는 이미지의 대상 형식을 지정합니다. 지원되는 대상 형식은 AVIF, gif, jp2, jpg, jpeg, jxr, png 및 WebP입니다. 생성된 URL 경로는 대상 형식의 파일 확장자를 사용합니다. 대상 형식을 지정하지 않으면 변환이 수행되지 않습니다.
|
| 품질 |
품질 (Q)
|
quality 매개변수는 JPG 및 JP2 이미지의 품질 설정과 PNG 이미지의 압축 수준을 지정합니다. JPG 및 JP2 이미지의 경우 최고 품질을 위해 1에서 100 사이의 값을 설정합니다. 기본값은 80입니다. 기본값을 유지하려면 값을 생략합니다. PNG 이미지의 경우 압축이 항상 무손실이므로 품질 설정은 PNG의 모양에 영향을 주지 않습니다. 대신 품질 설정을 사용하여 zlib 압축 수준과 필터 유형을 두 자리 숫자로 설정하십시오. 첫 번째 숫자는 zlib 압축 수준(1-9)을 설정합니다. 두 번째 숫자는 필터 유형을 설정합니다. PNG 설정이 제공되지 않았거나 0으로 설정된 경우 기본값은 75입니다. 이 설정을 100(세 자리 숫자)으로 설정하면 실제로 품질 설정 90과 같습니다. |
| 메타데이터 |
스트립
|
strip 매개 변수는 변환하는 동안 이미지에서 EXIF 및 색상 프로필과 같은 메타데이터를 제거할지 여부를 지정합니다. 유효한 값은 |
| 배경 |
Bgcolor
|
예를 들어, FF0000 = 빨간색; FF000077 = 투명도 50%의 빨간색. 알파 값을 생략하면 결과 색이 불투명해집니다. 명시적으로 00을 알파 값으로 전달하면 동일한 결과를 얻을 수 있습니다. 알파 값은 이미지 출력 형식이 PNG인 경우에만 유효합니다. |
샘플 호출
URLUtils.imageURL( String path, Object transform )에 대한 이 호출은 다음과 같습니다.
URLUtils.imageURL( '/<static image path>/image.png', { scaleWidth: 100, format: 'jpg' } );이미지 변환 URL을 반환합니다.
http://< 이미지 서버 호스트 이름>/dw/image/v2/.../on/demandware.static/.../<정적 이미지 경로>/image.jpg?sw=100&sfrm=pngMediaFile.getAbsImageURL( Object transform )에 대한 이 호출은 다음과 같습니다.
product.image.getAbsImageURL( { scaleWidth: 100 } );이미지 변환 URL을 반환합니다.
http://< 이미지 서버 호스트 이름>/dw/image/v2/.../on/demandware.static/.../<제품 이미지> 경로/FG45SDAF.jpg?sw=100이미지 가이드라인
- 파일 사이즈: 6MB를 초과하는 이미지는 변환되지 않으며 원래 구성으로 제공됩니다. 크기가 초과된 이미지에 대한 첫 번째 요청은 오류를 반환하지만 후속 요청은 원래 구성의 이미지를 반환합니다.
- 차원: 변형 가능한 최대 크기는 3,000 x 3,000픽셀입니다.
- 타임아웃: 변환이 29초 이내에 완료되지 않으면 서비스에서 오류 408을 반환합니다. 애니메이션 GIF 업사이징과 같은 비용이 많이 드는 변환은 피하세요.
- 브라우저 차단: 비프로덕션 환경에서 Firefox 추적 방지는 일부 상황에서 최초 변환을 차단합니다. 이 차단을 방지하려면 테스트 중에 추적 방지를 안 함으로 설정합니다.
동적 이미징 캐싱
Dynamic Imaging Service는 캐싱을 사용하여 브라우저와 앱에 이미지를 제공합니다.
- CDN(Content Delivery Network) 인스턴스: 캐시 무효화가 요청될 때까지 이미지가 캐시됩니다. 새 이미지 자산에는 고유한 캐시 식별자가 부여되며 명시적 캐시 무효화가 필요하지 않습니다.
- 비 CDN 인스턴스: Dynamic Imaging Service는 10분 후에 이미지의 유효성을 다시 검사합니다.
관련 항목:
이미지 변환 URL, 최신 형식, 커뮤니티 프로젝트 및 문제 해결에 대한 자세한 내용은관련 Dynamic Imaging Service 항목을참조하십시오 .
