Introducing IQA (Image Quality Assessment)

GoMechanic’s Smart Visual Marketing Tool

I.Q.A (Image Quality Assistance)

Visual Marketing is one of the most optimised and essential marketing tools for an E-commerce business. Enhancing Visuals and Graphics on your website not only helps in attracting customers, but premium quality images also inculcate trust and customer loyalty. From the sales point of view, Visual Marketing is gaining a lot of attention. There is a growing concern for improved strategies in the same domain, and GoMechanic adopts a few of the best E-commerce practices.

Recently, GoMechanic launched a wide range of Premium Car Accessories on their app to ease customer experience and usage. In the following blog, we will discuss the practices we use for Visual Marketing for our E-commerce business.

The Problem…

As we started to build our app for selling car accessories, we searched for various practices the major E-commerce giants of the time like Amazon, Flipkart, Myntra, and others use for their website or app. We tried to incorporate many of these practices into our business model, but again, we faced lots of issues, some of which are discussed below:

1. Pixelated & Blurred Images: Many of the uploaded images were blurred, and they used to get pixelated upon zooming.
2. Missing Detailed Images: Some detailed shots about the box’s content and product composition were missing, which used to leave a lot of doubts in the minds of the consumers.
3. To improve UX: A satisfied UX is a key objective for any business, and poor product visualisation was a major blocker in achieving that.
4. Optimising Visual Marketing: As an Optimised Visual Marketing strategy is the key role of the project, any blockers or shortcomings in the same were treated as a significant problem and needed to be solved on an urgent basis.
5. Consumer Trust building: The best way to earn the customer’s trust in a product is by showing them exactly what they’ll be receiving. Any breach in this trust not only hampers the brand image but also stakes customers’ loyalty.
6. Reducing Loading Time: It was observed that few of the images were huge in size. This caused an increase in the loading time of the website/app, and the longer loading time is a BIG NO in UX basics.
7. Reducing Server Cost: As the loading time of the website increases and so increases the server cost, this is again a BIG NO for an e-commerce company.
8. Removing Image Duplication: Image Duplication is one of the practices one must avoid while selling a product online because any duplication will ultimately hamper the customer’s trust.
9. Business Ranking Improvement: A good ranking in Google is a prerequisite these days, and poor visual marketing and UX experience definitely hampers that

The team faced the following problems, and this could have directly affected the business. To get rid of this multifaceted problem, the talented Tech of GoMechanic, came up with a unique AI-Integrated machine learning program named ‘Image Quality Assessment”.

Meet IQA!

The IQA program is trained with many complex machine learning algorithms. Its major objective was to optimise visual marketing to generate good business and enhance the UX experience. The program first intakes the product images and then classifies them into various categories. The images have also undergone a thorough quality assessment process to organise them into various categories. Upon successfully completing the intake and quality analysis of the images, they are finally shown live on the app and website, thus getting ready for business. If an image cannot clear the quality check, then the product SKU and image details are notified to the team. The rejected images have to go through the process of rectification by the product team before it gets re-uploaded and put live on the app/website.

Below we have discussed the major Image Quality Assessment Criteria.

IQA & Image Guidelines

• Image Dimensions: We require product images to be at least 1000 x 1000 pixels. Stores like Amazon require at least 1000 x 1000, Walmart requires 2000 x 2000 for the best zoom function with different devices. The most common aspect ratio is square (1:1).
• Image Format: Common formats that we follow are JPG and PNG. But we recommend JPG only.
• Quality: High-quality product images should be in focus with professional lighting and realistic colouring. Edit photos to match real-life colours.
• Image Count: Use at least four or more without adding duplicate or unnecessary photos with pure white background.
• Negative space: The main product should take up at least 60%-70% of the photo (80% is recommended value).
• File size: Generally, we want the smallest file size while providing optimal image size and resolution. Files that are too large may increase load time or may not be accepted.

Main Image

The main photo above has very little negative space and has a pure white background.

The main image is the first thing the customer sees. It needs to be immediately identifiable and clear.

• The main image draws the shopper’s attention to the listing by accurately portraying the product.
• If you had to pick only one image to optimise, make sure it is the main photo. The main photo with poor editing will make some shoppers question the authenticity or trustworthiness of a listing, and he/she will move on.

Mobile Ready Hero Image

MRHI image of a GoMechanic Mileage Engine Oil

A mobile-ready hero image displays product information and gives four basic points that are easily legible: a) Who is the brand? b) What is the product? c) Which variety is it? How much is in the package?

