How to change product image size in Magento 2

Product image size is the 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. 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 do that with specific instructions.

Overview of changing 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.



Next tutorial:

Module Development Series



Enjoyed the tutorial? Spread it to your friends!

magento-2-tutorial
change
product
image
size

Comments for How to change product image size in Magento 2

Please leave comments if you have any questions, feedbacks.

Module Development

You also may like these Magento 2 Extensions

One Step Checkout

$199
10 reviews

Layered Navigation

$99
12 reviews

SEO

FREE
no review

Shop By Brand

$99
3 reviews

People also searched for:

  • magento 2 change product image size