How to optimize your WooCommerce product image size


Studying Time: 8 minutes

WooCommerce product picture dimension is an important facet of any on-line store. Clients get plenty of intentional and unintentional messages out of your website’s visible communication. 

The standard and backbone of your photographs are essential as they will form the angle concerning the product. They’ll doubtless be the primary and solely contact clients have with the product earlier than buy. 

Make a slight mistake, and the shopper may bounce.

It’s thus vital that retailer house owners provide you with inventive methods of optimizing WooCommerce product photographs to drive gross sales and enhance income. 

One important facet of that is optimizing your WooCommerce product picture dimension.

There are a number of methods of going about that, together with:

  • Adjusting the photograph lighting 
  • Dashing picture supply utilizing WooCommerce plugins
  • Modifying picture dimension

Let’s take a extra in-depth look into this.

Excessive decision photographs with right dimensions

Including photographs in several sizes typically results in blurred or stretched photographs. 

And guess what?

A giant buyer turn-off is unclear, grainy, blurred, or discolored photographs shot in poor lighting. It’s one of many largest errors that may result in poor gross sales.

It’s best to add photographs within the right dimensions to your on-line retailer as a result of it boosts the standard of your picture and would possibly play a significant function in driving conversions.

So, what’s the finest picture dimension for WooCommerce?

What needs to be the precise dimension of a picture?

The perfect picture dimension for WooCommerce relies on a number of issues, like:

  • Retailer person interface
  • The WooCommerce theme used
  • The kind of picture zoom plugin the shop makes use of 

Sometimes, the minimal decision it’s best to purpose for together with your WooCommerce product photographs is 800px x 800px. The utmost beneficial decision needs to be no increased than 1000px x 1000px.

Nevertheless, for higher high quality, it’s best to purpose as excessive as doable. 

For instance, the above dimensions are appropriate for traditional merchandise, whereas sophisticated and detailed merchandise would possibly require bigger photographs. Most likely 2000 pixels and above, to permit clients to zoom in on even the extra minor particulars.

Observe how one can edit the scale of your product photographs in WooCommerce.

optimization of woocommerce product images

As you possibly can see within the picture above, there are a number of sorts of photographs for WooCommerce and every has its optimum dimension. These embody:

Catalog photographs

These are often medium-sized photographs which are appropriate for unique product web page loops. These embody the likes of Associated Merchandise, Store, and Product Class pages. These photographs are usually a couple of hundred pixels in dimensions.

For example, word how the catalog photographs on Walmart are small, but clear.

woocommerce catalog images

Single product photographs

This refers to fundamental or featured pictures. They’re doubtless the biggest photographs and are used if you’re making a WooCommerce product itemizing. 

The one product photographs shouldn’t be cropped and should have a minimal width of 600 pixels.

For example, word how the beneath product picture from Goal is massive.

example of woocommerce product images

Thumbnail picture

It is a reduced-size model of an even bigger picture used as a placeholder for greater photographs. Thumbnails are sq., cropped, and appropriate for product galleries, purchasing carts, and widgets.

WooCommerce thumbnail sizes are set to 600 pixels width by default. Nevertheless, the shop proprietor can customise them relying on utilization. 

Equally, gallery thumbnail dimension is ready to 100 pixels x 100 pixels by default.

Check out these thumbnails from Etsy. They’re small, but clear sufficient to persuade guests to click on on them to open the product pages.

example of woocommerce thumbnail images

Alter the photograph Stage

One other manner of reaching one of the best WooCommerce store web page picture dimension is adjusting the photograph Stage utilizing numerous picture modifying instruments and packages. 

All you want are platforms equivalent to Adobe Lightroom, Photoshop, Affinity Photograph, Procreate, or related packages. Utilizing these instruments, you possibly can simply regulate the lighting Ranges of your photographs.

However what are Ranges, in any case?

Ranges will let you manipulate the histogram of your photograph. You possibly can regulate the mid-tone, mild factors, and darkish factors as you would like. Tuning the midpoints means you possibly can take away extra picture mild, add distinction, and enhance saturation.

