Use Catalog Images Tool to Resize Images in Magento

If you wish to alter the dimensions of the catalog images in your Magento store, then the Catalog Images Tool is quite handy for this purpose. It lets you override the default size and proportion of any image in your catalog layout. You can do this by simply specifying the new dimensions of the image in pixels. This tutorial will assist you in resizing catalog images and restoring them to default size in easy steps.

Steps to Use the Catalog Images Tool

  • Log in to your Magento store backend after entering the correct credentials
  • From the Admin Panel, select Design > Themes Editor
  • Under the thumbnail of your current theme, click Customize
  • Select Catalog Images, in the Theme Customization panel on the left

Magento by default adds borders for images which are smaller than the bucket size. But you can disallow Magento to do so and change the default settings. Clear the Add the white borders to the images that that do not match the container size checkbox, if you don’t want to save the borders to each image.

Resize the Catalog Images

  • To resize the image, do the following:
  1. In the Location column, find the images you wish to resize.
  2. Set the Image Type to one of the following:

a)      Thumbnail
b)      Small Image
c)      Base Image

Select one of the image types to set to a custom size and the other two types will be resized automatically.

Set the Image Size

  • Enter the dimensions of the image in pixels
  1. Width (px): This is a mandatory field. If only the width is specified, the image is resized proportionately.
  2. Height (px): If both width and height are specified, then the image is resized exactly.

Restore the Image Size

  • Click the Reset button to the right of the image, to restore a single catalog image
  • Click the Reset Default button in the upper right of the Catalog Images section to restore all catalog images to the original size

Preview the Change

  • In order to preview the changes made, first click the Save button to save the changes
  • Next, click the Preview button in the upper right corner to preview the resized images
  • When finished, click the Save button again to save any unsaved changes you have made

Resizing catalog images for a single theme in Magento applies for all other themes as well. But in order to render the images correctly across all themes, you need to update any custom CSS you made.