9 Resize Images
Images are automatically sized for your customer based on the devices that they use. However you can customize the image sizes as needed.
When a shopper views a page that contains images, Commerce 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 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 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.
Note: Commerce 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.