Blog » Guides » Complete Ecommerce Image Optimization Guide

Complete Ecommerce Image Optimization Guide

by | Guides

Image Optimization

Introduction

Marketing is about finding a problem in the market and then selling the solution to the customers. In other words, it is about creating and spreading awareness regarding a problem. While creating awareness, it is fundamental to consider that you’re communicating to the right consumers as a marketer. 

Search Engine Optimization is crucial in boosting traffic to your website by finding the right audience. SEO helps rank the content in search results driven by the search query. It consists of three components.

  1. On-Page SEO
  2. Off-Page SEO
  3. Technical

On-Page SEO covers content present on the page. Images are an essential part of ON-Page SEO and an excellent medium for traffic to web pages and increasing your ratings. 

Purpose and who is this guide for?

If you manage online content using google, this guide is for you. The Learning outcomes of this guide are the following:

  • Learn the basics of Search Engine Optimization
  • Learn the importance of Optimizing images on Google
  • Learn and understand the technical requirements for optimizing pages and images on Google
  • Learn and understand the best practices for optimizing images

If you own, manage, monetize, or promote online content through Google Search, this guide is for you. You could be the owner of a thriving business, the owner of a dozen websites, an SEO specialist in a web agency, or a DIY SEO expert passionate about Search mechanics: this guide is for you. 

If you are looking for a comprehensive overview of the techniques for better optimizing images according to Google’s best practices, you’ve come to the right place. An important point to note is that this guide will reveal secrets that automatically rank your site first in Google. 

However, following the best practices should make it easier for search engines to crawl, index, and understand your content.

Optimization of Images

Optimizing the images on Google will help you increase your conversion rate and boost sales by up to 9%. It will also help enhance the user experience.   About 10.1% of google searches are images. 

Images are also a way of discovering content. While searching for images, users may also like to read about the content that the image provides, and this is how you will attract more traffic to your webpage. 

Search engines have a limitation: they can’t read the images. Instead, they focus on the content an image has. Because of this, the optimization techniques of images is essential so that user can attract more visitors via image search. 

Google images can be significant for the discovery of content. Data shows that overall, 20% of the searches of Google happen through image searches. In addition, ranking images on google take less time than ranking content.

Visits to images can play a significant role in bringing traffic to your website because it will make relevant and essential content discovery easier. Images ignite interest in the user’s mind regarding the description or the story behind it.

Moreover, optimizing images are also crucial for enhancing your user experience. Loading speed is directly affected by the quality and size of an image. If a page is taking more time to load, then there is the possibility that visitors will bounce from this page, hence increasing the bounce rate.

Google has also started using website speed as a ranking factor as well. The performance of your website impacts the number of visitors. 

Reports suggest that unoptimized images take up to 75% percent weight resulting in an awful user experience. 

Website Ranking Factors

Suppose you’re trying to find an answer or content related to your problem. But if the website you reached takes a long time to load, there is a chance you will bounce to the other website.

On the other hand, visitors will also abandon your website if they don’t see any images on your content, making it awful and hard to understand. 

Optimizing and adding images regarding products will also increase your conversion rate because customers will understand what products look like. 

6 Fundamental Tips for Image Optimization

As a website owner, you need to optimize your web pages for better performance, as described earlier. To improve the performance of your website, you need to work on areas such as user experience, technical SEO, and content readability. 

User Experience

Creating a better user experience increases the performance and ranking of the website as well. If your website’s bounce rate is higher, it can be a negative factor in ranking your website. 

According to Google’s policies, a website’s performance has been a ranking factor since 2010. A better user experience indicates that users find the content and website according to their needs and search intent.

Importance of user experience for optimization

The following KPIs can measure user experience:

  • Session rate
  • Bounce rate
  • Pages/Per session.

Google Analytics will help you understand the performance of your website so that you can analyze what is going wrong with your website.  

To improve user experience, the first thing to do is write for people. New updates of Google require you to write the content that people need. There are three areas in which optimization is being carried out On-page, Off-page, and Technical.

Once you provide users with the required content, the website’s analytics will improve. You can track the performance of your websites using the KPIs mentioned above by either Google Console or Google Analytics. 

Enrich your content by adding figures, graphs, and images. For an e-commerce website, images are as important as the website. In the case of an eCommerce website, if an image does not back your product, then there is no need to have a website.

The website’s primary purpose is to provide a visual description of the product and explain to the user a story. Plus, most users find it easy to understand and remember content when it is explained with the help of images. 

Google recommends content creators create content for users, not for search engines. The image visibility can be boosted by following some best practices.

The quality of content on a webpage plays a vital role in ranking the images on Google Images. Images on Google provides more context and makes the results more actionable. Content on the page generates text snippets for images that can serve as a ranking factor for images. 

Improve content quality with images

