When a shopper views a page that contains images, Commerce Cloud automatically sizes them on the client side for display on different devices, such as laptops, tablets, and mobile phones. To improve your storefront’s performance, you can resize images before they are downloaded to the client browser. To do this, Commerce Cloud provides the /images REST endpoint which allows you to format the images returned from the server. This endpoint, however, requires a URL with a number of parameters that can be challenging to specify manually. To assist you in using the /images REST endpoint, Commerce Cloud provides the ccResizeImage custom Knockout binding. You can use this binding in your widgets to create the URL that is sent to the /images endpoint. The ccResizeImage binding also handles specifying a default image size as well as sizes for various viewports.

This section provides information on using the ccResizeImage binding as well as general information about the /images endpoint. It includes:

Note: Commerce Cloud also includes an earlier custom Knockout binding, productImageSource, that creates the URL sent to the /images endpoint. It has some limitations, however, in that it only works with product images and it does not automatically detect the viewport. Oracle recommends using the ccImageResize binding going forward but the productImageSource binding will continue to work. For more information on the productImageSource binding, refer to the View Model JSDoc for Commerce Cloud.