Product image configuration
If you plan to upload large images for viewing on the Product Details page, you may want to consider setting a maximum pixel size (width and height) and automatically resize the files at upload. To support this type of product image upload, there is an option to enable automatic resizing of larger image files as you upload. For product that you want to add to your catalog but you do not yet have an image asset to display, you can configure a placeholder image.
Product image resizing
When uploading product images, you may add larger images with varying sizes to provide detailed, high-quality zooms on the Product Details page. To ensure that all images have a similar size and look, there is an image resizing option to ensure that all images match a specific pixel size. This option automatically resizes all product images using the configuration settings, which can help with performance of zoom, faster loading of images and keep a uniform look to your product images.
NOTEsRGB color profile. All other color profiles are automatically converted to the sRGB color profile during the product image upload, which could cause color inconsistency in the uploaded image.Setting a maximum pixel width and height resizes the image to the physical dimensions by pixel. Commerce resizes the image according to the higher amount of either width or height while keeping the proportions. Reducing the quality amount for JPG images reduces the file size.
For example, a 3000 x 2100 pixel JPG at 100% could be a 5 mb or larger image file. Resizing this image would reduce the width to 1920 pixels, keeping proportions, and quality to 80% to provide much smaller file size with high quality.
Enable image resizing
-
On the Admin sidebar, go to Stores > Settings > Configuration.
-
In the left panel, expand Advanced and choose System.
-
Expand
To change default settings, deselect the Use system value checkbox if needed.
For a detailed list of these configuration settings, see Image Upload Configuration in the Configuration Reference.
-
To enable, make sure Enable Frontend Resize is set to
Yes. -
Enter a Quality setting between
1and100%.A setting between 80-90% is recommended for a reduced file size and high quality.
-
Set the Maximum Width in pixels for the image.
When the image is resized, it does not exceed this width and retains proportions.
-
Set the Maximum Height in pixels for the image.
When the image is resized, it does not exceed this height and retains proportions.
-
When complete, click Save Config.
Field descriptions
| Field | Scope | Description |
|---|---|---|
| Quality | Global | Determines the JPG quality for the resized image. Lower quality reduces the file size. 80-90% is recommended to help reduce file size with high quality. Default: 80 |
| Enable Frontend Resize | Global | Allows Commerce to resize large, oversized images you may upload for the Product Details page. Commerce resizes the image files using JavaScript when uploading the file. When the image is resized, it keeps the exact proportions, to meet and not exceed the largest size for Maximum Width or Maximum Height. Default: Yes |
| Maximum Width | Global | Determines the maximum pixel width for the image. When the image is resized, it does not exceed this width. Default: 1920 |
| Maximum Height | Global | Determines the maximum pixel height for the image. When the image is resized, it does not exceed this height. Default: 1200 |
