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 all images have a similar size and look, we provide an image upload resizing option to ensure 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.
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 5mb+ 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 the Images Upload Configuration section.
To change default settings, you may need to deselect the Use system value checkbox.
To enable, make sure Enable Frontend Resize is set to
Enter a Quality setting between 1 to 100%.
We recommend a setting between 80-90% 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.
|Quality||Global||Determines the JPG quality for the resized image. Lower quality reduces the file size. We recommend 80-90% to help reduce file size with high quality. Default: 80|
|Maximum Width||Global||Determines the maximum pixel width for the image. When the image is resized, it does not exceed this width. Default:
|Maximum Height||Global||Determines the maximum pixel height for the image. When the image is resized, it does not exceed this height. Default: