Optimize images
This article explains how you can help improve website performance by optimizing image use in Microsoft Dynamics 365 Commerce during the upgrade or go-live process.
Applies to
This article applies to the following configurations:
- Version: Commerce 10.0.16 or later
- Component: Business to consumer (B2C) or business to business (B2B)
- Feature area: Commerce website performance
Prerequisites
Install the Dynamics 365 Commerce online software development kit (SDK). For more information, see Install the online SDK.
Steps to optimize images
One of the biggest performance hits for a webpage can occur when images are downloaded. To reduce the size of your images and help improve the actual and perceived performance of your website, follow these steps.
Use Cascading Style Sheets (CSS) to generate images for items such as buttons whenever you can.
Upload high-quality/high-resolution marketing or product images to the Commerce site builder Media Library. The image resizer will then automatically be used during rendering.
Include width and height properties for each image:
- For each module that uses images, open the theme.settings.json file in the /src/settings directory in the SDK installation location.
- Find the module that you want to update.
- Ensure that the image properties include width and height parameters. For more information, see Configure theme settings.
Disable lazy loading for images:
- Open Commerce site builder.
- Go to the module that includes an image that should not be lazy loaded.
- For product collection modules, clear the Enable module lazy load checkbox. For other modules, select the Disable Lazy Load checkbox.
- Save, preview, and publish your content.
Validate
Use the following method to validate that image use has been optimized.
- Description or purpose: Verify page performance.
- Steps to run: Run performance tests before and after you optimize your images.
- Passing result: Performance is improved after you optimize your images.