Everything you need to know about Shopify Image SEO in 2021

Everything you need to know about Shopify Image SEO in 2021

About 63% of online shoppers start their shopping journey on the search engine, irrespective of the product/ service they’re looking for. 

It’s where they typically begin looking for the options available to them for the products/ services they intend to buy, exploring different brands and their offerings.  

A big part of this search are also images. When we tend to not be sure of the products or services we’re looking for, we browse through the image search results as well on search to narrow down the search. The brands that focus on image SEO win the game here! 

But the search engine rules tend to change every year and so do the best practices. That’s why in this guide, we’re going to start from scratch and talk about everything you need to know about image optimization for SEO in 2021: 

  • What is image SEO and the importance of it in a buyer’s journey 
  • Best practices for image optimization as recommended by global SEO experts 
  • Tips to optimize your Shopify store images for SEO to ensure high visibility and perfect load times 

Boost your search engine ranking. Optimize your images with TinyIMG!

Get started now!

What is image SEO? 

Image SEO refers to on-page search engine optimization which focuses on the image files uploaded on a website. In this case, your Shopify store’s product images. 

It is the process of optimizing all the images on your website so that they are easily discovered on the search engines. This thereby improves the visibility of your brand by ranking for relevant searches on Google and other search engines.

Image optimization for SEO typically includes looking into elements like the image type, image size, file format, ALT text, load time and keywords used in the image file names.

Elements of image optimization

Now that you know what we’re talking about, let’s move on to learning about some of the best practices of image SEO. 

Tips for perfect image SEO optimization 

When optimizing websites, image SEO is often one of the most overlooked strategies in on-page SEO. But if you’re not careful, not optimizing your images for the search engine can eventually lead to poor visibility and fewer people discovering your Shopify store organically. 

This in turn will put the stress on using paid campaigns to drive traffic to your website at all times, which may or may not convert into a sale every time. 

But the good news here is that image SEO is not that difficult. You just need to take into account a few steps and you’re good to go! 

  • Create unique images 
  • Use the right image formats 
  • Ensure your images are mobile friendly
  • Set image to lazy load 
  • Reduce image size 
  • Add appropriate ALT text, image titles and captions 
  • Create an image sitemap  
  • Add structured data 
  • Optimize all images for social media 
  • Leverage browser caching

PS. The image SEO tips we have covered below are all taking into account the changed consumer behaviour due to the pandemic.

As consumers, we’re making more online purchases than ever before. From day to day grocery items to electronics, daily wear and even high-value purchases like jewelry, we’re choosing to buy online instead of walking into brick and mortar stores. 

This shift in behaviour has increased our reliance on product images to get a look and feel of the item being sold. It’s how we’re able to visualize a product, if it matches our needs and how it adds value to us. 

The consumer behaviour shift holds true for industries, not just eCommerce. If you’re someone who wants to increase organic traffic, bookmark this article and follow the image SEO tips below. 

1. Create unique images 

First things first, if you want your images to rank on the search engines and actually capture consumer attention, they need to be unique. 

Instead of using free stock images or simply clicking a few pictures of your product from all angles, focus on giving it some personality. You can do this by adding your branding to the product image or creating a theme for your images that gets followed across all pages. 

Think about how you scroll Instagram and only stop at images that stand out. The same behaviour holds true on search. 

2. Use the right image formats 

Most images that you see on the internet are in either one of the three formats - JPEG, PNG and GIF. 

Since each image format uses a different compression method, they contribute differently to your overall page size. They can either improve your page load time or add to it by making it too heavy. 

Google has confirmed that page load time is crucial to rank on both desktop and mobile. That’s why when you begin with image SEO, the first step is choosing the right image format. It should be a format that offers you the best compression with the least amount of reduction in the quality of the image. 

  • Choose JPEG for larger photos or illustrations 
  • Use PNG when you want to preserve background transparency in images 
  • Make use of WebP instead of JPEG and PNG for better optimized compression 
  • Use SVG for logos and icons only 

Here’s a quick overview of all the image file formats you will typically see designers and marketers make use of: 

 Image file formats and description

3. Ensure your images are mobile friendly 

More than 50% of a website’s traffic comes from mobile devices. If your images are not mobile friendly or responsive to different screen sizes, they will not be able to deliver a consistent experience to all your target audience. 

