A Lowdown On How To Optimize Images On Your Ecommerce Site | RankWatch Blog

Check out what's new and upcoming
in RankWatch

A Lowdown On How To Optimize Images On Your Ecommerce Site

by
3 Comments

How-To-Optimize-Images-On-Your-Ecommerce-Site

“A picture speaks a thousand words.” The phrase dates back to the age when the concept of a camera was launched. And it still holds the same authenticity like it used to have all those years back. A good picture always captures a viewer’s eyes. And the concept remains same everywhere. Online businesses, today put a lot of emphasis on how well the images on the e-commerce sites are produced and placed.

When you run an online store, optimizing images is almost an art that you would surely want to master. And believe it or not, product photos can actually convince a shopper to take the next step in the buying process. Offering beautifully shot and highly detailed photos of your products – can get your site much closer to getting a click of that “add to cart” button.

Take this picture for example:

e-commerce-site

 

East is an agency for creative artists, based in London and New York. The site is committed to carefully curating to include a broad spectrum of talent in photography, moving image, set design, and styling. Artists who truly embody their creative output, both commercially and in their personal projects.

There is nothing new about the product here, but the images are beautifully captured, highly detailed and beautifully placed. That is what matters. E-commerce product photography must convey the value and functionality of an item which will inspire shoppers to buy. So, whenever possible, product images should also be lean and fast loading. That helps the SEO ranking factor too. Because no one wants to wait around for images or sites to load.

And how exactly you can do that? Here’s a lowdown to 6 important steps of optimizing images:

Which Image File Types To Choose

There are three main file types to be focussed on, for saving images optimized for the web: GIF, JPG, and PNG.

JPGs
JPGs (also known as JPEGs) are perfect for photographs, or complex images containing lots of colors, shadows, gradients, or complex patterns. JPGs can also be saved in high quality, low quality or anywhere in between. And are commonly used for product images, photographs, and homepage hero banners/images.

PNGs
While the image size is smaller, this won’t be a good option for complex images and photographs. But, most importantly, PNGs can handle transparency. This works well for logos because logos require transparency.

GIFs
GIFs are still an option for small image sizes where only a few colors are needed. Much like PNG-8, GIF files are restricted to only 256 colors. And which is why GIFs should never be used for product photos. Though they can be used for logos.

save-image

How To Save Images Properly

While saving the images, your first and foremost concern should be – using right dimensions. If you are working with Photoshop, view it at 100 percent to get a view how it will look on a computer monitor. You can do this by trying the “save for web” option. In Photoshop CC 2015 the option can be found under File > Export > Save for Web; in previous versions the option is located in File > Save for Web.

 A-Better-Lemonade-Stand

(Image Source: A Better Lemonade Stand )

From the menu, you can adjust the resulting image size, compression, and format. You’ll also be given an approximate loading time and file size. Alternatively, there are plenty of free online tools designed to compress your photos. The Kraken Image Optimizer and TinyPNG tools shrink your images to an accepted small size while preserving quality.
Here are some others you can try:

  1. PunyPNG
  2. JPEG Reducer
  3. JPEG Optimizer
  4. Online Image Optimizer
  5. Shrink Pictures
  6. Compress Now
  7. Image Optimizer
  8. Compress JPEG
  9. Compressor.io
  10. Optimizilla

Reducing Image File Size

The next important part is reducing the size of the image file. And it is absolutely possible without actually reducing the quality. A quality of 60 works best because it minimizes the file size down to under a megabyte with no noticeable difference in quality. Shoppers want their product photos – large, highly detailed, and able to be zoomed in on.

And there are various applications and websites around to offer web-ready compression for your photos while preserving their quality. Even the highest resolution photos will stand out and load quickly when saved in a web-ready format. The “Save for Web” function in Photoshop is a great way to reduce file size.

Compressing the images for use on the internet is also important. The smaller your image file sizes will be, the faster they will be loading for customers visiting your e-commerce site. Start by finding out what the maximum target pixel dimensions you’re trying to fill are. Finally, consider the internal contents of your image – follow the sensible cropping tips and make sure your product is nicely centered and appropriately filling the frame. Here is an example:

Practical-Ecommerce
(Image source: Practical Ecommerce)

Providing Descriptions

Though the product description doesn’t actually add any SEO value to your images, but they can be useful, still. These can be described as – how the picture was taken, when, and any other interesting elements. The Caption will show up underneath the image on the live article. However, bounce rates are taken into account. But how does that relate to this?

