magento product resized image optimization

Question

I have optimized product images: when I upload those in admin they remain as optimized. However, in fronted when I resize images with cache, these already optimized images need to be optimized. How can I keep images optimized after resize?

Will be gratified for solutions.

Answer 1

A default Magento resize :

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

With the additional parameters:

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

Explications:

• Small image : There are three types of product images in Magento: Thumbnail, Small Image, Base Image. Each type have its own image, it allows to load different images for small thumbnail or for big image.

• constrainOnly : If the "constrainOnly" parameter is set to true, in this case the images which are smaller than specified value will be not enlarged by Magento. Only border of such images will increase. This is useful if you have small product images and you don't like when Magento pixelate them. This option will not effect images which are bigger than specified value.

• keepAspectRatio : If this parameter is set to true, in this case the proportions of the image will not be modified.

• keepFrame : This parameter guarantees that the image will be not cropped. When "keepAspectRatio" is false the "keepFrame" will not work.

• keepTransparency : The "keepTransparency" parameter keep the transparent background of the images. If the "keepTransparency" parameter is set to false, in this case such images will have white background (by default). You can set any color for the background using the backgroundColor parameter.

• backgroundColor : he allows to set any color as image background. You can enter a color as a RGB code, example: backgroundColor(array(255,255,255)). If the "keepTransparency" parameter is set to true, in this case the background will be not applied to the images with transparency.

EDIT:

Magento caches the resized images. Look at the folder media/catalog/product/cache/ to find the images that are currently stored. For information, you can delete this cache at System -> Cache -> Delete Image Cache (bottom left corner). So when you call the resize() method in a template, Magento checks if a cached image for this size exists, and then only resizes your image if it doesn't exists.After that you keep your optimisation resize.

Answer 2

Magento uses the init function of catalog image class to resize your uploaded product images across several pages -:

For category pages -:

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

For product pages -:

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

For basket/checkout pages

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

Those images get saved at the following location media/catalog/product/cache/ based on the following factors

1) Store - media/catalog/product/cache/1/ - 1 is store ID

2) Image type and size - media/catalog/product/cache/1/small_image/135x135/ - image type could be image, small_image and thumbnail and size could be any numeric value

3) Options chosen for resizing (constrainOnly, keepAspectRatio, keepFrame, keepTransparency, backgroundColor) as explained in the above post by @prince - media/catalog/product/cache/1/small_image/135x135/9df78eab33525d08d6e5fb8d27136e95 - This md5 string is for default resizing 9df78eab33525d08d6e5fb8d27136e95 but based on the options this md5 string could change.

The above is basics around how magento generate those resized or cached images and yes they are not optimised and unfortunately they will require further optimisation which is not possible manually because of the amount images get created on your site based on the above mentioned factors. There are several APIs available to optimise those images like Kraken.io, ImageOptim, Smush.it etc. which you can implement if you have development experience or alternatively you can third party extensions. We use the following plugin on our Magento websites

https://www.scommerce-mage.com/optimize-magento-product-cms-images.html