Magento Product Images: Everything You Wanted To Know

Written By

builtmighty

Reading Time: 4 minutes

The importance of effective product photography can’t be overstated. When customers shop online, they generally experience a high level of convenience, but lose out on the tactile interaction provided by physical stores. Excellent product photography can change that. You want your images to be textured, detailed and evocative so customers feel they are getting a true sense of the physical nature of your product. High quality images also boost visitors’ trust in your store.

Product images should be a good match for the branding on your site, as well as your company’s image. Maintain a level of consistency between different product images so your customers know what to expect. That way your branding stays consistent and your category pages look clean. A photograph of your product can be beautiful, but that doesn’t always mean that it’s the right photograph for your store.

One way to keep your ecommerce site looking professional is to make sure that all your photographs have a consistent size, quality and proportion. Once you’ve taken your photographs, develop an organizational structure for your image files and name them in such a way that you’ll be able to find them later if you need them. This can save you many future headaches.

Magento uses the following images types throughout your store and gives you the flexibility to select which image you would like to use for each type.

Thumbnail Image: A good size for your thumbnail image is 50×50 pixels. It shows up in the thumbnail gallery, shopping cart and in blocks such as Related Items. The best thumbnail images are simple and clear.
Small Image: Small images work well at 370×370. You’ll see them used in your store for category listings and search results. They’re also used in up-sells, cross-sells and the new products list. You want your small image to be clear, but also enticing so that customers will be interested in learning more.
Base Image or Main Product Image: This image can be from 360×360 without zoom to 1100×1100 with zoom. It’s best if your main product image is large and high quality. Offering your customers the ability to zoom-in or expand the image for more detail is always a good idea! Make sure that your main image is in context with the space around it. (For example: tables tend to look better if they’re grounded, instead of floating in empty space.)
Additional Images: Include additional images of accessories, product angles and color options when possible. This gives customers a more complete understanding of your product.

If you don’t assign an image to each type, Magento uses a placeholder image instead (except in the case of additional images). There will be more information on placeholders at the bottom of this post.

Magento does automatically resize your pictures to fit within the width of the space for that image type. If you like, you can use the same image for each type, however, be certain to use a large picture. 1100×1100 is best, since images can be sized down nicely, but don’t look great when sized up.

Uploading Product Images

Please note: these instructions apply to the Community Edition of Magento.

Navigate to Catalog > Manage Products. Click on the product that you would like to add the image/images to.
- Once you’re inside the product, select Images from the list on the left.
  - You’ll see a table with various sections. Before doing anything else, you’ll want to click the Browse Files button to search your computer for the images for this product. Once you’ve selected them, click the Upload Files button. They should appear in the table.
  - Within the table, there are sections for the following options:
    - Image: This is where a small version of your image appears for reference.
    - Label: This option helps you optimize your product page for certain keywords. If you’re targeting a specific keyword, type it in this field and it will appear as your alternate image text. When customers mouse over the image, this term will appear.
    - Sort Order: This section determines the order in which images appear in the thumbnail gallery when you’re using multiple product images. 0 is always shown first.
    - Base Image: Assign the image type you would like to assign the picture to.
    - Small Image: Assign the image type you would like to assign the picture to.
    - Thumbnail: Assign the image type you would like to assign the picture to.
    - Exclude: Check this box if you don’t want an image to show up in your thumbnail gallery.
    - Remove: Check this box if you want to delete an image entirely
- Once you’re done managing your images, be certain to click the Save button at the top of the page. You can view your changes on the front end of your store.

That’s all well and good, but sometimes you have a lot of products and would prefer to import them all at once, instead of having to manage each product individually. If you’re looking for a way to do this, Importing Product Images gives the best instructions.

About the Thumbnail Gallery

When you assign multiple images to a product, in order to demonstrate various views, accessories or colors, those images will show up in a thumbnail gallery on the product page. By default, the thumbnail gallery displays beneath the main image, though this can vary depending on your theme.

Customers can click on one of the thumbnail images to view the image at full size.

Using Placeholder Images

If you don’t assign an image to a product, Magento will use a placeholder image instead. By default that image is the Magento logo, but you can personalize it to match your own brand.

Navigate to System > Configuration > Catalog > Catalog
- Expand the Product Image Placeholders panel
  - You’ll see that beside each image type is a Browse button. Click the button to upload the placeholder you would like to assign to each type. It’s totally fine to use the same image for all types.
Don’t forget to click the Save Config button!

Would you like some development assistance with your eCommerce store? Our team would love to talk with you. Get in touch today at [email protected].