Base, Small, Thumbnail and Swatch Images in Magento

Base, Small, Thumbnail and Swatch Images in Magento

If you add products to your Magento store, multiple versions of your image are created automatically.

When you're editing your product, you'll see four different image versions:

  • Base
  • Small
  • Thumbnail
  • Switch

What do those versions mean, and where will you find those different images on your site?

magento image versions

Magento Base Images

This is the main image you'll see on the product page. This is the largest and highest-quality version of your image. On a default Magento install, this could display at around 700 pixels wide and 500 pixels high. It can be seen at even larger sizes if you click image and browse the full-screen gallery.

magento base image

Magento Thumbail Images

This version of the image is often seen at the bottom of the product page. If you buy this product, you'll also see this image in the shopping cart. These images can be around 100 pixels high and 100 pixels wide.

thumbnail images

Magento Small Images

This version of the image is used on pages with multiple products, such as most homepage, category and search results layouts. It's also used for small boxes on product pages, such as up-sells, and cross-sells. A normal size for this image is around 250 pixels high and 250 pixels wide.

small image

Magento Swatch Images

This version of the images is used in more advanced store setups. If your product is available in more colors or options, customers can click on the swatch images to see what each version looks like. Here's a product I pulled from Amazon with over 40 swatch images:

swatch images magento