Product images: How to optimize it for faster browsing process in WooCommerce

Imagine that you are looking for some products to buy online. But then, when you click into a webshop, it takes so much time to load. Would you be willing to wait, or like any other customers, go backwards to find other e-shops? This is one of the most common issues that many retailers have met. However, there is an easy and simple solution that can help you out: Optimizing product images!

product images 2

It sounds unbelievable, isn’t it? But trust me, a few product image changes can lead to great differences. Overall, it helps speed up the buying and selling process. As a result, both customers and owners will gain lots of benefits. Today, we want to share about the role of website speed and more importantly, the advantage of the right product images. 

As experts in the outsourcing field, we – ArrowHitech hope that our blog can help you utilize your eCommerce business. And now, let’s guide you through the basic relationship between Product images and Webshop Speed.

Product images affecting Webshop Speed

Why is Webshop Speed important?

According to NeilPatel, only 1 second delay in page response can lead to 7% sales decrease. The majority of customers never return to a site that is slow in response. Every second matters! Therefore, your page should have the fastest response.

What should be your web speed ?

Apparently, it should always be as fast as possible. Roughly 50% of buyers expect the sites to load under 3 seconds. Even if they are willing to wait, their shopping experience can be badly affected.

How to check your web speed?

Online tools are available for everyone, some are free and some may not. Here are the top 5 Website Speed Test tools that we recommend:

  1. Pingdom
  2. PageSpeed Insights (Google)
  3. Mobile Website Speed Testing Tool (Google)
  4. Analytics Site Speed (Google)
  5. WebPageTest
product images
Speed determines if buyers want to stay at your page!

That is a brief description to let you know how important it is to have fast web speed. But how can product images help? Let’s break into some key points.

Top 7 ways to optimize product images 

Use JPEG format

Among many common types like PNG, GIF, TIFF,… JPEG or JPG is the best contender because it optimizes the size and quality of images. Especially images with lots of colors and details, JPEG is a great option. For this reason, big shops like Amazon or Walmart choose the JPEG format.

However, the only drawback is that JPEG does not support transparent images. In this case, you should use PNG format. Images with text or ones with few colors can also be optimized in PNG format as well. 

Resize product image dimensions

Plain, little detailed items such as plain shirts, pillows or bags require about 800 to 1000 pixels. On the other hand, custom-tailor ones or jewelry that require zoom-in photos need at least 2000 pixels. Still think that 2000px is not enough to make your e-shop jammed? When customers browse your page, their network automatically adds 3000 pixels for each photo. Now multiply by hundreds or thousands product images on your page. With such heavy load, the smaller image dimensions, the better!

When it comes to resizing, many only think about image size like 500×1200 or 300×400. However, image size file is a key point to consider. Make sure that the majority of your image size is under 150kb, if possible, smaller than 100kb will lead to faster browsing speed.

For Google Chrome users, a quick and easy way to check the image size is to use ‘Inspect’. Ignore all the codes, you will see the image size like this guide below:

If you forget to resize your product images, don’t worry because you can always change them with Imagify compression plugin. This plugin minimizes the product image dimensions automatically.

Use a compression plugin

Image compression plugins allow you to easily upgrade images in WordPress for better speed and performance. This method helps speed up the process by downsizing small details like camera details, color profiles or fixed thumbnails. Photoshop’s Save for Web, like what we have mentioned, is one way to compress images. 

Top 2 most common compression plugins are lossless and lossy. Lossless plugin slightly decreases product image size without changing its quality. Likewise, a lossy plugin reduces greater size but it sometimes changes image quality.

Save product image for Web

Adobe Illustrator, Lightroom, Photoshop as well as other popular photo editing softwares usually have these functions. Here in Illustrator, go to ‘File(/Export/)Save for Web’.

After that, change format to JPEG, Progressive and 60% Quality. Then, look at image size, if it’s under 100kb then you are good to go!

1 product images
Product from FoodFarm – best selling WooCommerce theme from ArrowHitech

Set WooCommerce thumbnail size

Another simple yet quick way to help speed up the process. camera details, metadata, color profiles, embedded thumbnailsWhenever you upload a product image, WordPress automatically sets the image dimension for thumbnails. Choose Appearance/Customize, then select WooCommerce/Product Images to adjust.

Have simple product image backgrounds

product images 3
Modus – Modern Furniture WooCommerce Theme from ArrowHitech

You may have known that almost every single good is displayed on white, plain background in online shops. Not only does it help highlight the items, it also decreases image sizes. Hence, your products will spot out at a higher speed.

Use CDN

CDN – Content Delivery Network allows you to upload images on an international level. Because WordPress only loads media for nearby customers, CDN helps expand your online shops globally. With a diversity of CD networks, you can count on ArrowHitech to integrate networks and services and deliver the best solutions for your E-store.

About ARROWHITECH

With dedication to solve every customers’ problem, ArrowHitech always works hard to achieve your trust. Since 2007, we have met the demands of more than 1,000 clients and completed over 10,000 projects. We have nearly 16,500 selling products that are highly rated by thousands of buyers.

What is more, as a leading outsourcing Vietnamese company, our products are extra affordable, yet still in high quality. With key markets located in Europe, Northern America, Australia and some other regions… language barrier is non-existent.  Therefore, ArrowHitech is confident and determined to help every single customer.

ArrowHitech – the leading company in IT outsourcing

Bottom-line

In this article, we have listed out top 7 ways to optimize product images to help speed up page browser. We truly hope that you can apply these methods to your own online shop. Our team wishes you the best of luck for your successful eCommerce business! For more information, feel free to contact our 24/7 services

Tags

Share