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.
sRGB 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
Yes19201200Image placeholders
Adobe Commerce and Magento Open Source use temporary images as placeholders until the permanent product images become available. A different placeholder can be uploaded for each role. The initial placeholder image is a sample logo, which you can replace with the image of your choice.
To upload placeholder images:
-
On the Admin sidebar, go to Stores > Settings > Configuration.
-
In the left panel, expand Catalog and choose Catalog underneath.
-
Expand
For a detailed list of these configuration settings, see Product Image Placeholders in the Configuration Reference.
-
For each image role, click Choose File, find the image on your computer, and upload the file.
You can use the same image for all three roles, or you can upload a different placeholder image for each role.
-
When complete, click Save.
For information about image roles and recommended sizes, see Upload an image.