What is the best size for WooCommerce product images? If you are dealing with blurry or cutoff photos this information can help you solve the problems. The goal is to get the best image size for WooCommerce that will load quickly and look amazing. That is what leads to more sales!
This article is broken into the following topics, all of which are relevant to creating the best image size for WooCommerce.
WooCommerce Image Problems
WordPress Product Image Size
WooCommerce Crop Image Ratios
The Minimum WooCommerce Image Size
Custom Image Sizes For WooCommerce Products
Recommended WooCommerce Image Sizes
How To Optimize WooCommerce Product Images
Making Sure Your WooCommerce Images Load Fast
If you want to jump ahead, feel free, but you may miss some important information!
First, let’s look at the causes of the problems :
Blurred WooCommerce Photos :
If you surf a lot of e-commerce websites using WooCommerce, (it is one of the top ten e-commerce softwares) you will find blurry images. Why?
Usually the site owner has uploaded the wrong image size. Software then distorts the pixels to fit the platform. As a result, the images look bad and it costs the site sales.
When you upload the correct image size for the WooCommerce platform, your images will look crisp, sharp and help sell your products.
WooCommerce Product Image Cut Off :
Once again, the wrong image size was uploaded. This is a pretty easy fix, especially if you have the original high-resolution image file.
Now let’s discuss WordPress product image size :
WordPress is a flexible software and the product image size you use on a WordPress e-commerce website may vary. The WordPress theme you choose will often dictate the sizes of the images you use.
That isn’t to say you can’t change the dimensions or sizes. But for distortion free, clear and sharp photos, it is best to create your images in the dimensions and crop ratio your theme requires.
What is Crop Ratio? :
The most common crop ratio for most e-commerce sites is 1:1, or a square format. Next would be 4:6, a rectangular format. Finally you have the 16:9, which is a long, thin crop, think large screen tv.
1:1 Ratio Crop
4:6 Ratio Crop
16:9 Ratio Crop
The Minimum WooCommerce Image Size:
The smallest image you should upload to your site is 800px x 800 px. These may not look as clear on retina displays, so I recommend you upload larger images to get the best possible resolution.
For thumbnails, the image size is set at 150 x 150 px. Smaller images will appear blurry.
The key is you want a larger image that looks great, but want to keep the file size as small as possible so your site will load faster.
Custom Image Sizes For WooCommerce Products :
You can change image sizes for WooCommerce in two ways:
1.) On your WordPress dashboard go to Appearances, select Customizer and then click WooCommerce. Choose the Product Images section. Once there, you can enter the image size values in the fields for Thumbnail Width and Main Image Width.
2.) You may use the WooCommerce Plugin: WooThumbs.
On both of these, after you click save, take a look at the site. Does it look right? If not, try again. Play with the sizes until you get what you want.
Recommended WooCommerce Image Sizes :
Again, these will depend on your WordPress theme and the image sizes you have chosen above. For standard images, I find 1080 x 1080 pixels works well for 1:1 ratios.
For 4:6 ratios, I often send 1080 x 1350 pixels. And for 16:9 ratio images, 1920 x 1080 pixels.
Thumbnails : 150 x150.
If you intend to use a zoom feature, some recommend images up to 2000 pixels wide.
How To Optimize WooCommerce Product Images :
To keep your site loading fast for shoppers, you want to optimize your images to create the smallest file size possible. I’ll share how I optimize my images and you can use the method(s) that work best for your situation.
When exporting images for the web, I set my Photoshop and/or Lightroom settings to the size, and export at 72 dpi – 90% quality. Some say you can go as low as 80% without degradation, but I find 90% quality works best for me.
After the images have exported, I then run them through a program called JPGMini. This will further reduce the file size. The eye can see no difference after this compression, and it definitely saves space!
Finally, I also recommend a program called WP Smushit. This is a free plugin that also has a paid option. It further reduces your file size, again, with no noticeable difference other than the number of KB.
Making Sure Your WooCommerce Images Load Fast :
Website speed is important in business. People don’t like to wait for sites to load. Search engines won’t show your site in results if the load speed is slow. So content delivery is important.
I suggest you look into a CDN, or Content Delivery Network. CDN’s will deliver your images without taxing your server by requesting a bunch of image files.
CDN’s are set up to deliver this content quickly. Once set up, your site will instruct the web browser to request the image files from the CDN. How does that work?
First, you will need to select a CDN to deliver your content. You can use Cloudfare, Amazon, and a number of other hosts. Even JetPack, a wordpress plugin offers the option.
JetPack will set it up for you, but if you decide not to use their services, a program like WP Super Cache can be easily configured to do the work.
So with the correct image size for WooCommerce, an optimized image file and fast delivery, you are on your way to making your e-commerce site user friendly.
One of the most important things is to make certain your images are the best they can be. People often decide if they want to purchase a product just from the product photography.
If you want to upgrade your product photos for WooCommerce, let’s talk about how I can be of service increasing your conversions.
Discover How Professional Photography Can Elevate Your Brand
Get a Custom Quote Tailored to Your Specific Needs
Take a minute to fill out the form below. Doing so will help me understand your product photography needs. Once I receive your information, I'll reach out to you personally to discuss the project in more detail and create a customized quote for you.
You may also text me at: 410-596-4127 or E-mail me at: tom@tomcrowl.com