How to Change Image Size in Magento 2

How to Change Image Size in Magento 2

When you upload the existing photos and images to a Magento 2 site, the large size of these pictures might slow down the performance of the pages. Therefore, you need to develop a way to change and decrease the size of images. Even though software and solutions take care of this problem easily, there is a way to make it by yourself on Magento 2. This article will describe everything about changing the size of product images and other image settings on Magento 2.

Basics

The image size settings are not complicated because all the initial settings are in one file. This file is significant for a theme, but if this file is in the primary theme, it can be untouched. 

Important!!! If you need to change/rewrite values in the file view.xml., you will need to copy the entire file view.xml in your theme and make the necessary changes. Missing nodes in your theme are not inherited from the primary theme. Therefore, you need to copy the entire file. 

Step 1.

Copy file in your theme and edit it.

Path to file in your theme:

app/design/frontend/[VENDOR]/[THEME]/etc/view.xml

If your theme does not have this file yet, it can be copied from Luma’s theme.

Path to file: vendor/magento/theme-frontend-luma/etc/view.xml

Step 2.

Command for Magento 2 which executes the size change of the needed images. 

php bin/magento catalog:images:resize

At this stage, you need to wait. From personal experience, the resizing of 800 images with this command takes 20 minutes.

Step 3.

Clearing cache.

php bin/magento catalog:images:resize

Ready

List of image settings

Magento 2 can change the size of an image, save proportions, save transparency, crop, etc. 

The full list of the settings looks like this:

width – width of an image in pixels. It is used to measure the size of a product image. 

height – height of an image in pixels. It is used to measure the size of a product image.

constrain – if the setting “constraint” has the value true, the images which are lower than this value will not be enlarged. Only the crop frame will be enlarged. This setting can be used only for the small product images, if you do not want Magento to change their sizes. It does not apply to the images with sizes larger than indicated in the settings of width/height.

aspect_ratio – if the value true is set, the aspect ratio between the width and height of the image remains unchanged.

frame – if the value true is set, the image will not be cropped. Can be applied only when the setting aspect_ratio has established the value true.

transparency – if the value true is set, the transparent background is saved. If the value false is set, the images will have white background (by default). You can set up your background color by using the setting background

background – the background color for the images. It cannot be applied to the images with transparency when the transparency setting sets the value true. Use the settings to add an image frame during the changes of image size and changes of background color. The value by default: [255, 255, 255]

The use in .phtml templates

You can also use other settings for the configuration of images directly in a theme’s template files. To achieve it, one needs to make a dependency injection of a helper class for images  (\Magento\Catalog\Helper\Image) in the class of the used block for the template. 

Code:

/**
* @var $block \Magento\Catalog\Block\Product\Widget\NewWidget
* @var $imageHelper \Magento\Catalog\Helper\Image
*/
$image = ‘product_page_more_views’;
$items = $block->getProductCollection()->getItems();
$width = 250;
$height = 250;
foreach ($items as $_item) {
  $resizedUrl = $imageHelper->init($_item, $image )
  ->keepAspectRatio(TRUE)
  ->constrainOnly(TRUE)
  ->keepFrame(TRUE)
  ->resize($width, $height)
  ->getUrl();
  echo ‘<img src=”‘. $resizedUrl .'” alt=”alt text” />’;
}

Conclusions

Using these methods is a more effective and easier solution to boost the performance of your site and save the time and resources to change the image size with third-party tools. Considering that the process of changing the size of images is not so complicated for experienced Magento developers, this guide will make it even more smooth.

Related Articles

Subscribe
Notify of
0 Comments
Inline Feedbacks
View all comments