User experience improves by making the interfaces and sites user-friendly for every device.  Reports suggest that many Google Images are searched via mobile devices rather than desktops. 

There is a high probability that the bounce rate will increase if a user has difficulty accessing the content or images. There is a direct relation between the performance of a webpage and its ranking. The supreme performance will enhance the ranking of the images on the webpage.  

A user-friendly URL structure improves the website’s performance because Google uses the URL path of images as file names to understand images.

Improve for Speed

Correctly apply image optimization techniques to improve the website’s speed. Depending upon the situation and usage, you should select the image formats accordingly. There are two types of image formats vector and rasters.

Vectors are suitable for images that are consisted of simple geometric shapes such as logos, texts, or icons. Vector images deliver the best results at every resolution making them the ideal format for better results. 

But when it comes to describing an image then, vector graphics fall short. For images, formats like JPEG, JPG, or WebP for saving the files. Both formats have pros and cons, as Raster images are unsuitable for high-resolution requirements. The following image describes a result between Raster and Vector images.

Raster and Vector graphics image quality

Optimization of images has no definite parameter; instead, it is a set of different techniques to display better results. Another essential factor is finding the optimal setting for better pixel dimensions and encoded data. 

There is no right or wrong answer when setting the dimension of the image. That is why careful analysis is required to find optimal dimensions’ settings. 

However, specific eCommerce sites have devised rules according to the site on which they place their image. Based on the space available for images, these sites ask users to upload images of specific dimensions. 

Successful image optimization for ideal web performance depends on using the smallest file size and the highest quality images. This combination contributes to image optimization, hence delivering the best web performance. 

Alt Text Attribute

The structure of an image tag is given below:

<img src=”img_girl.jpg” alt=”Girl in a jacket” width=”500″ height=”600″>

Data shows around 90 percent of SEOs experts don’t utilize an essential aspect of image optimization, and that is the use of “alt” text in the image tag attribute. Adding keywords that describe your image will help search engines to identify the intent for which the image is being used. 

People using screen readers or having low bandwidth connections can access images using the “alt” text attribute. We have built a foundation for search engines, and as we discussed earlier, search engines can’t read images. They depend upon the alt text to understand the description of images better. 

The focus should be on adding useful and valuable keywords that best describe the image. The “alt” attribute is essential to the search query results. That is why avoiding keyword stuffing may end in a bad user experience. It is vital to adjust alt text according to the guidelines of W3. Following are examples of bad and good image tags and “alt” text attributes.

  • Bad: <img src=”tshirt.jpg”/> (Missing alt text)
  • Bad: <img src=”puppy.jpg” alt=”Black Shirt Cool Shirt Boys shirt
  • Boy designs Boy Tshirt Black Awesome shirts Sleeveless Shirts Cool Dude Shirts”/> (keyword stuffing)
  • Better: <img src= “BMW-i8-White.jpg” alt= “BMW i8 Black” />
  • Best: <img src=”Tesla-model-s-red.jpg” alt=”Model s Tesla Red Color”/>

Google advises its user to test the content using a slow network connection and auditing for accessibility. 

As Google has facilitated its consumers with many attributes and guidelines, there are other technical requirements for better image indexing.

Use Image Tag <img>

Google parses the HTML of your page for indexing images, but it cannot index the CSS. Adding images in your CSS for display is useless because Google can’t index them. That is why Google advises the use of semantic markup for better indexing.

  • Bad: <div style=”background-image: URL(crikcet_bat.jpg)”>Grey Nikols Balister</div>
  • Good: <img src=”crikcet_bat.jpg” alt=”Grey Nikols Balister” />

Image Formats Supported by Google

Google images only support the following formats of images for indexing 

  • BMP
  • GIF
  • JPEG
  • PNG
  • WebP
  • SVG.

Responsive Images

Adding responsive images will enhance the user experience for your webpage. Users can use responsive images across different devices, creating the best user experience. 

As there is a direct link between enhanced user experience and ranking, responsive images are now a factor for image optimization.

An eCommerce manager’s top priority is to provide the best user experience for its customers. User experience comprises responsive designs, loading speed, and optimized images.  

Responsive images for Image Optimization

Additional Tips for Optimization:

The mentioned above are fundamental image optimization techniques that are important to incorporate. The following techniques can enhance your image optimization to a new extent:

Automatically Generated Text

Text Snippet Generated by Google
Image Titles generated by Google

Google images automatically generate a title link and a text snippet to explain the search results of the user query. These text results will help users understand whether or not the images are according to their intent.

Google uses several sources to generate these links and snippets, such as meta-data, title descriptions, and meta-tags. Following are the best practices of Google to generate title links and text snippets to provide better results for users:

  • There should be a specific title in every title tag <title> of a webpage
  • There should be descriptive and concise text in the <title>  
  • There should not be any titles in the title tag, such as “Home” or “Profile.”
  • There should be distinct keywords in the title tag of the webpage. Distinctive title text will help the user understand and differentiate between web pages for e-commerce. 
  • The title of your webpage can also be a place for the branding of your website. You can add a tagline for your business to provide further information.

