How to resize product image in Magento 2?

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 the 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 on Magento 2 image resize will show you how to do that with detailed instructions.

Image Optimizer

Image Optimizer for Magento 2

Speed up page loading & enhance the user experience for your store

Check it out!

Simple methods to change the product image size in Magento 2

Method 1: Change product image in HelloWorld block

The first way to resize an image in Magento 2 is via HelloWorld block.

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


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)
                           ->resize($width, $height);
        return $resizedImage;

When you resize the product base image to exact height and width, remember that the constraints, 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 the image ID.

//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 the template file

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

//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)
                        ->resize($width, $height)
<img src="<?php echo $resizedImageUrl;?>" alt="<?php echo $_product->getTitle();?>" />

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

Wrap up

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

Related Post

Enjoyed the tutorial? Spread it to your friends!


Sam Thomas
Sam Thomas

Sam is the CEO and Founder of Mageplaza, pursuing a simple and healthy lifestyle. He is a friend, a husband, and a father to two children. As a trainer and an aspiring influencer, he is also a big fan of sports and travel. Sam is exceptionally knowledgeable about e-commerce, especially Magento and Shopify, with 10 years of experience in the field.

People also searched for

  • magento 2 change product image size
  • magento 2 resize product image
  • magento 2 resize image
  • magento 2 image resize
  • magento 2 product image resize
  • image resize magento 2
  • magento 2 product image size
  • magento 2 crop image
  • how to change product image size in magento 2
  • magento 2 resize image in phtml
  • magento 2 resize images
  • magento 2 resize image from url
  • product image resize in magento 2
  • magento 2 image sizes
  • magento 2 product image size change
  • magento 2 default product image size
  • magento 2 change product image size
  • magento 2 image helper
  • magento 2 catalog:images:resize
  • magento 2 resize category image
  • image resize command magento 2
  • magento 2 change image size
  • some images could not be resized. see log file for details.
  • magento 2 image size configuration
  • magento 2 change swatch image size
  • magento 2 resize custom image
  • php bin/magento catalog:image:resize
  • magento 2 image quality
  • magento 2 gallery image size
  • 2.2.x, 2.3.x, 2.4.x