Right here’s an instance of a picture and its histogram.

example of an image and its histogram

Don’t let these enormous phrases diminish your hope of adjusting pictures to your WooCommerce gallery. You possibly can carry out all talked about actions with fundamental picture modifying expertise or rent somebody to do it for you. 

And should you’ve received restricted entry to premium photo-editing suites like Lightroom, search the web for related picture modifying instruments like Adobe Spark or Pixlr.

A tip right here—hold the picture background so simple as doable whereas adjusting photographs to your WooCommerce product gallery. It’ll assist your shopper see the picture clearly as your product could be highlighted. Moreover, it lowers the quantity of knowledge within the photograph, which reduces picture file sizes.

Fewer colours imply smaller file sizes. Ideally use a plain white background just like the one utilized by Amazon. This helps obtain the target with out compromising picture readability.

Observe how the beneath photographs on Amazon have clear background. This reduces their dimension whereas sustaining the standard.

images with transparent background on amazon

(Do you know that Omnisend gives a WooCommerce integration for marketing automation? You possibly can join your retailer right here.)

Show many viewpoints for WooCommerce product photographs

Product photographs can positively or negatively impression your potential clients. You want them to captivate and convert your web page guests into patrons. 

Subsequently, it is very important present the product that clients wish to purchase from a holistic viewpoint.

This implies creating WooCommerce product photographs that showcase the product from a number of viewpoints and angles. 

These viewpoints are essential because the buyer can’t choose up and study the merchandise as they’d in an offline retailer.

A holistic viewpoint is particularly important for gadgets historically offered face-to-face like footwear, clothes, and foodstuffs. 

Right here’s an illustration:

Methods to change the product picture in WooCommerce

It’s fairly important to show a number of photographs of the identical product in a user-friendly option to give the shopper a holistic view.

So as to add further WooCommerce product photographs to your merchandise that have already got some photographs, open the product web page in WordPress and add them.

In case you have an enormous assortment of photographs for a similar product, you possibly can simply add the entire catalog by way of CSV. WooCommerce has a built-in CSV importing function.

Go to Merchandise > All Merchandise > Choose your product > Add product gallery photographs

how to change the product image in woocommerce

The CSV works along side a publicly accessible URL. A superb alternative is importing them to Dropbox and copying the general public tackle of the picture file. Which you’ll then add into your CSV.

The most recent WooCommerce variations have a brand new function that permits customers to zoom a picture on hover. It’s a fantastic function, particularly should you’ve added increased definition photographs. It is going to assist potential clients see the merchandise on sale with finer particulars.

You would additionally give a 360º view of your product by leveraging a plugin like SR Product 360º View. This may give a fair higher product viewing expertise.

Load velocity optimization for WooCommerce product photographs

In a world the place persons are all the time pressed for time, it’s vital to make sure that you ship regardless of the potential clients need as early as doable.

Do you know that for each extra second your web site takes to load, your conversion charge drops by 17%? This will have a drastic impression in your gross sales and income.

load speed optimization for woocommerce product images
Picture by way of Bidnamic

Photos, being among the many heaviest components on a web page, can play a significant function in dictating the expertise right here. 

That’s why it’s extraordinarily vital for you, as an ecommerce retailer proprietor, to discover ways to optimize photographs to enhance the loading velocity of your website.

You do that by:

  • Compressing photographs
  • Changing photographs to a unique format
  • Establishing a content material supply community (CDN)

Let’s dig deeper.

Compress photographs

Compression is without doubt one of the finest methods of optimizing photographs to your WooCommerce product gallery. It reduces the scale of the photographs with out essentially altering their dimensions.

The 2 fundamental sorts of compression embody:

  • Lossless compression: Reduces the file dimension of a picture on a small scale in order that the change in high quality shouldn’t be seen to the bare eye.
  • Lossy compression: Reduces file dimension in enormous chunks, which is able to typically change the standard of the picture.

