3

The goal is to reduce product image sizes after the admin has uploaded them. This will make the catalog page load faster, as dozens of images are loaded. The total page request is over 30 MB.

Asking the admin to resize the images before uploading is not an option, as the world will end if his workflow changes. Seeing as we don't want the world to end, is there a Magento plugin that will shrink images to a specified resolution? To clarify, I'm not concerned with resizing images on the DOM. I'd like to actually shrink the image before it's served.

  • 5
    + 1 because I don't want the world to end. – Marius Jul 4 '17 at 19:40
3

Magento resizes images to the given size and saves them to a cache folder - if set in template.

media/catalog/product/cache/1/small_image/{X}x{Y}/hash/m/y/my-large-image.jpg

Please check your templates where your extra large images are display like YOUR_THEME/template/catalog/product/list.phtml

<img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(170, 160); ?>

If there is no ->resize(X, Y) images are cached in full size - what may cause your heavy page load.


is there a Magento plugin that will shrink images to a specified resolution

If you want to have it configurable from layout/config ..

replace

->resize(X, Y)

with

->resize($this->getImageWidth(), $this->getImageHeight());

And set image size from layout ... (example layout hande)

app/design/THEME/PACKAGE/layout/catalog.xml or local.xml

<catalog_category_default translate="label">
    ...
    <reference name="content">
        <block type="catalog/category_view" name="category.products" template="catalog/category/view.phtml">
            <block type="catalog/product_list" name="product_list" template="catalog/product/list.phtml">
                ...
                <!-- added lines -->
                <action method="setImageWidth"><px>140</px></action>
                <action method="setImageHeight"><px>140</px></action>
            </block>
        </block>
    </reference>
</catalog_category_default>

Or ... if you want to make it editable from config ...

...
<action method="setImageHeight"><px helper="[module]/[helper]/getConfigImageWidth" /></action>
...

... and add a helper to

app/code/POOL/My/Module/Helper/Data.php

class My_Module_Helper_Data extends Mage_Core_Helper_Abstract
{
    public function getConfigImageHeigth()
    {
        return Mage::getStoreConfig('path/to/image_heigth');
    }

    public function getConfigImageWidth()
    {
        return Mage::getStoreConfig('path/to/image_width');
    }
}

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.