Image Optimization is one of the easiest and most effective ways to drive traffic to your store and increase your conversion rates. How?

There are some tricks and techniques that let you reduce the image size and still keep them pretty enough to proudly display them on your store. So let’s take a look at how to format your images keeping the same quality, as well as how to optimize images for web and performance.

What is Image Optimization?

Large images slow down your store pages which creates a less than optimal user experience. Image Optimization is the process of decreasing their file size, using either a plugin or script, which in turn speeds up the load time of the web page.

Why image optimization is crucial for online stores?

Most eCommerce web pages are loaded with images and on average have 60%-80% of products’ pictures. To make all images easily accessible without hampering the page loading speed is the biggest challenge for businesses. Hence image optimization is important for online stores.

• Internet has become an addiction nowadays and majority of people who use mobile phones and tablets to browse websites while traveling. In such a situation, if there’s anything that will drive your customers away is the slow loading speed of your web store. Amazon discovered that 1 second of page slowdown costs them $1.6 billion per year. Page loading has vital role to play in conversions of a store and images that are not optimized are the biggest cause of low page speed.
• Page load time is another top ranking factors that Google consider, that’s why websites with images that are not optimized struggle enough to reach top search engine positions.

Right optimization techniques is essential for eCommerce stores for constant traffic and sales. Shopping websites that show negligence toward image optimization tend to lose a real big chunk of change. Since these websites have multiple product lists, images have serious implications for their search engine presence. To walk ahead in the race of traffic, sales and rankings and become a top-selling eCommerce store, eCommerce stores need to make the best use of images and satisfy users as well as search engines equally.

Drawbacks of Unoptimized Images

1. No Search engine benefits: No search engines cannot crawl an important text deigned over image. It only crawls text. So, if you want to appear images in search results for certain keyword, you will have to optimize them according to search engine algorithm.
2. Poor loading speed: There are several reasons why an optimized image causes slow loading speed of your product pages. It could be numerous HTTP requests, images without caching information, absence of HTTP compression, etc. which increases page load time of an website.
3. Poor User engagement: Improper sized, slow-loading & inappropriately placed images fail to grab user attention and have poor click through conversion rate. Even if users look at them, the visuals don’t succeed in conversion and the visitors switch to other sites.
4. Low Conversions: Unoptimized images are the one of the reason of lowering conversion rate. A slow loading website and poor quality images impact on the conversion rate.

Effortless conversion funnel is very important to convert visitors and it also gives them a reason to visit your website again and again.

Image Optimization Techniques

Optimizing images for the web can be a challenging task if you are new to it, though with some practice and techniques, you can be an expert. Attaining right balance between image quality and file size is the basic principle of image optimization.

Following are few handy tips that will make image optimization process easier for you and make images more SEO friendly so that Google can easily crawl and rank them in search engine results.

TIP 1: Choose Content Related Images

Once the visitor is on your web page, relevant images help them to explain the text, break up walls of text, and let a quick scan of the page show this content matches the search intent. All of this helps the reader to stay longer on the page and as well as the site, which may be positive signals to search engines about ranking of your site.

On top of that, what do you do when a visitor shares your article on social networks with an image that has nothing to do with the topic? Naturally people won’t click it!

Place images on the right places close to the related part in the text. It’s not enough to add topic-relevant images only, but they also have to be placed rightly. Google can relate images which are their surrounding content. It’s more powerful to place an image close to a headline that’s related to its alt attribute rather than farther away.

TIP 2: Add Alt Text

This one is a classic: add image alt text. Screen readers are the primary user of alt text; the screen readers add the text to help people with visual impairments to understand the image.

Secondary purpose of image alt text is for search engines. Google crawl images, but they still use several ways to understand what’s in an image.

In Google’s image optimization guide they state that “Google uses alt text features along with computer vision algorithms and the contents of the page to understand the subject matter of the image.”

Your content management system (CMS) or eCommerce store (like WordPress or Dokan) should let you add an image’s alt attribute. If you’re not sure which images have an image alt attribute, use a crawler like Screaming Frog or a tool like SEMrush to find out.

Don’t forget that when you link with an image, the alt attribute is the focus keyword. Whether you link to an internal or external page, the keyword carries a lot of weight, making the image alt attribute even more important.

An optimal alt attribute explains what’s in the image and unique.

TIP 3: Use Descriptive File Names

The image filename is similar to its alt attribute. It helps a search engine understand the image. The filename should also be descriptive and unique, and it should match the alt attribute for that image.

It would be odd if you are going through several images and you give the image name as Image10.jpeg. Nobody can guess what this image is about. Google bots too. That’s why descriptive file name is important while trying to optimize images for online stores. This way you will not only boost search engine presence but also add value to users’ search.

SEO experts advise to use clear and definite file names like ‘optimize-Image-SEO.jpeg’ that can describe an image or its purpose. Don’t forget to follow this rule especially when the content is also about same topic. You will make it easy for Google & other search engines to figure out what the image and web page is all about and increase its chances of appearing on top of the search result.

TIP 4: Optimize Caption

Just like filenames and image alt attributes, captions help Google and visitors understand the context and substance of an image.

When scanning content, captions help to quickly make sense of it. Lastly, for visitors with visual impairments, captions are a big help in consuming content.

In most cases, you can add image captions easily in your CMS or eCommerce store.

TIP 5: Reduce Image File Size

Online users generally wait for 3 to 5 seconds for a site and heavy images take time to load and make a page slow. By reducing the file size, you can reduce the page loading speed too and this in turn reduces the number of customers moving away from your website. Following are the right ways to reduce the image size and optimize images:

• If decreasing file size is not feasible, you can offer a small image and give option, ‘click to view large image’.
• Use Webp Images as they have lesser size and compatible with chrome & opera. These images are 26% smaller than PNGs and 25%-34% smaller than JPG. This formats are designed by Google and this image format is quite suitable for shopping websites that face everyday challenge of reducing file thousands of product images.
• “Save for web’’ option in Adobe Photoshop is one easy way to reduce file size. By choosing this conversion it is possible to save an image to lowest possible file without disrupting quality.
• Use compression images to make product pictures load quickly. Save jpg images at double size and let the browser scale it to fit smaller placeholder. It will reduce image load time and increase bit depth.

There are two types of image compression: lossy and lossless. The second one is algorithmic file size reduction while a perfect copy of the original file is stored. The first one is a file size reduction without preserving a perfect copy.

TIP 6: Use Original Images

If you run an eCommerce store, copying and pasting images from various other stores is not recommended. You should always use unique and original pictures for displaying products that you sell online.

Google likes original content. So, make sure that you are using an image that has previously not been used on any other online store or blog post. Add interesting, uncommon and eye catching images attract visitors. It will help you target potential customers more effectively. Keep in mind the following points while adding product images:

• Include relevant keywords in the image titles and description
• Match the image name with the actual content
• Try to add variety of images related to your business

TIP 7: Choose the Right Image Format

• JPG: The most commonly used image format for eCommerce stores as JPG can be easily compressed. This format images don’t lose quality in small file sizes too.
• PNG: Choose PNG images instead of GIF if they meet your requirements. Although PNG files are bigger size than JPG files, it is still widely used asthe substitute of GIFs. PNG image types support more colors than GIFs and don’t lose quality.
• GIF: GIFs format are not good option to use for big images. You can pick GIFs for displaying icons, thumbnails or decorative images on your website. These images attract attention but are not good for big-sized or too colorful images.

TIP 8: Define Image Dimensions in The Source Code

Defining image dimensions in the source code — width and height — is very important for two reasons. First, it gives a better user experience because the page doesn’t jump when it loads. When defined, browsers can give the actual size <img> elements on the page before the CSS and/or image resources are loaded.

That’s important when you load images asynchronously, meaning you defer images that are not above the fold to load after the main content. On mobile, this effect is even more interrupting.

Second, specifying image dimensions is a requirement for:

1. AMP (Accelerated Mobile Pages), a code standard to speed up mobile friendly sites.
2. PWAs (Progressive Web Apps), an increasingly popular way to make apps out of websites. 

You can change image size in your WordPress (Media > select the image > click “edit image”), or use an image editing tool before you upload it.

TIP 9: Make Images Responsive

Responsive images scale according to the size of the site, meaning the site uses the same images on desktop and mobile, but the displayed image adjusts according to the size of the device used. 

With mobile-first indexing, sites will be indexed based on their mobile version, not on the desktop version. Having a responsive site is the best way to guarantee that goes smoothly, and responsive images are vital for such an experience.

There are a few things you should do to make images responsive. 

1. Give images a srcset attribute in the site source code. A CMS like WordPress has this built in feature. For others platforms, you need to modify the source code manually.
2. Use relative file sizes when specifying image dimensions.
3.  

TIP 10: Add Images to XML Sitemaps

XML sitemaps are maps for any search engines to help them to discover all the relevant content on a site. That also applicable to images. According to Google, images in XML sitemaps “increase the likelihood that your images can be found in the search result of Image”.

The best ways to go about adding images to XML sitemaps is to let your CMS generate them automatically (WordPress has good plugins). You can also use an XML sitemap generator. There can be up to 1000 images for each URL listed in the image XML sitemap.

TIP 11: Optimize The Image URL

Optimizing image URLs is often handy in technical SEO. Just like a page’s URL that helps Google to better understand what it’s about, an image’s URL does the same.

According to the Google image publishing guideline: “Google uses the URL path as well as the file name to understand your images. Consider organizing your image content so that URLs are constructed logically”.

Every images should have a descriptive URL. The only exception are graphical elements, which add to the layout of the website.

TIP 12: Optimize Page Title and Description

Images and the rest of the content on a page depends on each other. The relevance of written content and images forms a good relation. Since the meta title of a page carries some weight for relevance, it also rubs off on images. Google recommends to craft descriptive page titles and meta descriptions.

Page titles should be descriptive and concise. Avoid vague descriptors like “Home” for your home page, or “Profile” for a specific person’s profile.

Finally, make sure your descriptions are truly descriptive. Because the meta descriptions aren’t displayed in the pages the user sees, it’s easy to let this content slide. But high-quality descriptions can be displayed in Google’s search results, and can go a long way to improving the quality and quantity of your search traffic.

TIP 13: Don’t Over-Optimize Images

You can over-optimize anything on your store, including images. Things not to do involve keyword-stuffing the alt text, filename, captions, or image URL path.

How do you know when too much? Anything that goes beyond describing what the image shows is too much.

TIP 14: Reduce HTTP Requests Using CSS Sprites

Using CSS, you can unify many images to reduce HTTP requests and display only what image you want. By combining all small images into one, you can save loading time to some great extent. Every time visitors visits a site, there will be fewer requests by browser to server and loading time will decrease automatically.

TIP 15: Try Image Optimization Tools

There are various image optimization tools to optimize images online but all of them are not suitable for all kinds of images. For example, you can use Image Magick for JPG, PNG & GIFs but cannot use PNG Crush for JPG and GIF. The suitability of any tool depends on the image format. Gifsicle (for GIF images), PNG Out (for PNG images) & JPEG Optim, JPEG tran (for JPG images) are some popular tools.

TIP 16: Create Unique Pictures and Graphics

The most efficient way to stick out with an image is to create your own graphics. Not only it increase the chance of it being shared on social networks (especially Pinterest) but it also gives your content a certain quality.

If you want to create own graphics but don’t want to use a more sophisticated tool like Photoshop, use simple solutions like Canva or Keynote/Powerpoint.

TIP 17: Improve User Experience With Images

Images can help explain concepts or product details to a user faster and easier than plain text. Users can be reassured the content will meet their requirements at a glance before they even start reading the text.

Whatever way Google measures user satisfaction, whether click-through rates or people staying on a page vs. immediately clicking back to the search results, a positive user experience is universally good. In eCommerce, having very high-quality images versus none can make the difference. The way a product is displayed increases the value of the product.

Don’t shy away from using many high-quality images, especially in eCommerce business. Show the product from all different angles, and show it being used versus not being used. Using the specific image formats, dimensions, and compression ensures that your site loads fast even though you use high-quality images.

TIP 18: Don’t Put Important Text Into Images

A big mistake is to put important text into an image, like a headline. Google cannot read that text. Most of the time, it doesn’t look good and it distracts visitors who use a screen reader.

If you really have to, make sure the text comes up again in the content or caption, somewhere near the image.

CSS are becoming very powerful in the recent years; so much that you can even code games in CSS! Hence, you can mitigate most styling issues with CSS. For example, sometimes you want to do something visual with content, like giving a headline a cool style. The best easy way to do that is to just create a graphic for the headline but the right way is to do it with CSS.

TIP #19: A/B TEST Images in Ads and Use The Lessons For SEO

Finding the right image isn’t so easy. Especially in eCommerce, you want to use as many data points as possible to display the right image for your products because they seem to have such a big impact on conversion rate.

One important underutilized point comes from testing different images in ad campaigns and transferring the lessons back to product pages. These lessons can come in the form of showing the best performing product screenshot first or showing only images that perform well in Facebook/Instagram ads. 

The goal is to improve the user experience by getting data points that allow you to decide whether the image is good or not before you add it to a page. Remember, images have a big impact on user experience and, therefore, SEO.

Google understands whether the user experience on a website was good or not by looking at how quickly users return to search. Google can also measure the click-through rate of results and determine what sites users are inclined to visit. That is often dependent on brand awareness and the previous experience users had with a certain website.

Testing images in ads can speed up the total process. Measure several pictures against each other in ads and see which ones get better click rates for the landing or product page you send traffic to. Then, use that picture for the page.

You should test product pages and landing pages, but don’t forget to use other opportunities like Google Ads, Facebook or Instagram. Every piece of data helps you to put together an image.

3 Key Takeways To Optimize Your Images For SEO

Here are the the three key takeaways:

• Use unique and high-quality images in either GIF, PNG or JPEG format.
• Add relevant images to your product pages and make sure they’re positioned close to the text they’re related to.
• Optimize URL path, alt attribute, and image filename for organic rankings.

Get Image Optimizing!

Making any or all of the above changes is sure to increase your traffic and conversions, and the sooner you start the better!

Don’t be discouraged if you make these changes and your sales aren’t soaring the next day. Optimization results take some time and there’s a steep learning curve involved. Just make sure you consider what works and what doesn’t by AB testing and looking into your website’s analytics.