Magento 2 Image Size Tutorial: Basic Knowledge for New Online Stores

For an eCommerce business, image size, amongst other elements, has a significant impact on the SEO performance of an online store, user experience, and conversion rates.

This is because eCommerce sites typically have more images than other business types and heavily rely on the images displayed on the site to earn a conversion.

There are many factors affecting a customer’s purchase decision. And the performance of product images is one of them. So what’s the most optimal image size for your online store, and how to configure them in Magento 2.

Together, let’s discuss them more in this post!

Table of Contents

• About Image Roles in Magento 2
  • Magento Base Images
  • Magento Thumbnail Images
  • Magento Small Images
  • Magento Swatch Images
• Why do image sizes matter to online shops?
• How to resize image sizes in Magento 2
• Proven tips for Magento 2 image optimization
• The bottom line!

About Image Roles in Magento 2

Magento allows its users to upload unlimited images for each product, link to videos, and eventually place them in order so that your customers can have the best viewing experience.

All images of a product can be divided into 4 main categories with completely different sizes, purposes, and usages, particularly:

• Magento Base Image

• Magento Small Image

• Magento Thumbnail Image

• Magento Switch Image

Now, let’s dig deeper into the functionality and definition of each image role in Magento 2.

Magento Base Images

As its name suggests, the base image is the primary image you see when clicking on any product detail page. By default,

• Magento base image is the largest image displayed on the product page. So it comes as no surprise when it requires the highest resolution compared to other versions of images in Magento 2.

• Viewers can zoom out 2 to 3 times the container size. And this feature is only available if you upload images that are larger than the image container.

For instance, an image with 470 x 470 pixels (without zoom) can become 1100 x 1100 pixels after zooming.

So the idea for Magento base images is that you should upload the photos with high resolution (1100 x 1100 pixels) and leave Magento to render them under suitable sizes.

Magento Thumbnail Images

Web visitors can see Magento thumbnail images as small image blocks in a product page, thumbnail gallery, or shopping cart.

These images are around 100 pixels high and wide. Still, we recommend you to use a 50 x 50 photo thumbnail.

Magento Small Images

The usage of minor image versions in Magento 2 is represented mainly via product recommendation boxes for up-sells or cross-sells.

Small images can also be used for product images in listings on category and search results pages such as the New Products Lists and so forth. The size of Magento small images can reach up to 470 x 470 pixels.

Still, a 370 x 370-pixel image might be the best option for listings on category and search result pages.

Magento Swatch Images

Basically, swatch images refer to those used to illustrate a product’s color, pattern, or texture. When clicking on the swatch image, your store’s visitors can see the base version of that image.

This allows shoppers to visualize the store’s product better and choose their favorable variation of that item to purchase. The size of a Magento swatch image can be around 50 x 50 pixels.

Why do image sizes matter to online shops?

Unoptimized images seriously harm a web page load. And slow websites also result in a bad user experience and lower rankings in search results.

Optimizing your images with appropriate dimensions can help online merchants with a few things:

• Page Load speed – According to Think With Google, if a web page loads from 1 to 10 seconds, the bounce rate of mobile users can increase up to 123%. By resizing your image sizes, you directly increase your page load speed

• User experience – high-quality images give visitors a more engaging experience when they browse your online store. And by keeping those images optimized, merchants ensure a seamless user experience. As a result, web visitors are willing to spend more time on your site and explore your content as well

• SEO performance – site speed is one of the vital ranking factors. The faster your site is, the better you can rank on Google result pages. Web pages with optimized images can load faster on both desktops and smartphones

• Conversion rates – Fast loading speed with good user experience increases your chances of being inquired and booked

By utilizing a Magento audit checklist, you can optimize your website’s images. The checklist provides guidelines to ensure that your images are compressed correctly, resulting in faster loading times. Plus, when we talk about image size, we mean the image dimension in pixels.

How to resize image sizes in Magento 2

Below are the steps to resize all product images automatically in Magento using configuration settings:

• Log in to your admin account in Magento 2

• Then navigate to Stores > Settings > Configuration > Advanced > System

• Scroll down, and you will see the Images Upload Configuration section. Expand it

• Now, to change the default settings, you have to deselect the Use system value checkbox

• After that, set Enable Frontend Resize = Yes

• Store admin now can set the Quality field from 1 to 100%. Magento recommends users to choose between 80 - 90% since low quality can reduce the file size and its performance on the storefront

• Maximum Width: Fill in the maximum pixel width for the image. Magento’s default value is 1920 pixel

• Maximum Height: Like Maximum width, the store admin can also set the maximum pixel height for the images. The default value is 1200 pixel

• When you complete the setup for Magento image size, remember to tap on the Save Config button at the top-right corner

Related post: How to Get size of product image in Magento 2

Proven tips for Magento 2 image optimization

This sentence is undoubtedly true, especially in the world of promotion and marketing. There is a strong relationship between image size and image optimization.

For those who don’t truly understand the “image optimization” term, it’s a process of displaying high-quality images in the proper format, dimensions, and size while not affecting the page load speed.

Thus, in this post’s scope, let’s have a quick look at some tactics you can use to optimize images on your Magento 2 stores effectively:

• Use relevant, descriptive keywords for image file names. To do this, think about how your customers search for your product name on Google’s searching bar, incorporate with analyzed keyword patterns via your site

• Use and optimize alt attributes. An optimized alt attribute can help your product show up in Google image search results and web search as well. With relevant keywords to the image, the alt attribute is an important SEO element

• Reduce the image’s file size. Each Magento image version has a different optimal file size in order not to cause a negative impact on the page load speed and user experience. For instance, you will want to keep your thumbnail file size as small as possible to prevent your category pages from loading slowly

• Improve SEO performance with sitemaps. This action allows merchants to optimize web images for Google’s algorithms

• Install Magento 2 Image Optimization. A powerful tool to automate the process of compressing store images. Plus, effectively manage and optimize multiple image types at the backend

A picture is worth a thousand words!

Read more: 12 Best free Image Optimization Tools for image compression

The bottom line!

It’s understandable why there are tons of tools out there for image optimization. The considerable influence of images on a Magento store to an eCommerce business is also proven over time.

And we have just scratched the surface of Magento image size and its configuration at the store’s backend. Thus, feel free to leave us any questions. We’re always here to help.

Thanks for reading!