Loading
Get Started with B2C Commerce
Table of Contents
Filter by (0)Add
Select Filters

          No results
          No results
          Here are some search tips

          Check the spelling of your keywords.
          Use more general search terms.
          Select fewer filters to broaden your search.

            Search all of Salesforce Help
            Search all of Salesforce Help
            Dynamic Imaging Service

            You are here:

            1. Salesforce Help
            2. Docs
            3. B2C Commerce for Merchandisers and Administrators

            Dynamic Imaging Service

            The B2C Commerce Dynamic Imaging Service eliminates the need to upload different-sized images to meet your storefront requirements. After you upload a high-resolution source image, Dynamic Imaging formats the correct size for each image application—your product page, catalog page, recommended products, search results, and so on. Apply parameters to control image size, crop, overlay, format, background color, and quality settings.

            Which Salesforce Commerce Product Do I Have?

            For example, you have a storefront with a product catalog of 100,000 items. Your web design supports images up to 150x150 pixels, and displays four images per row of a customer's search results. Your web designer creates a different layout, and now a product search displays only three images sized 250x250 pixels per row. Instead of uploading the resized images, the Dynamic Imaging Service resizes the existing ones.

            Create Image Transformation URLs

            The URLUtils and MediaFile classes dynamically generate multiple image resources from a single high-resolution image. An image transformation URL identifies the cacheable resource and specifies how to transform it.

            Use these classes because the API validates the transformation parameters and protects you from future changes to the basic URL pattern. If you hard code the URL, it can stop working if a pattern changes.

            The JavaScript object literal contains transformation parameters. Each method returns a URL derived from your transformation parameters. If you don’t pass parameters to the Dynamic Imaging Service, the image is passed through in its original configuration.

            Example: The URL parameter cy replaces the transformation parameter cropY.

            The URLUtils class includes these methods for generating image transformation URLs.

            
public URL imageURL( String path, Object transform );
public URL imageURL( String context, String contextID, String relPath, Object transform );
public 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 );
public URL httpsImage( String path, Object transform );
public URL httpsImage( String context, String contextID, String relPath, Object transform );

            The MediaFile class includes these methods for generating image transformation URLs.

            