The best part is that you don’t need to resize and upload all your images as per different screens. 

As freeCodeCamp suggests, to make an image responsive, you need to give a new value to its width property. By doing so, the height of the image will adjust itself automatically. But the important part here is to know that you should be using only relative units like percentage instead of absolute units like pixels when defining the width.  

Making your images responsive

You can also read the complete guide on creating responsive images here

4. Set images to lazy load 

Lazy loading is a strategy wherein the browser is nudged to load images or any other media file only when they need to be shown on the screen. This does not impact how the other images are loaded, i.e., as you scroll. 

Google says that lazy loading can significantly speed up loading on long pages that tend to include many images below the fold. It does so by loading them either as needed or when the primary content has finished loading and rendering. 

The idea is to enable a faster page load time. But at the same time, also ensure that the product images an internet user came looking for, are readily available on the web page. 

Now to do this, you’re going to either learn a bit of Javascript, use a plugin like A3 Lazy Load or simply hire/ outsource the work to a coder. 

5. Reduce image size 

One of the most crucial elements that factor into your page load time is the size of images. The heavier your image is, the longer it takes for the page to load and every extra second you take, you go lower on the search results. 

If you’re not sure where to begin, start by identifying the need to reduce image sizes. You can do this using PageSpeed Insights

Simply enter your website URL and if the size of your images is too big, the tool will recommend “properly size images” as an opportunity to you. 

Now because image SEO and page speed are closely related, you shouldn’t miss out on a single opportunity to compress your images. Identify the images that are the biggest on your page and then make use of an image compression tool like TinyIMG to compress them. 

image-compression-before-and-after-TinyIMG

The tool also offers the following features to help you further optimize images for the search engine: 

  • Best image file format analysis 
  • Standard image reduction to reduce image size by a third 
  • Advanced image reduction to reduce size by three quarters 
  • Auto-generated ALT tags and titles 

Want to optimize your images for SEO? Start with image compression using TinyIMG. 

Get started now!

6. Add appropriate image ALT text, image file names and captions  

When it comes to ranking images for search queries, the search engines have access to a limited amount of information. This is contrary to how web crawlers tend to process the information on an entire web page for indexing. 

That’s why you need to give the search engines a clear indication of what your image is about in the limited space available. There are 3 things to take into consideration here: 

  • Alt text: A quick description of the image, including a keyword that shows to people using a screen reader or when an image does not tend to load on the page. Make sure you use the space to include ancillary keywords that apply to the specific image and omit any other language. 
  • Title/ image file names: When determining the order in which images are presented to a user making a search query, Google also takes into account the image title. Make sure it is crystal clear for the search engine to know how important the information you’re sharing is. 
  • Caption: The search engine extracts information about the subject matter of an image from the content on the page. Including image titles as well as captions help the search engine place your image near relevant texts and queries.

Adding alt text, file names and captions for image SEO

7. Create an image sitemap 

Google says that images are an important source of information about the content you offer on the website. You can give the search engine additional details about your images and provide the URLs of the images that may not be easily discovered otherwise, using an image sitemap. 

For example, here’s what an image sitemap looks like for two images:

  <?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/sample.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> 

  </urlset>

Here’s an example of an image sitemap with a description for each image:

Example of an image sitemap for image SEO

8. Add structured data 

One of the most recent image SEO necessities is adding structured data. 

By adding structured data, the search engine can display your images as rich results that include a prominent badge. This gives internet users relevant information about your image and the page, driving quality traffic to your website. 

Google images currently support three types of structured data - product, video and recipe. 

Here’s a look at what your images would look like if you provide the search engine with structured data: 

Structured data for image SEO

Some of the guidelines to keep in mind when creating structured data include: 

  Format
  • JSON-LD (recommended)
  • Microdata
  • RDFa
  Access
  • Do not block your structured data pages to Googlebot using robots.txt, the noindex tag, or any other access control methods.
  Content
  Relevance
  • Your structured data should be a true representation of the page content and not spam
  Location
  • Put the structured data on the page that it describes
  • If you have duplicate pages for the same content, place the same structured data on all page duplicates
  Images

For more guidelines on structured data, read this article by Google

9. Optimize all your images for social media 

