Get product image in Magento 2

How to get product image URL in Magento 2?

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

How to change Magento 2 product image size and other properties?

• To find the view.xml configuration file use the next command:

<theme_dir>/etc/view.xml;

• Then, to change Magento 2 product image size, switch to the <images module="Magento_Catalog"> where all the image properties are configured. For this, use the following command:

<images module="Magento_Catalog">
...
<images/>;

• You need to know an image id and type attributes to change or edit its properties in this Magento product image 'table':

<images module="Magento_Catalog">
<image id="unique_image_id" type="image_type">
...
</image>
<images/>.

Image attributes in details

• id (attribute)/ string (type) - this is an image identifier, which is unique in the theme of use. The attribute describes the location of an image;
• type (attribute)/ string (type) - this is the type of an image identified by special id. The values of the attribute are the following:

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">
<width>110</width>
<height>90</height>
</image>

All the image properties are defined by the elements, which can be used for further configuration.

Image elements (properties) in details

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). Here you can choose the color for Magento background image. 

What is more, if you need to change only a size property of an Magento 2 image, for instance, when:

• importing products with images of different sizes;
• resizing or deleting images manually from the cache;

then you can use the next command:

magento catalog:images:resize.

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.

→ Let users download high-resolution product images with the help of Magento 2 Product Attachments.