public URL getURL( Object transform );
public URL getAbsURL( Object transform );
public URL getHttpURL( Object transform );
public URL getHttpsURL( Object transform );

            Supported Transformations

            Type Transform Object Parameters (URL parameters in brackets) Description
            Scale scaleWidth (sw), scaleHeight (sh), scaleMode (sm)

            The scaleWidth and scaleHeight parameters are integers. Valid values are 10 through 3000 pixels.

            Use scaleMode only when combined with scaleHeight and scaleWidth. Setting one of these parameters triggers a scaling operation. If you provide both values, the smaller value determines the resize amount. The image is cropped based on the second dimension, centering the cropped area. If the parameter enlarges the image, it's enlarged only if the result isn't larger than 3000x3000 pixels.

            The default parameter for scaleMode is cut.

            If you set scaleMode to fit, it scales the image to the box dimensions that you enter while maintaining the aspect ratio. The result is a smaller image in one dimension.

            Overlay imageX (ox), imageY (oy), imageURI (oimg)

            The imageX and imageY parameters are integers, 0 or greater.

            Supported formats are GIF, PNG, JPG, JP2.

            Because an animated GIF can cause frame artifacts, maintain the aspect ratio for an animated GIF.

            Set the imageURI parameter to the absolute path of the overlaid image. The imageURI parameter requires proper URL encoding and can't exceed 400 characters.

            The path must support query string parameters that support the service. A transformed image is also supported for the overlaid image.

            If the overlaid image extends beyond the primary image's boundaries, the overlaid image is cropped to match the primary image's dimensions.

            The (oimg) overlay value must point to a customer-owned image served by the Dynamic Imaging Service domain.

            Crop cropX (cx), cropY (cy), cropWidth (cw), cropHeight (ch)

            The cropX, cropY, cropWidth, and cropHeight parameters are integers. Specify all four parameters to trigger a cropping operation.

            The values for cropX and cropY must be 0 or greater. If the crop location is outside the image area, nothing is cropped.

            The value for cropWidth and cropHeight must be 10 or greater. If the specified size is greater than the original image, the crop area is reduced to the actual image area.
            Format format (sfrm)

            The format transformation parameter specifies the image's target format. Supported target formats are AVIF, gif, jp2, jpg, jpeg, jxr, png, and WebP. The file extension of the target format is used in the path of the generated URL path. If you don’t specify a target format, the conversion isn’t performed.

            The path parameter (when using the URLUtils class methods) or attribute value (MediaFile class) references the source image. The source image format recognizes these file extensions: gif, jp2, jpg, jpeg, png, tiff, and tif.

            Provide the source format in the sfrm URL parameter.
            Quality quality (q)

            The quality parameter specifies a quality setting for JPG and JP2 images and the compression level for PNG images.

            For JPG and JP2 images, set values from 1 to 100 for the highest quality. The default is 80. Omit the value to keep the default.

            For PNG images, the quality setting has no effect on the appearance of the PNG because the compression is always lossless. Instead, use the quality setting to set the zlib compression level and filter type as a two-digit number. The first digit sets the zlib compression level (1-9). The second digit sets the filter type.

            If the PNG setting isn’t provided or is set to 0, the default value is 75. If this setting is set to 100 (a three-digit number), it actually equals the quality setting 90.
            Metadata strip

            The strip parameter specifies whether to strip metadata, such as EXIF and color profiles, from the image during transformation.

            Valid values are true or false. The default is to strip data (true).
            Background bgcolor

            The bgcolor parameter specifies the background color for images that support transparency or JPEG images that are converted from a format that supports transparency. Enter a six-digit hexadecimal RGB value. For PNG images, also apply an optional two-character alpha value to specify transparency.

            For example, FF0000 = Red; FF000077 = Red with 50% transparency.

            If the alpha value is omitted, the resulting color is opaque. Explicitly passing 00 as the alpha value achieves the same result. Alpha values are valid only when the image output format is PNG.

            Sample Calls

            This call to URLUtils.imageURL( String path, Object transform ): 

            URLUtils.imageURL( '/<static image path>/image.png', { scaleWidth: 100, format: 'jpg' } );

            Returns the image transformation URL.

            http://<image server host name>/dw/image/v2/.../on/demandware.static/.../<static image path>/image.jpg?sw=100&sfrm=png

            This call to MediaFile.getAbsImageURL( Object transform ):

            product.image.getAbsImageURL( { scaleWidth: 100 } );

            Returns the image transformation URL.

            http://<image server host name>/dw/image/v2/.../on/demandware.static/.../<path to product image>/FG45SDAF.jpg?sw=100

            Image Guidelines

            • File size: Images over 6 MB aren't transformed and they're served in their original configuration. The first request for an oversized image returns an error, but subsequent requests return the images in their original configuration.
            • Dimensions: The maximum transformable size is 3,000 x 3,000 pixels.
            • Timeout: If a transformation doesn't complete within 29 seconds, error 408 is returned. Avoid expensive transformations like upsizing animated GIFs.
            • Browser blocking: In nonproduction environments, Firefox Tracking Protection blocks first-time transformations in some circumstances. To avoid this blocking, set Tracking Protection to Never during testing.

            Dynamic Imaging Caching

            The Dynamic Imaging Service uses caching to serve images to browsers and apps.

            • Content Delivery Network (CDN) instances: Images are cached until a cache invalidation is requested. New image assets are given a unique cache identifier and don't require explicit cache invalidation.
            • Non-CDN instances: The Dynamic Imaging Service revalidates images after 10 minutes.

            See Also:

            For more help on image transformation URLs, modern formats, the community project, and troubleshooting, see Related Dynamic Imaging Service Topics .

             
            Loading
            Salesforce Help | Article