Resizing images that are too big or too small for the product pages, en-masse

Last modified by Kalamala on Mon, June 27, 2011 22:08
Source|Old Revisions  

This is an old revision of the document!

This tip takes 5 minutes of typing time and lots of CPU time. The results are quicker page loads and images that fit the product viewer better.

1) The big images accidentally uploaded on the assumption that Magento would resize them all...

cd media/catalog/product

find . -type f -size +250k -print | wc

That will show how many are over 250Kb. Check these images and whether they are excessively zoomable. You may want to allow 400kb images, all depends on the project.

Now to resize them en-masse to 640 pixels wide, still a healthy +2x zoom with a 265 pixel product image:

find . -name '*.jpg' -size +250k -exec mogrify -resize 640 {} ;

As Bill Gates might have once said, 640 pixels is big enough for anyone...

If you do have specific images you want larger than that then you can reload them again from the backup you made in step zero ;-)

2) The slightly too small images

If some of your product images are narrower than the 265 pixel product window (of the default template) then you may want to resize them en-masse. Clearly you don’t want to accidentally scale up any thumbnails, so it helps to know what images are a problem width, e.g. 250 pixel ones (from the previous ecommerce package made when most browsers were 800×600). To list all the image sizes:

find media/catalog/product -type f -name '*.jpg' -exec identify {} ;

Resizing them with Imagemagick is simple and improves the customer experience as the images don’t ‘pop’ on load. (Apologies for the clunky shell script):

cd media/catalog/product

find . -type f -name '*.jpg' -exec identify {} ; | grep 250x | cut -d " " -f1 | awk '{print "mogrify -resize 265",$1}' | bash

Note: some systems will require the trailing ; after identify {} to be escaped ie place a backslash immediately before the ; in the above code.

(That script could take a little while, you can use ‘top’ to see what it’s doing.)

There is no need to rebuild the image cache after applying the above techniques, obviously you can put other parameters into the mogrify commands to set jpg quality to 111% (should the default results not be good enough for your shop). You can also tar cvf the images beforehand, just in case you want to get your hi-res images back at a later date.


Another option for improving image sizes is to use ‘Smush-it’. This removes information in image headers and finds smaller png’s for gifs:

To create a list of URL‘s for all your images from your Magento install directory:

find media/catalog/product/ -name '*.jpg' -print | awk '{gsub(/media/,""); print}'; | more

This list can be cut and paste into smush-it.