After July 2021, the 2.3.x release line no longer received quality updates or user guide updates. PHP 7.3 reached end of support in December 2021, and Adobe Commerce 2.3.x reached end of support in September 2022. We strongly recommend upgrading to Adobe Commerce 2.4.x to help maintain PCI compliance.

Resizing Product Images

This site contains archived merchant documentation for a version of Adobe Commerce and Magento Open Source that has reached end-of-support. The documentation available here is intended for historical reference only and is not maintained. The Adobe Commerce Merchant Documentation for current releases is published on the Adobe Experience League.

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 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

  1. On the Admin sidebar, go to Stores > Settings > Configuration.

  2. In the left panel, expand Advanced and choose System.

  3. Expand the Images Upload Configuration section.

    To change default settings, you may need to deselect the Use system value checkbox.

  4. To enable, make sure Enable Frontend Resize is set to Yes.

  5. Enter a Quality setting between 1 to 100%.

    We recommend a setting between 80-90% for a reduced file size and high quality.

  6. Set the Maximum Width in pixels for the image.

    When the image is resized, it does not exceed this width and retains proportions.

  7. Set the Maximum Height in pixels for the image.

    When the image is resized, it does not exceed this height and retains proportions.

    Image Upload Configuration

  8. 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. We recommend 80-90% to help reduce file size with high quality. Default: 80
Enable Frontend Resize Global Enable to allow Magento to resize large, oversized images you may upload for the Product Details page. Magento resizes the image files using JavaScript prior to uploading the file. When the image is resized, it keeps the exact proportions, meeting and not exceeding 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
© 2024 Adobe. All rights reserved.