Resize Product Image in Magento 2

Today we are discussing how to resize the product image using a block class in Magento 2.
First, we will create a block class as below:

<?php
namespace Webkul\CustomModule\Block;

class ImageResize extends \Magento\Framework\View\Element\Template
{
    /**
     *
     * @var \Magento\Catalog\Model\ProductRepository
     */
    protected $_productRepository;
    /**
     *
     * @var \Magento\Catalog\Helper\Image
     */
    protected $_productImageHelper;
     
    /**
     * @param \Magento\Backend\Block\Template\Context $context
     * @param \Magento\Catalog\Model\ProductRepository $productRepository
     * @param \Magento\Catalog\Helper\Image $productImageHelper
     * @param array $data
     */
    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);
    }

    /**
     * resize of the image
     * @see \Magento\Catalog\Model\Product\Image
     * @param int $width
     * @param int $height
     * @return $this
     */
    public function resizeImage($id, $image_type, $width, $height = null)
    {
        $product = $this->_productRepository->getById($id);
        $resizedImage = $this->_productImageHelper->init($product, $image_type)
                                           ->constrainOnly(TRUE)
                                           ->keepAspectRatio(TRUE)
                                           ->keepTransparency(TRUE)
                                           ->keepFrame(FALSE)
                                           ->resize($width, $height);
        return $resizedImage;
    }
}

Here, $_productRepository is an object of Magento\Catalog\Model\ProductRepository class and $_productImageHelper is an object of Magento\Catalog\Helper\Image class.

In the Function resizeImage, there are four parameters $id which is the id of the product, $image_type which can be “product_base_image” or “product_small_image”, “product_thumbnail_image” and $width, $height is the width and height of the image respectively.

constrainOnly-> By default it is False. but if we set True that means the image will not be bigger than it was.
keepAspectRatio-> By default it is True, which means image height and width will not be contorted.
keepFrame-> keepFrame(False) will remove the background and set the image to the desired width/height.
keepTransparency-> By default, it is True, which means the image will not lose transparency.

Next, we will use that image in the corresponding template pthml file as below:

<?php
//Product ID
$id = 1;

$width = 250;
$height = 400;

$resizedImageUrl = $block->resizeImage($id, 'product_base_image', $width, $height)->getUrl();
?>
<img src="<?php echo $resizedImageUrl;?>" alt="Alt Text"/>

Hope it will help you. Thank you.

Anuj Gupta 5 Badges

• 22 Feb, 2024
  Updated by - Mohd Ahasan Khan
• 4 Jan, 2023
  Updated by - Akash Panwar

View More