As internet users, we tend to share what we like on social media. Be it links, images or videos that we stumbleupon when browsing through websites. As a website owner, you need to ensure seamless social media sharing to make sure that your images are well-optimized for the different platforms. 

This is where the Open Graph tags come in. These are tags within the HTML code of your page that make sure when an image is shared on social media, the descriptive snippets are displayed accurately. 

To check if you have social sharing enabled, try to create a mock post on any of the platforms. If a big, clickable image along with the link you’re sharing comes up, you have these tags implemented already. 

10. Leverage browser caching 

Browser caching refers to when the images get stored in a visitor’s browser, leading to the web page loading faster the next time they visit your site. 

If browser caching is not enabled, every time an internet user visits your website, all your files will start to load from scratch. This includes images and the other file types you may have used on the web page, leading to a comparatively slower loading time. 

Google themselves recommend that HTTP caching or browser caching can help speed up your page load time on repeat visits. 

The good thing is that you can enable browser caching for a set period of time by either using a plugin like W3 Total Cache on your website or by simply adding the code below to your .htaccess file: 

  <IfModule mod_expires.c>

  ExpiresActive On

  # Images

  ExpiresByType image/jpg "access 1 month"

  ExpiresByType image/jpeg "access 1 month"

  ExpiresByType image/gif "access 1 month"

  ExpiresByType image/png "access 1 month"

  </IfModule>

 

Note: You can change the time period, “1 month” to 1 hour, 1 day, 1 week, 1 year, etc based on your audience behaviour. 

We know that image SEO can be a bit of hard work on top of everything else that you’re managing. But it’s crucial to your success on the search engine to drive targeted, organic traffic to your website. 

Now if you have a Shopify store to run your eCommerce business, you’re probably wondering where to get started. 

You obviously have a lot of product images to display to online shoppers. Going through each of the steps above could take a lot of time. But there’s a simpler way out. 

Shopify product store image optimization 

When you start uploading images to your Shopify store, we recommend adding Shopify apps like TinyIMG to ensure they are optimized from day one. 

The image optimizer automatically optimizes all the images and uploads the optimized versions to your storefront. It comes with powerful features and capabilities that ensure you can follow all the image SEO tips above easily. Some of them being: 

  • Auto-optimization 
  • SEO and page speed store audit 
  • SEO metadata optimization 
  • JSON LD metadata with one click 
  • Broken link detection and redirection 
  • Editable Alt tags (Alt texts) and filenames
  • Find and fix technical SEO issues 
  • Powerful image compression without compromising quality 

Want to optimize your Shopify store images for SEO? Try the TinyIMG app today. 

Install now

Image SEO - You can’t skip it! 

When we as information consumers are turning to visuals more than text, it is important that no matter what industry you’re in, you focus on image SEO. 

Optimizing your images for the search engines is like ensuring you capture the attention of visual learners. By paying attention to little details like the size of your images, the description, ALT texts and more, you can leverage long term benefits of search engine optimization - namely, getting qualified, targeted organic traffic. 

In times, when customer acquisition costs are skyrocketing by the day, letting go of an opportunity to drive organic traffic is like losing sales that you could have gotten for free! 

If you’re not sure where to begin, reach out to a search engine optimization expert. 

Alternatively, you can also book a demo with image optimization tools like TinyIMG to see how powerful image SEO can be. 

 

FAQ

PNG, JPEG and GIF are popular image formats used on the internet. Each of these formats have their own benefits. But from an SEO standpoint, we recommend using JPEG for images with lots of colors and the PNG format for simpler images.
When you’re writing the ALT text of images for search engine optimization, make sure you cover these points: Describe the images aptly and be specific Keep your ALT text fewer than 125 characters Use your target keywords sparingly Don’t cram your keywords into ALT texts of all the images Don’t start the ALT text with phrases like ‘picture of…’; get straight to the point
When done strategically, images can be used to rank higher on the search engines. Images have the potential to rank on position zero and also rank in image search, leading to more organic visitors to your website. They also help the search engines understand what your content is about, boosting the rank of your web pages too. The better your image optimization, the more quality traffic you drive to the website. So make sure you spend time on this aspect of on-page SEO.
About the author
Nikoleta
Content Marketing Manager for TinyIMG. When not writing awesome content, Nikoleta is reading up on the latest in digital marketing, ecommerce, and social media trends!