Magento 2 Image Types: Swatch, Base, Small, Thumbnail Images

When you edit product images on Magento 2 website, there appears a section named Roles. This section offers you 4 image types that are displayed in different places of your sites:

• Base
• Small
• Thumbnail
• Swatch

Read this blog to know where to display these Magento 2 image types.

Magento Base Images

The Base image is the main image on the product detail page. It is the largest and highest-quality one among the four types. If the image you upload is larger than the image container, customers can click to zoom in the image. 

You may also like: 6 Product Types In Magento 2: A Simple, Clear Explanation How to Create Magento Product Attributes Magento 2 Advanced Pricing Explained

Magento Thumbnail Image

Thumbnail images often appear in the thumbnail gallery on the product detail page. Besides, you can find these images in the shopping cart and in the Related Items section. 

1. In thumbnail product gallery

2. In the shopping cart

3. In the Related Items section

Magento Small Image

These images are often found on the homepage, category page, search result pages and New product list. Also, they are used in the up-sells section on the product detail page and cross-sells sections on the shopping cart.

1. On the Homepage

2. On the Category Page

3. On the Search Results Pages

4. In the Up-Sell Product Section

5. In the Cross-Sell Product Section

Magento Swatch Image

When your product has many colours like above (Amazon), each colour option is illustrated with a swatch image. So, customers can clearly see their wished item just by clicking on the swatch image.

Wrap it up

I hope this blog has cleared up your confusion about the display position of 4 Magento 2 image types: Base, Thumbnail, Small, Swatch. Learn more about Magento at Magento Tutorials.

Visit our store to pick up ones for your Magento stores for boosting your sales: