For any eCommerce business, it’s important to continually keep acquiring new customers — be it via paid marketing campaigns or organic searches by ranking their products for the right keywords.
But the increasing competition in the eCommerce industry has resulted in an increase in the number of options available to a consumer. Starting right from the search engine where 60% of consumers begin their online shopping journey – which constitutes 40% those who look at images before making a purchase.
Why are images important for your Shopify store?
Human brain processes visuals 60,000 times faster than text. Also, appropriately used images always add value to your product pages, lookbooks or even how-to articles that help put your products to work for the consumers. That’s the very reason why we choose to look at multiple product images before making any purchase.
Here’s a quick look at why you need to include and focus on visuals content on your Shopify store:
But uploading high quality images for your products and collections is not the only thing you need to do. For your images to really work for you, you need to optimize them for two things – ensuring they rank for the right keywords on the search engines, and they load at the right time, in the right way to ensure the same experience across devices.
This is where image optimization comes in.
What is image optimization?
Image optimization is the process of using quality images in an ideal format for better user experience on your online store.
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. Yes, it’s much more than uploading multiple, high-quality images.
So we’ll walk you through the key 5 things you need to pay attention to for image optimization – to ensure they rank and get your brand discovered.
Things you need to focus on for image optimization
1. Image size and format
One of the key reasons for slow web pages on online stores, is the size of the images they have made use of. In their zeal to offer online shoppers as much perspective of the product as possible, most lose track of how they end up loading their site with media files.
According to studies, website conversions drop by an average of 4.42% with every additional second it takes to load.
When we are talking about image size, it’s the amount of space that the image would require on the web server. While uploading product images, brands tend to pick media files that offer a higher resolution to be able to provide ‘clarity’ to their store visitors.
Here’s an example of the same from the Taylor Stitch store:
As you can see, while the product images are large in size, they do not compromise on the load time of the web page.
You can optimize your image size by using image optimization tools like TinyIMG. To further improve your image optimization efforts, you should also pick the right format for your images:
- 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
2. Optimize your images for mobile devices
You can use the Google PageSpeed Insights tool to improve your site performance on both mobile and desktop devices. The tool helps you analyze the content of your web page, assigns a PageSpeed score, and then generates suggestions to make that page load faster.
Also, you can use the mobile-friendly test to check how well your pages work on mobile devices. More than 50% of a website’s traffic comes from mobile devices.
If your images are not mobile friendly or responsive to various screen sizes, they will not be able to deliver a consistent experience to all your target audience, resulting in higher drop-offs and bounce rates across devices.
The higher the bounce rate, the lower your image ranking on the search engine.
To ensure all your images are responsive, read the complete guide on creating responsive images.
3. Name your images right
Choosing the right name is important for your page SEO and for ranking in image search results. Name the file with relevant keywords to get the maximum SEO benefit.
File names should make sense to both search engine crawlers and humans. The names should talk about the picture instead of a number or code generated by the medium where they were last stored.
Even if your focus is on the use of keywords in image names, choose the names that are more relevant and identifiable with the image.
For example, if you’re adding a zoomed in version of the product or one with the product-in-use, ensure you add that to the file name. This lets even the search engine know what the particular product image has to offer.
4. Get your Alt text right
Alt text descriptions are quick descriptions that include a keyword that best describes the image. These descriptions can be read by visually impaired people through screen readers. Also, if a web page is unable to load and show an image, this description as part of code can tell what the image was supposed to depict.
Alt text descriptions should be simple and understandable for website visitors. Make sure you keep these short and descriptive.
TinyIMG automatically generates ALT tags and titles for your images to boost your SEO efforts.
5. Set your images to lazy load
Lazy loading is a strategy wherein the browser loads images or other media files only when they need to be shown on the screen. This strategy is helpful for pages with many images below the fold.
So basically, the images you include on a web page, will start to show as the visitor scrolls through it.
According to Google, lazy loading can both improve performance as well as create infinite scrolling experiences that helps you reduce the bounce rate and keep visitors engaged for a longer period.
To be able to do this, use a plugin like A3 Lazy Load or simply hire/ outsource the work to a coder.
6. Make use of image carousels
The other optimization strategy relates to the use of image carousels. A study by Nielsen Norman group confirms that though automatic sliders help leverage technology to show “more in less,” the actual impact is in a negative way. In most cases, they frustrate the visitors by creating banner blindness and using incorrect locations.
Many customer psychology-challenged businesses continue this practice even today.
Depending on the nature of their product, some online businesses may prefer using image sliders. Such businesses can follow these optimization steps for better product focus:
- Provide manual sliders, not automatic
- Ensure quick load time
- Keep the slide frequency slow
- Restrict the number of slides to the lowest possible
- Ensure each image in the carousel has an ALT text
7. Create an image sitemap
A sitemap is a file where you can list the web pages of your site to tell Google and other search engines about the organization of your site content.
Using an image sitemap, 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.
A sitemap allows optimizing images and videos so that your content gets noticed by Googlebots and other search engine crawlers. Make sure you include every image in your sitemap along with details such as the file name and the ALT text.
The following sitemap tags apply specifically to images:
Tag | Required | Description |
<image:image> | Yes | Encloses all information about a single image. Each <url> tag can contain up to 1,000 <image:image> tags. |
<image:loc> | Yes | The URL of the image. In some cases, the image URL may not be on the same domain as your main site. This is fine, as long as both domains are verified in Search Console. If, for example, you use a content delivery network such as Google Sites to host your images, make sure that the hosting site is verified in Search Console. In addition, make sure that your robots.txt file doesn't disallow the crawling of any content you want indexed. |
<image:caption> | Optional | A caption for the image. |
<image:geo_location> | Optional | The geographic location of the image. For example, <image:geo_location>Limerick, Ireland</image:geo_location>. |
<image:title> | Optional | The title of the image. |
<image:license> | Optional | A URL to the license of the image. You can use image metadata instead, if you like. |
Do your images need optimization?
In a visually-driven digital ecosystem, it’s important to ensure you’re ranking in the right places with the right format of content. Visuals impact our decision-making on a day-to-day basis and it’s time that eCommerce businesses start to focus on the same.
Offering a great shopping experience is no longer just about the product descriptions and how many images you’re including. It’s about how well these images are able to fit into the buyer’s online shopping journey, and how they impact your on-site experience.
If you’re not sure whether your images have been helping you drive organic traffic to the store or need help, get an image optimization audit from TinyIMG.
This is a guest post from TinyIMG, an intelligent image compression and optimization app for Shopify stores.