This is very important in the case of FMCG business.

• As per the research analysis, FMCG brands double their add-to-basket rates by using mobile-ready hero images. Product images render in areas as small as on mobile screens, so they need to be extra-legible.
• If your product comes in multipack or different varieties, it’s essential to use a mobile-ready hero image as the main image.

Detailed Product Shots

E-tailers encourage shots from the back, sides, and zoomed-in photos to give shoppers a better idea of the product.

• Photos of a product from different angles help shoppers understand the specifics of a product while they flick through images. Detail shots can convey information to shoppers quickly.
• Small items or products with detailed construction can benefit from close-up photos. These images are particularly beneficial in infotainment products.

The above example is a zoomed-in detailed photo. Here shoppers can read about the installation ports of the product.

Packaging Shots

This is similar to the main images and can be used as the main image. But it represents the entire product and its packaging as it appears in real life.

• It helps shoppers visualise what the product is. Packshots show natural colours, so shoppers have realistic expectations.
• A good time to use it is when a product’s packaging plays a role after purchase, for example, multipack electronics items, car care items. Any physical product can benefit from a professional packshot.

Packaging Shot of GoMechanic ARES A3 3 Way Speaker

In-Package Literature

An In-Package Literature referred “Packaging Content” showcases everything that’s included with a product. Since shoppers can’t physically pick up and examine a package, these photos will do the job.

• As per research data, 64% of online shoppers said they returned an item because it didn’t match the description.
• The “Packaging Content” photo reduces return rates by showing shoppers precisely what to expect.
• This is helpful for any type of product that comes in multiple pieces, and it’s also useful for products that customers expect to come with peripherals.

In Package Content of GoMechanic Neutron 4500 Car Vacuum Cleaner

Lifestyle Photo

It showcases e-commerce products while portraying the culture that surrounds them. Instead of thinking about the product, shoppers think about the end result, which enhances the desire to purchase. Products that inspire customers to create or live in a certain way benefit from images that portray the desired lifestyle.

Vacuum Cleaner cleaning a car seat

Product Scale

Showing the relative size of an item helps shoppers picture the product in their own space. Shoppers will know what to expect, which helps reduce return rates. Size comparison photos are useful in any situation where the size could be mistaken.

3M Car Care Cream Wax Size Demonstration

Photo Instruction

In addition to explaining features and benefits, product images can also give instructions for assembly or preparation. Product images with instructions reduce unknowns for shoppers and can answer questions right off the bat. This shows the brand is upfront about warnings as well, and it shows that the brand is trustworthy.

Feature-wise comparison of a product with other brands

Technical Points

Everyone wants to make sure they are using the best quality images for their E-Retail website. But there are a lot of technical terms and confusion around image quality. To understand image quality, we have to understand two main things: resolution and compression.

Image resolution

Here we are talking about image pixel resolution. An image is made up of millions of pixels, where each pixel represents a colour. More pixels mean more quality. When we take a large image, like an 18MP photo, and display it on a laptop screen of 2 to 5 megapixels, the image has to be downsized to fit on the screen. So for an e-retail website like us, 2–5MP (or an image width of 2000px) is as large an image we need.

Note 1: Using an image larger than what you need doesn’t increase the quality of the resulting image on a specific screen.

Compression

Image compression is a process to reduce file size while providing a similar result to the original image. By file size, we are referring to the file ‘weight’, i.e., kilobytes or megabytes. JPEG is the most popular image compression algorithm. JPEG configures the level of compression with quality, which can take any value from 0 to 100. 100 applies the minimum level of image compression, and 0 applies the maximum level of compression. With a minimum level of compression, changes are unnoticeable to the human eye. As we increase the level of compression, the changes may become more noticeable.

So compression matters to the quality of the photo, much in the same way that image resolution matters.

Note 2: We should use some compression level (a quality between 80–90) to achieve a good balance. If file size doesn’t matter, then there is no need to compress the image. Just keep the level value 100.

We do this for the GoMechanic Spares and GoMechanic Accessories Website. We apply a small level of compression (a quality of 90). This is because it reduces the file size, which results in faster loading and smaller server bills, and at the same time provides the exact photo quality.

If larger resolution images with a lower level of image compression increase the photo quality, can we apply these settings to low-quality images to make them high quality?

The answer is NO. Scaling a 3MP resolution image to 8MP is not going to increase the quality of the image. Similarly, compressing a picture with a compressed quality of 80 to a quality setting of 100 won’t recompress the image.