How can you resize images in Magento?
People standardize the size of their images to maintain the correct proportion and to ensure that they appear at the highest possible resolution. Images of various dimensions and sizes can impact the presentation of your product catalogue. Magento resizes product images according to the dimensions specified by the theme. It is always advised not to resize an image larger than the original but to make the image smaller without losing resolution. The Catalogue Images tool lets you override the default size and proportion of any image in your catalogue layout by specifying the new size in pixels. Each image has three types a base image, a thumbnail and a small image. When you specify a new size for the base image, the corresponding small image and thumbnail are resized automatically. This change will be applied to any product image that appears in your catalogue at that location. Below are the steps to resize the image in your product catalogue. So read through to know how can you resize images in Magento.
- Select Design > Themes Editor from the Admin panel.
Here the thumbnail for your current theme appears on the left, and the selection of other available themes appears on the right.
- Click Customize under the thumbnail for your current theme.
- In the theme customization panel on the left select the Catalogue Images.
Here the Catalogue Images section lists all the available catalogue images that you can resize.
- Borders will be added by default to the image to fill the unused space if your catalogue contains images that are of a different proportion than the container. Clear the Add the white borders to the images that do not match the container size checkbox if you do not want to save the borders to each image.
- Do the following to resize an image
a) Find the image you want to resize in the Location column. Then, set Image Type to one of the following:
- Thumbnail
- Small Image
- Base Image
To set to a custom size you can select one of the three image types, and the other two will be resized automatically.
b) For the image enter the size
- Width (px): The image is resized proportionally if only the width is specified.
- Height (px): The image is resized exactly if both width and height are specified.
c) Do the following to restore the size of an image size
- Click the Reset button to the right of the image to restore one catalogue image to its default size.
- Click the Restore Default button in the upper right of the Catalogue Images section to restore all catalogue images to their default sizes.
- In order to preview your change click the Save button first and then click the Preview button in the upper right to preview the resized image.
- Click the Save button when finished
While resizing your catalogue image, the change applies to all themes. Therefore, you should also update any custom CSS to ensure that the image renders correctly after resizing a catalogue image.
