In the architectural overview of Dynamics 365 eCommerce we can see that there are a few central components dealing with digital assets like images, videos and documents.

A central component is image resizer service that automatically adjusts the size and quality of images according to the device and context of the user. This helps improve performance and user experience. In essence it is performing a LOT of caching of resized images.

The format is :
&w=WIDTH_NUMBER
&h=HEIGHT_NUMBER
&m=MODE_NUMBER
&q=QUALITY
&f=IMAGE_FORMAT

WIDTH_NUMBER and HEIGHT_NUMBER specify the width and height values in pixels (0–3000), and MODE_NUMBER specifies the image resizer mode to use.

The image resizer is quite compute intensive, so the end result is heavily cached end to end.  It also seems that the resizer is a shared service per geo.

To better understand the image resizer I have performed some light weight test, by using the F12 developer tools, and here is a tip to test and find what parameters does fit your requirement.

Let’s take the Microsoft demo site : https://www.adventure-works.com/duonovi-pro-men-s-coat/68719519871.p

When I press F12 and filter on images, I can see the URL to both the CMS and the image resizer

If I right click on one of the requests I can edit and resend:

I can then test the performance and timing loading of the pictures, by changing the w, h,q, f and m:

I can also just add additional parameters like I have done above, by adding “test=Test1”, as this will bypass the server side caching and allows me to test the performance of the resizer.  By clicking “send” I can then get a quite good ide of how long a “cold cache” image resize would behave.

So to save you the time, I did a few tests so that you could see the difference in imnage sizew and resonse time. (The server here is in the US, while I’m in Norway)

Scenario	Image size	Time
Fetching the “raw” image without cache (png)	360 kb	921 ms
Fetching the “raw” image with cache (png)	360 kb	141 ms
Testing with PNG uncached &w=0&h=772&q=80&m=6&f=png	526 kb	970 ms
Testing with PNG cached &w=0&h=772&q=80&m=6&f=png	526 kb	135 ms
Testing with jpg uncached &w=0&h=772&q=80&m=6&f=jpg	66 kb	527 ms
Testing with jpg cached &w=0&h=772&q=80&m=6&f=jpg	66 kb	88 ms
Testing with webp uncached &w=0&h=772&q=80&m=6&f=webp	18 kb	782 ms
Testing with webp cached &w=0&h=772&q=80&m=6&f=webp	18 kb	45 ms

So my unofficial conclusion is that fetching images uncached takes a long time.  The reason is that the resizer uses a lot of time, and I also see the larger the raw file is, the more time is uses to create the cached versions.

But when the image is cached, the webp format is superior and also results in the fastest download time and image size.  As far as I see in the site builder, the current modules are fetching images in jpg format, and this gives a OK cached performance.

What we have done in our projects is to switch to the webp url for better performance on loading images.  I specially see that on the PDP (Product Details Page), when looking at the zoomed image, the f= parameter is not present.  And if you have a large PNG raw, then the timing of resizing and fetching the image can be many seconds:  Like https://images-us-prod.cms.commerce.dynamics.com/cms/api/stpmsksxpr/imageFileData/search?fileName=/Products%2F61100_000_002.png&fallback=/Products/61100_000_002.png&m=6&q=80

I also think it is a good idea to land on a standardized raw image size, and my recommendation is W=1280 and H=1972. When fetching the picture from the resizer, also try out q= in the range of 50-80 to balance between picture size and quality. On a server cached scenario you should look for a “waiting for server response” in the range of 40-60ms and content download around the same.

Conclusion

When working with pictures in Dynamics 365 eCommerce, be aware of the format and size in the URL to get good performance.  Start looking into if you want to try out the webp format to get even better performance. (Not supported in std modules yet, but the resizer seams to support it and will require that you clone a few modules to add support for this).  Also read the following page to better understand possibilities : https://learn.microsoft.com/en-us/dynamics365/commerce/e-commerce-extensibility/image-component

Happy DAX’ing 🙂