Resizing Product Images
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. Magento 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. 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.
To enable image resizing
On the Admin sidebar, tap Stores. Then under Settings, choose Configuration.
Tap Advanced. Then choose System.
Expand the Images Upload Configuration section and configure.
To change default settings, you may need to clear the Use system value checkbox.
To enable, make sure Enable Frontend Resize is set to “Yes”.
Enter a Quality setting from 1 to 100%. Recommend 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, tap 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|
|Enable Frontend Resize||Global||
Determines the maximum pixel width for the image. When the image is resized, it does not exceed this width.
Determines the maximum pixel height for the image. When the image is resized, it does not exceed this height.