Resize images using the ccResizeImage binding

Set override dimensions for specific viewports

When using the ccResizeImage binding, you can specify override dimensions for specific viewports. You can also specify a default size for any viewport for which no override dimension is provided. For example, in the following code snippet, the ccResizeImage binding returns an image of size 80x80 and 120x120 for xsmall and mediumviewports, respectively. For all other viewports, it returns an image of size 50x50.

<img data-bind="ccResizeImage: {
            source: '/file/v2/products/AntiqueWoodChair_full.jpg',
            xsmall: '80,80',
            medium: '120,120',
            size:'50,50',
            alt: 'Antique Wood Chair',
            errorSrc:'images/noImage.png',
            errorAlt:'No Image Found'}"></img>

Convert images to JPEG format

The ccResizeImage binding can be used to convert images to JPEG using the optional outputFormat attribute. When outputFormat is set to JPEG (the only option currently supported), a source image is converted to a JPEG image. You can specify an optional quality attribute to adjust the quality of the resulting JPEG image (0.0 is the lowest quality, 1.0 is the highest quality). For PNG images with a transparency layer, you can control the background color of the converted JPEG (which does not support transparency) by setting the optional alphaChannelColor attribute. For example, the following <img> tag converts the logo.png image to a JPEG with a quality factor of 0.8 and replaces the transparent layer with the color black.

<img data-bind="ccResizeImage: {
     source: '/img/logo.png',
            outputFormat: 'JPEG',
     alphaChannelColor: '000000',
            quality: '0.8'}"></img>

Note: GIF images cannot be resized or converted to JPEG as they may contain animation which is lost after resizing and conversion.

Use a srcset to specify the image to load

HTML 5 introduced the srcset and sizes attributes to the <img> tag, which allow you to specify a set of images and the conditions under which each image should be loaded. The ccResizeImage binding can take advantage of this functionality by making a set of differently sized images available to the browser. The browser picks the image to load based on the width that is available for the image. As the browser is resized, or as the orientation of the view port is changed, the correct image is loaded. Also, on view ports that have a higher pixel density, the browser is able to pick a higher resolution image to load that is better suited to the view port. In all cases, bandwidth use is improved because an image that is correctly sized for the circumstances is loaded.

To enable the srcset feature, you must set the isSrcSetEnabled attribute to true for the ccResizeImage binding:

<img data-bind="ccResizeImage: {
          source: '/file/v2/products/AntiqueWoodChair_full.jpg',
          isSrcSetEnabled: true,
          alt: 'Antique Wood Chair',
          errorSrc:'images/noImage.png',
          errorAlt:'No Image Found'}"></img>

When the isSrcSetEnable attribute is set to true, the ccResizeImage binding uses the /ccstore/v1/images endpoint to create a set of differently sized versions of the image defined by the source attribute. It also creates an accompanying sizes attribute that specifies which image to load based on available width. The HTML generated for the example above looks similar to this:

<img data-bind="ccResizeImage: {
   isSrcSetEnabled : true,
   source:'/file/v2/products/AntiqueWoodChair_full.jpg',
   alt:'Antique Wood Chair',
   errorSrc:'/img/no-image.jpg',
   errorAlt:'No Image Found'}",
   alt="Antique Wood Chair",
   src="/file/v2/products/AntiqueWoodChair_full.jpg&amp;height=475&amp;width=475",
   srcset="
           /file/v2/products/AntiqueWoodChair_full.jpg&amp;height=100&amp;width=100 100w,
           /file/v2/products/AntiqueWoodChair_full.jpg&amp;height=300&amp;width=300 300w,
           /file/v2/products/AntiqueWoodChair_full.jpg&amp;height=475&amp;width=475 475w,
           /file/v2/products/AntiqueWoodChair_full.jpg&amp;height=940&amp;width=940 940w",
   sizes="
           (max-width:480px) 100px,
           (min-width:481px) and (max-width:768px) 300px,
           (min-width:769px) and (max-width:979px) 475px,
           (min-width:980px) 940px",
   style="display: block;}">
</img>

You can exercise even more control over which image is loaded for specific view ports by using one of the following attributes:

xsmall_img= "url-to-xsmall-image";  // Image size should be 100 * 100 px
small_img = "url-to-small-image";   // Image size Should be 300 * 300 px
medium_img = "url-to-medium-image"; // Image size should be 475 * 475 px
large_img = "url-to-large-image"    // Image size should be 940 * 940 px

