How to change product image size in Magento 2

Product image size is a good attribute to make your goods closer to the consumer with the product details. Because in the online shopping, the customer can't have real touch on your items, they all feel through the descriptions you post and the product image you upload.

Product image size is a good attribute to make your goods closer to the consumer with the product details. Because in online shopping, the customer can’t have real touch on your items, they all feel through the descriptions you post and the product image you upload. The more beautiful image, the more desire they have.

And the standard of the size is one of the main characters you need to learn. So how to change the product image size in order to fit with the size of your page. This topic How to change product image size in Magento 2 will show you how to do that with detailed instructions.

How to change the product image size in Magento 2

Method 1: Change product image size in HelloWorld block
Method 2: Change product image size in template file

Method 1: Change product image in `HelloWorld` block

Firstly, I will show you the way to custom the size of the product image when working with HelloWorld block.

You will use a block class of the module Mageplaza_HelloWorld, then possibly inject object of \Magento\Catalog\Model\ProductRepository and \Magento\Catalog\Helper\Image class in the constructor of the module’s block class.

app/code/Mageplaza/HelloWorld/Block/HelloWorld.php

<?php
namespace Mageplaza\HelloWorld\Block;
class HelloWorld extends \Magento\Framework\View\Element\Template
{    
    protected $_productRepository;
    protected $_productImageHelper;
        
    public function __construct(
        \Magento\Backend\Block\Template\Context $context,        
        \Magento\Catalog\Model\ProductRepository $productRepository,
        \Magento\Catalog\Helper\Image $productImageHelper,
        array $data = []
    )
    {
        $this->_productRepository = $productRepository;
        $this->_productImageHelper = $productImageHelper;
        parent::__construct($context, $data);
    }
    
    public function getProductById($id)
    {
        return $this->_productRepository->getById($id);
    }
    
    public function getProductBySku($sku)
    {
        return $this->_productRepository->get($sku);
    }
    
    /**
     * Schedule resize of the image
     * $width *or* $height can be null - in this case, lacking dimension will be calculated.
     *
     * @see \Magento\Catalog\Model\Product\Image
     * @param int $width
     * @param int $height
     * @return $this
     */
    public function resizeImage($product, $imageId, $width, $height = null)
    {
        $resizedImage = $this->_productImageHelper
                           ->init($product, $imageId)
                           ->constrainOnly(TRUE)
                           ->keepAspectRatio(TRUE)
                           ->keepTransparency(TRUE)
                           ->keepFrame(FALSE)
                           ->resize($width, $height);
        return $resizedImage;
    }    
}
?>

When you resize the product base image to exact height and width, remember that the constrain, aspect ratio, and transparency need to be correct.

Now, you can do as the following example to load the product, then change the product’s image and show it. Here, the produt_base_image is used as image ID.

<?php
//Get product object by ID
$id = 'PRODUCT_ID';
$_product = $block->getProductById($id);

//Get product object by SKU
// $sku = 'PRODUCT_SKU';
// $_product = $block->getProductBySku($sku);
 
$imageId = 'product_base_image';
$width = 200;
$height = 300;
 
$resizedImageUrl = $block->resizeImage($product, 'product_base_image', $width, $height)->getUrl();
?>
<img src="<?php echo $resizedImageUrl;?>" alt="<?php echo $_product->getTitle();?>" />

Method 2: Change product image in template file

Apart from the custom HelloWorld block, you can change product image in the template (.phtml) file. Using the below code snippet and run it in the template file.

<?php
//Get product object by ID
$id = 'PRODUCT_ID';
$_product = $block->getProductById($id);

//Get product object by SKU
// $sku = 'PRODUCT_SKU';
// $_product = $block->getProductBySku($sku);
 
$imageId = 'product_base_image';
$width = 200;
$height = 300;
 
$resizedImageUrl = $_imageHelper
                        ->init($product, $imageId)
                        ->constrainOnly(true)
                        ->keepAspectRatio(true)
                        ->keepTransparency(true)
                        ->keepFrame(false)
                        ->resize($width, $height)
                        ->getUrl();
?>
<img src="<?php echo $resizedImageUrl;?>" alt="<?php echo $_product->getTitle();?>" />

If you still meet any trouble, please leave comment on this topic, we will assist you as soon as possible.

Wrap up

The default image size that Magento 2 automatically assigns to your products might not the best choice for your products’ appearance. With these two methods, you can easily change your products’ image size whenever you need it. A suitable size will make your products look good in your store or a marketing campaign.

Next Check if current url is homepage

One Step Checkout for Magento 2 by Mageplaza

magento-2-tutorial

change

product

image

size

featured

Sam Thomas

CEO and Founder of Mageplaza. Pursueing a simple and healthy lifestyle. A friend, a husband and a dad of two children, a trainer and an influencer wannabe. He is a big fan of sports and travel, also.