If someone searches for a term, clicks on your page and bounces back to the search page quickly, this is used as a factor for rankings. People would go back to search engines mainly because the content didn’t satisfy them. And that’s where image captions come in. Next to your headline, image captions are important because they are one of the most well-read pieces of content on your entire site. So, if you fail to use them, you’re losing out on one more chance to lower your bounce rate.

Providing-Descriptions

Setting Alt Texts

Alt tags are important because they add SEO value that will help you achieve better rankings in the search engines when used appropriately. These are technically a text alternative to images when a browser can’t properly render them. Much like an example like this:

<img src=“jonsnow-tee-blue.jpg” alt=“jonsnow tee blue”> But don’t give your alt tags and images names which might trigger a spam alert, either. For example, ‘jonsnow-tee-blue-on-sale-buy-now.jpg” and giving it the same matching alt tag.

Naming your files is the first step in optimizing your images. By being specific, you’ll help Google understand what’s on your site which will help you rank better. Alt attributes, or tags – represent information about a picture displayed in the event that the image is not loaded successfully. And therefore, Google considers this as an important ranking factor. It is recommended you use at least 125 characters for the alt tag. It is not necessary to use keywords in the alt tag, although you can.

Setting-Alt-Texts

Adding Thumbnails

Adding thumbnails would be amazing but you have to be careful about one thing. They can ALSO silently kill your page loading times. They are generally added in critical steps during the whole shopping process. And if they are obstructing your category pages from loading – you might also lose another customer. So the sizes of thumbnail files should be as small as possible. Because , lastly, the cumulative effect of your thumbnails will have a huge effect on your page loading time.

Also, try keeping variations in your alt tag text to not duplicate text that you would use for the bigger versions. The last thing you want is the thumbnail being indexed instead of the large image. A case could be made to leave out the alt text entirely. Thumbnails are great to use in search results, both in Google and inside your own eCommerce store. Search result pages with thumbnail pictures usually, receive more clicks and traffic. And that is simply because they stand out from various other text-limited results.

Adding-Thumbnails

Adding Image Sitemaps

If your site uses JavaScript galleries, image pop-ups and other things to improve the overall shopping experience – Google image sitemaps are there to help you get your images noticed by people on web and Google itself, too. Web crawlers can’t crawl images that are not called out in the webpage source code. Therefore, to let them know about these images, you must list their location in an image site map.

Google has many guidelines for image publishing to help your website rank high on the search engine. Additionally, you can also use the extension for images on Google Sitemaps to give Google more information about the images on your website. This can help Google find more images than what would be conventionally found through their search engine. Although using Sitemaps doesn’t guarantee that your images will get indexed by Google, you can absolutely increase the optimization of your website, and especially the images by using Sitemaps.

Using-Image-Sitemaps

Pragyan Sharma on Facebook
Pragyan Sharma
Content Writer at Buildabazaar, Infibeam. A passionate writer, a dog- lover, a huge book-lover. Believes in only one religion – Music. Surrounded by a close-knit, like-minded group of people. Doesn’t hesitate stating her opinion – on important issues.
  • Lynna

    First of all, I would like to thank you for providing this valuable information and taking pains to attach screenshots to help readers understand the intent better. Images are the cornerstone of any ecommerce site, and there’s no denying the fact that using inappropriate formats slows down the website’s performance, especially in terms of page-load time. The tips featured in this article takes out the guesswork and offers the sure-shot way of using high-resolution pictures on ecommerce sites without affecting the site’s performance – this is the best thing I’ve come across on internet today.

  • ben

    Amazing article! Thank you so much for providing this invaluable information. I own an ecommerce website and I know the struggle that comes with uploading images and optimising them for maximum visibility across the internet. This article has everything that is needed to make the process easy and quick. Thanks once again!

  • toby

    Thanks for giving heads-up on technicalities and saving us from committing grave errors. I never cared about naming images while uploading them on my ecommerce website, but after reading this, I realised I was missing out on a great opportunity to rank my website in Google search results. And I also tried to compress image files but it didn’t work out quite as expected. Now I’m looking for some other image compression tool, which could reduce the image size on disk, without compromising quality.

SUBSCRIBE TO THE RANKWATCH BLOG


 

MOST POPULAR