These attributes provide URLs to specific images that have been uploaded to your storefront’s Media library (as opposed to the resized images generated by the ccResizeImage binding). Media library images are used when they are available and, when they are not, the resized images created by ccResizeImage are used. In this example, the AntiqueWoodChair_large.jpg image will be used for the large view port while the other view ports will use the resized images generated by ccResizeImage. The AntiqueWoodChair_large.jpg image will be resized up to 300 x 300 pixels but no larger, as is dictated by the optional large: '300,300' attribute.

<img data-bind="ccResizeImage: {
            source: '/file/v2/products/AntiqueWoodChair_small.jpg',
            isSrcSetEnabled: true,
            large_img: "/file/v2/products/AntiqueWoodChair_large.jpg',
            large:'300,300',
            alt: 'Antique Wood Chair',
            errorSrc:'images/noImage.png',
            errorAlt:'No Image Found'}"></img>

Reserve a minimum height for an image

By default, the ccResizeImage binding reserves a minimum height on the page layout to accommodate an image before the image loads. This prevents the layout from shifting after the image loads. To make this possible, the ccResizeImage binding injects a <div> tag into the HTML that wraps around the <img> tag and sets it to the minimum height of the image. In general, this approach provides for a superior shopper experience, however, there are occasions where it may need to be disabled. For example, some browsers have problems with <div> tags placed inside <td> tags. For this reason, you have the option to disable the addition of the <div> tag by setting the setMinHeightBeforeImageLoad attribute to false, for example:

<img data-bind="ccResizeImage: {
            source: '/file/v2/products/AntiqueWoodChair_full.jpg',
            alt:'Antique Wood Chair',
            errorSrc:'images/noImage.png',
            errorAlt:'No Image Found',
            setMinHeightBeforeImageLoad:false}"> </img>

ccResizeImage attributes

The following table describes the attributes you can use with the ccResizeImage binding.

Attribute	Description
`source`	The image source URL.
`large`	The override dimensions for the `large` viewport, expressed as a comma-separated list of two values, the first for height and the second for width.
`medium`	The override dimensions for the `medium` viewport, expressed as a comma-separated list of two values, the first for height and the second for width.
`small`	The override dimensions for the `small` viewport, expressed as a comma-separated list of two values, the first for height and the second for width.
`xsmall`	The override dimensions for the `xsmall` viewport, expressed as a comma-separated list of two values, the first for height and the second for width.
`size`	The dimensions used if an override dimension has not been specified for the current viewport. The value for this attribute can be a comma-delimited list of two values, the first for height and the second for width, for example: `size: '50,50',` Alternatively, the value can be one of the following: `large`, `medium`, `small`, or `xsmall`. If one of these values is specified and an override dimension is provided for that same size, then that override dimension is used. For example, if `size: 'medium'` and `medium: '120,120'` are set and the image is being viewed on a viewport without a specific override dimension, the image will be sized to 120 x 120 pixels. If `size` is set to `large`, `medium`, `small`, or `xsmall` and no override dimension is provided for that same size, then the default dimensions are used, which are: `xsmall`: 100X100 `small`: 300X300 `medium`: 475X475 `large`: 940X940
`alt`	The alternative text for the image.
`errorSrc`	The error image URL.
`errorAlt`	The alternative text for the error image.
`outputFormat`	The format of the converted images. Only JPEG is supported. Note: GIF images cannot be resized or converted to JPEG as they may contain animation which is lost after resizing and conversion.
`alphaChannelColor`	The hexadecimal color code for the replacement color of the PNG alpha channel (default is white, FFFFFF).
`quality`	A number that lets you control the image resolution quality. The value of quality is a number from 0.0 (worst resolution but fastest load time) to 1.0 (best resolution but slowest load time). For example, you might want to reduce the resolution of product listing images to speed up image loading times. The default value of, `quality` is 1.0.
`isSrcSetEnabled`	Makes a set of variously sized images available to the browser and defines the conditions under which each one is loaded. See See Use a srcset to specify the image to load for more details.
`xsmall_img`	A URL to an image in the Media library, used when the available width for displaying the image is less than 100 pixels. See Use a srcset to specify the image to load for more details.
`small_img`	A URL to an image in the Media library, used when the available width for displaying the image is less than 300 pixels. See Use a srcset to specify the image to load for more details.
`medium_img`	A URL to an image in the Media library, used when the available width for displaying the image is less than 475 pixels. See Use a srcset to specify the image to load for more details.
`large_img`	A URL to an image in the Media library, used when the available width for displaying the image is less than 940 pixels. See Use a srcset to specify the image to load for more details.
`setMinHeightBeforeImageLoad`	Reserves a minimum height on the page layout to accommodate an image before the image loads. This prevents the layout from shifting after the image loads. See Reserve a minimum height for an image for more details.
`id`	This parameter is used by the binding to create a new wrapper `<div>` with a unique ID. This prevents all wrappers from using the same ID.