By default, the properties of product images are stored in the view.xml configuration file. The properties are defined by the gallery widget options and can be also programmatically changed or modified in the theme view.xml file.
<image id="unique_image_id" type="image_type">
image - Base Image role in the Admin of your Magento 2 store;
small_image - Small Image role in the Admin of your Magento 2 store;
swatch_image - Swatch Image role in the Admin of your Magento 2 store;
thumbnail - Thumbnail Image role in the Admin of your Magento 2 store.
E.g.: <image id="swatch_thumb_base" type="swatch_thumb">
All the image properties are defined by the elements, which can be used for further configuration.
width - the element allows for changing an image width in pixels;
height - the element allows for changing an image height in pixels;
constrain - the element is set to true by default, which means the images that are smaller than it’s required by configuration won’t be enlarged;
aspect_ratio - the element is set to true by default, which means the proportions of an image are not changed even if it’s required by configuration;
frame - the element is set to true by default, which means images are not cropped. The property is applied only in case the aspect_ratio element is set to true;
transparency - the element is set to true by default, which means transparent backgrounds of images are saved. If you set the element to false the background will be white.
background - the element is not applied to the images with transparent backgrounds (in case the transparency is set to true).
What is more, if you need to change only a size property of an image, for instance, when:
then you can use the next command:
Remember that after each resizing an image is stored in the cache /pub/media/catalog/product/cache directory. Therefore, if you deleted one of the copies manually, you need to restart the resizing process again using a simple command, which doesn’t allow for editing any elements:
php <magento install dir>/bin/magento catalog:images:resize.
If the command was finished successfully, you will receive the next message: ‘Product images resized successfully’. In case Magento 2 product images are not shown on the storefront, check whether the resized image copy is stored in cache.