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&height=475&width=475",
srcset="
/file/v2/products/AntiqueWoodChair_full.jpg&height=100&width=100 100w,
/file/v2/products/AntiqueWoodChair_full.jpg&height=300&width=300 300w,
/file/v2/products/AntiqueWoodChair_full.jpg&height=475&width=475 475w,
/file/v2/products/AntiqueWoodChair_full.jpg&height=940&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>
