How do I optimize my site's product image sizes and dimensions?

For optimal product presentation, it is recommended to provide at least three different image sizes for each product (a thumbnail, medium, and large image). Each image should be used for its proper propose. This saves bandwidth, improves image and page load speeds, enables the image zoom option and results in a better shopping experience for customers.

The three sizes are:

• Thumbnail images are a very small picture of the item, usually used for product previews in the item list pages on your website.
• Medium images are usually used for display with detailed product descriptions to give a user a good overview of what the item looks like. 
• Large images are usually high resolution images are used for Pulse Commerce's image zoom option. You will notice this image appears when the user hovers the mouse pointer over the image in the product description. High resolution images are great for viewing small details on a particular product that are not as noticeable in the smaller images.

The table below lists common recommended image sizes and dimensions:

If you do not have a Medium and Thumbnail image, you can set the Large image to be automatically re-sized via the Use Large Image as Medium and Thumbnail option as seen below.

Using the baseline values set in Settings > General Settings > Display Settings.

• Width of the Resized Medium Image (Pixels)
• Width of the Resized Product Thumbnail in Shopping Cart (Pixels)

The system will format the large image for Thumbnail & Medium sizes appropriately.

Note: Images should be path relative for supporting SSL without errors. E.g. there should not be an http: or an https: in the image address. 


Note: this will only re-size the image's height and width - it does not re-size the picture's size in bits. In order to actually make the images a smaller size, you need to size the medium and thumbnail images on your own, and upload them into the image manager.

There are many great free tools on the internet that allow you to create great thumbnails and medium resolution images from high resolution images very quickly, easily and efficiently.