<title>Facebook –  Place to connect your people</title>

  • The title text of your webpage should be clear because Google will use the following sources for generating the title links or snippets such as
    • Content in the title tag
    • The visual title is shown on the webpage
    • Heading elements
    • Anchor text
    • Text within links redirects to other pages.
  • The same script should be used as a primary script on your webpage. Google bots link the title of the page with the primary page. If Google determines the page title does not match the primary script, it will generate a new text file.
  • Besides all this, checking that you have allowed all search engines to crawl is essential. If Google does not access your page, it will use off-page attributes for generating text files. 

Adding Prominent Badges

Adding structure data will display your images as rich results. These rich results will be displayed along with a prominent badge that will provide its users with relevant information. 

Prominent Badges on Images

As in the image above, you can understand the cricket bat image is taken from a website that is selling this bat. If users want to buy a bat, they can click on the image, redirecting them to the transaction site. 

Google provides guidelines for showing structural data:

  • The web pages must be marked by one of the three supported image formats:
    • JSON-LD
    • Microdata
    • RDFa
  • It would be best if you had not blocked the Google bot for structuring data pages using any control means
  • Provide up-to-date information because rich results won’t show old information
  • Don’t use structured data for misleading information
  • Structure data must provide accurate or relevant information about the page content
  • You should make sure to provide relevant information that Google categorizes in the following badges:
  • Article
  • Book
  • Breadcrumb
  • Carousel
  • Course
  • Dataset
  • Education Q&A
  • Employer Aggregate Rating
  • Estimated Salary
  • Event
  • Fact Check
  • FAQ
  • Home Activities
  • How-to
  • Image Metadata
  • Job Posting
  • Learning Video
  • Local Business
  • Logo
  • Math Solvers
  • Movie
  • Podcast
  • Practice Problems
  • Product
  • Q&A
  • Recipe
  • Review Snippet
  • Sitelinks Search Box
  • Software App
  • Speakable
  • Subscription & Paywalled Content
  • Video
  • It would be best if you tried to use the most specific categories for badges.

Google assigns prominent badges if the users can follow the guidelines.

Image Sitemaps

URLs of images can also be provided on the webpage, so you should include sitemaps in the image; otherwise, Google won’t understand or locate your file.  

Image sitemaps contain images from other domains, and they enforce cross-domain restrictions. The cross-domain restriction will allow you to use Content Delivery System (CDS) that will help you decrease the server load, improve site performance and allow audience segmentation based on analytics. 

<?xml version="1.0" encoding=" UTF-8"?>

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"

        xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">

  <url>

    <loc>http://example.com/sample1.html</loc>

    <image:image>

      <image:loc>http://example.com/image.jpg</image:loc>

    </image:image>

    <image:image>

      <image:loc>http://example.com/photo.jpg</image:loc>

    </image:image>

  </url>

  <url>

    <loc>http://example.com/sample2.html</loc>

    <image:image>

      <image:loc>http://example.com/picture.jpg</image:loc>

    </image:image>

  </url>

</urlset>

Apimio Optimization

There is a Product Information Management Software named Apimio that can help you analyze and understand whether an image is optimized or not. Our PIM does the following tasks to enhance the experience of Shopify users. 

Apimio makes every part of your product journey more efficient. Getting started with optimized product data on your online stores has never been faster and easier. It allows Shopify users to import bulk product data and improve optimization.

Our PIM analyzes images and returns the optimization score based on parameters. The following attributes Apimio PIM analyze

  1. Image Dimensions
  2. Format
  3. The size

These images are scored based on their features. If any two features mentioned are not completed, it will be a 100% unoptimized image and vice versa.

The above image is an example of the screen showing that attributes such as file format, size, and dimensions are not according to optimization standards.

Moreover, Shopify also facilitates users by providing a plugin costing around $2. It allows its user to automatically resize and compress images, saving time for compressing and resizing thousands of images. 

Written by Muhammad Hassan

I write data-driven research & technical content to provide business owners solutions regarding e-commerce.

Recent Articles

DIY Product Photography Guide for Beginners

DIY Product Photography Guide for Beginners

Table of contentsHow to do Professional Product Photography at homeHow to set up your camera for Professional Product Photos 4. White BalanceWhat is the best way to Format your file?Components of a Product ImageHow to set up the ProductTips for perfect product...

read more
Apimio vs. Plytix

Apimio vs. Plytix

Table of contents1. Image Quality Score Finding it difficult to choose the best PIM system for your E-commerce business? Well, don’t worry we’ve got you covered! It is important to understand that not all PIM systems are made for the same purpose or have the same...

read more
Share This