When I upload the image in magento slider if image size is 150kb & When I inspect the image & download the image size will be changed to 400kb

Let me know what was the issue.

  • magento itself controls the size of an images, such as needing to resize a custom image and display it on the site in special sized areas. – Lalit838 Oct 10 '17 at 10:48
  • there is any way to disable this – imran bashir Oct 10 '17 at 10:49
  • i dont think that will be a good idea, why do you want to do that? – Lalit838 Oct 10 '17 at 10:50
  • because that will effect on the page load speed – imran bashir Oct 10 '17 at 10:51
  • please have a look on the answer – Lalit838 Oct 10 '17 at 10:59

If you want to change size of image on category page navigate to app/design/frontend/[your_package]/[your_theme]/catalog/product/list.phtml and search for the line:

<img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize($productgridimagewidth,$productgridimageheight); ?>" width="<?php echo $productgridimagewidth; ?>" height="<?php echo $productgridimageheight; ?>" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" />

and change it to:

<img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(170, 170)->setQuality(100) ?>" width="170" height="170" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" />

you can use any size in resize(width, height) function

and if you want to change the image of product page then head to app/design/frontend/[your_package]/[your_theme]/catalog/product/view.phtml and search for the same:

By default the re-size of the product images working in the following way:

<?php echo $this->helper('catalog/image')
            ->init($_product, 'small_image')->resize(135); ?>

The code generate the 135х135px image. There are a number of additional parameters that control the image output, here is a list of these parameters with default values:

    echo  $this->helper('catalog/image')->init($_product, 'small_image')
            ->resize(135, 135);

If you want to get images on actual width or height use the following:

    echo $this->helper('catalog/image')
        ->init($_product, 'small_image')->getOriginalWidth();
    echo $this->helper('catalog/image')
        ->init($_product, 'small_image')->getOriginalHeight();

Either set keepFrame to true, so it's always exact size, or set keepAspectRatio to false.


Browsers download data in parallel and try to start rendering the page as soon as possible, If you don't specify the size the browser has no idea how large the image is going to be until after the image download is fully complete.

This delay forces the browser to reflow the layout, delaying the page load time.

If you specify the image sizes, either in HTML or CSS, then browser can avoid repaints and reflows of content.

Try to add height property in your image height:150px; for exemple, img-class for a responsive <img class="img-responsive">

If your slider contain a product images, you can resize them like this:

<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(150); ?>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.