Magento 1.9 Increase the image size automatically

Question

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.

Answer 1

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:

<?php
    echo  $this->helper('catalog/image')->init($_product, 'small_image')
            ->constrainOnly(false)
            ->keepAspectRatio(true)
            ->keepFrame(true)
            ->keepTransparency(true)
            ->backgroundColor(array(255,255,255))
            ->resize(135, 135);
?>

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

<?php
    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.

Answer 2

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); ?>