Usually, you can’t inform the distinction between lossless and lossy compression, particularly should you’ve used a much less aggressive algorithm when altering the picture dimension.

It’s best to use compression when modifying your photos to attain the optimum WooCommerce store web page picture dimension. It’s a simple hack of decreasing the picture file dimension with out altering anything. 

Fast Tip: By no means add photographs with enormous file sizes as a result of they may decelerate your web site and negatively have an effect on your conversion charge. Compress the photographs utilizing instruments like JPEG Optimizer, TinyPNG, and Compressnow.

You can even use WordPress plugins to compress product photographs. These plugins can compress photographs when you’re importing them to WordPress. This makes it handy so that you can compress photographs too.

Convert photographs to a unique format

The loading velocity of your ecommerce retailer largely relies on its weight and the scale of picture recordsdata uploaded. Changing the picture into totally different file codecs can play a significant function in decreasing your product picture dimension. This, in flip, can velocity up your web site with ease.

The frequent codecs utilized in on-line photographs embody PNG and JPEG.

JPEG format is nice for decreasing WooCommerce picture dimension as a result of the photographs are smaller and simpler to compress than PNG recordsdata. Additionally they assist numerous colours and are sometimes utilized by huge ecommerce shops like Walmart and Amazon.

Nevertheless, JPEGs don’t assist transparency. Therefore, you may be compelled to make use of PNG if you wish to add transparency to your photographs.

Moreover, AVIF and WebP are the latest codecs on the town. They’ve turn into an prompt sensation due to the good file dimension discount they provide. 

Surprisingly, they will cut back as much as over half of your web page weight with out compromising on high quality. This makes them good successors to the usual PNG and JPEG photographs.

What’s extra?

You possibly can simply combine them into your WordPress and so they’ll work seamlessly.

Configuring and utilizing WebP is a stroll within the park on WordPress. You possibly can set up a plugin like WebP Converter for Media. As soon as it’s put in, all it is advisable to do is sit and loosen up. 

converting images to a different format

The plugin works mechanically, changing all the photographs on the web site to WebP. This manner, you obtain new and lighter pictures than the earlier ones.

Arrange a content material supply community (CDN)

CDNs are also called content material distribution networks. They’re proxy servers in several geographical areas that act as intermediaries between the shopper requesting a useful resource and also you, the supplier.

They’re web servers distributed all around the globe by middleman firms. As they’re nearer to the guests than your server, they will velocity up the supply of your content material and enhance your web page loading velocity. Examples of those intermediaries embody KeyCDN, MaxCDN, and Cloudflare.

CDNs assist ship media like movies and pictures to the shopper sooner with out overloading your server. 

And guess what?

The perfect half about CDNs is that these middleman server firms can deal with a number of file requests in a matter of seconds. Inside this timeframe, they ship pictures in your WooCommerce product gallery to the shopper utilizing their sturdy community. 

Purchase WooCommerce product picture dimension mastery

Crisp, high-resolution WooCommerce product photographs are key to the success of each on-line retailer. Clients purchase no matter impresses their sight. 

Thus, it’s important to discover ways to optimize your WooCommerce product picture dimension.

What’s extra, you ask?

Shoppers love fast-loading websites and fast companies as effectively. For that reason, you must also put money into platforms that may velocity up your web site and in addition automate marketing duties.

Omnisend gives all marketing options beneath one roof. With Omnisend, you get;

  • Detailed email analytics
  • Deserted cart email campaigns
  • Customizable email templates
  • Pop-ups for lead era
  • SMS marketing campaign
  • SMS regulation compliance, and extra

So, begin with Omnisend totally free right now!

Get began with Omnisend right now & drive gross sales on autopilot with pre-built automation workflows

Begin Free Right now

Previous article3 Best Ways to Generate Leads on Facebook
Next articleHow to Get the Most out of Freelance Fundraising Professionals


Please enter your comment!
Please enter your name here