Image size is a key element in eCommerce businesses’ SEO performance, user experience and conversion rates.

eCommerce sites have more images than any other type of business and heavily rely upon the images on the site to convert customers.

Many factors can influence a customer’s purchasing decision. One of these factors is the product image’s performance. What is the best image size for an online store? And how do you configure Magento 2 to display them?

Let’s talk about them together in this post!

Magento 2 Image Roles

Magento lets you upload unlimited images, link to videos and finally place them in an order that will allow your customers to have the best possible viewing experience.

You can divide all images of a product into four main categories, each with different sizes, purposes and uses.

• Magento Base Image
• Magento Small Image
• Magento Thumbnail Image
• Magento Switch Image

Let’s now look at the functionality and details of each image role in Magento 2!

Magento Base Images

The base image, as its name implies, is the primary image that you see when you click on any product detail page. By default, 

• The Magento base image is displayed at the top of the product page. It is therefore not surprising that it has to be the highest resolution image in Magento 2 compared with other images.

• Zooming out can be done up to three times larger than the container. This feature is only available for images larger than the container.

An image that is 470×470 pixels without zoom can be made 1100×1100 pixels by zooming.

Magento will render the images at the appropriate sizes.

Magento Thumbnail Images

Visitors can view Magento thumbnail images on the web as small image blocks within a product page or thumbnail gallery. 

These images measure approximately 100 pixels in height and width. We recommend that you use a thumbnail of 50×50 pixels for these images.

Magento Small Images

Magento 2’s minor image versions are represented mainly by product recommendation boxes that allow for cross-sells and up-sells.

Images of small sizes can be used to create product images on search results pages like the New Products Lists or category pages. Magento small images can be as large as 470×470 pixels.

A 370 x370-pixel image may be the best choice for listing on search result pages.

Magento Swatch Images

Swatch images are used to show the product’s texture, color, and pattern. Clicking on the swatch picture will open the base version of the image for your store visitors.

This allows customers to see the product in a better way and to choose the best version to buy. A Magento swatch image is approximately 50×50 pixels.

What is the importance of image sizes for online shops?

Web pages that load slowly are often affected by poorly optimized images. Slow websites can also lead to poor user experience and lower ranking in search results.

Online merchants can benefit from optimizing images with the right dimensions.

• Page load speed – According To Think With Google the bounce rate for mobile users can rise up to 123% if a page takes between 1 and 10 seconds to load. You can increase page load speed by resizing images.

• High-quality images are more appealing to customers browsing your online store. Merchants can ensure seamless user experiences by optimizing images. Web visitors will spend more time on your website and explore your content.

• SEO performance – Site speed is a key ranking factor. Google results pages will rank your site higher if it loads quickly. Optimized images load faster on smartphones and desktops.

• Conversion rates – Fast loading speeds and a great user experience increase your chances of being asked about and booked

Also, image size refers to the image dimension in pixels.

Magento 2: How to resize images

Here are the configuration settings that can be used to automatically resize product images in Magento.

• Log in to Magento 2’s admin account

• Navigate to Stores > Settings> Configuration > Advanced > System

• Scroll down to see the section Images Upload Configuration. Expand it

• To change the default settings, uncheck the Use system value box

• Next, enable frontend resizing = yes

• The Quality field can now be set by store admin from 1 to 100. Magento recommends that users choose between 80-90% quality as low quality files can affect file size and performance.

• Maximum Width: Enter the maximum width of the image. Magento default value is 1920 pixels

• Maximum Height: The store administrator can set the maximum height of the images. The default value for images is 1200 pixels

• Once you have completed the Magento image size setup, make sure to tap the Save Config button in the upper-right corner.

These are proven tips to optimize Magento 2 images

This is especially true in the marketing and promotion world. Image optimization and image size have a strong connection.

Image optimization is a technique that displays high-quality images in the right format, dimensions and size, while not slowing down the page’s load speed.

Let’s take a look at some optimization techniques for Magento 2 stores.

• Image file names should contain descriptive keywords that are relevant to the image. This is possible by thinking about the way your customers search for your product on Google’s search bar. Then, integrate with analyzed keyword patterns via you site

• Optimize alt attributes. Optimized alt attributes can make your product more visible in Google image search results or web searches. The alt attribute is an important SEO element. It should contain relevant keywords that match the image.

• Reduce the file size of your image. Every Magento image version has an optimal file size. This is to ensure that the page loads quickly and doesn’t have a negative effect on user experience. To avoid slow loading of your category pages, keep your thumbnail files as small as possible.

• Sitemaps can improve SEO performance. This allows merchants to optimize web images for Google’s algorithms

• Install Magento2 Image Optimization. This powerful tool automates the process of compressing images in stores. You can also effectively manage and optimize multiple image types backend

One picture is worth a thousand words.

Bottom line

There are many tools available for image optimization. It has been proven that images have a significant impact on eCommerce businesses.

We have only scratched the surface on Magento image size and configuration at the store’s frontend. If you have any questions, please don’t hesitate to contact us. We are always available to assist you.

Thank you for reading!