Each product can show a thumbnail, multiple display and multiple detailed-size images. There is no limit to the number of product images. The different size formats are used in the product pages:
When you upload an image, the system will automatically resize the image to the pixel width set under Configuration > Gallery settings. If you want to avoid the resize operation for image quality reasons, you should upload the image with the exact width configured in your settings. We recommend using PNG over GIF for everyday pictures and using JPEG for complex photographs. If you selected multiple formats in the checkboxes, the system will attempt to automatically resize and generate the other image formats for you. To get the best result when generating other formats automatically, you should upload the largest image you have to avoid losing image quality on resize.
Please note setting the gallery dimensions under Configuration > Gallery settings does not necessarily mean your images will appear at those configured sizes. Instead, the actual size of the image displayed on the screen depends on your display template design. This is especially true when designing for modern fluid and mobile templates. Suppose you have the following gallery settings:
Your Product Detail display template and CSS might still force the "Display" image to stretch to 350 px to fill the surrounding space or shrink to 200 px when viewed on a mobile device. The reason you still want to configure the appropriate gallery dimensions is to ensure the browser is downloading a smaller image (300 px) instead of the large 600 px image.
If you decide later to change the gallery size in the configuration, you will need to re-upload the affected images. Because of storage reasons, the Storefront does not keep the original images needed to perform a resize. However, you can use the Import/Export routine to bulk upload the original images and the system will bulk resize them for you.
Powered by Revindex Wiki