Back to Blogs
Fixing Blurry Product Images in WooCommerce
July 25, 2018
Table of Contents
Media – especially images and videos – can make or break an online store. Your images, specifically, need to be clear and properly sized so that customers can find and inspect the items they will be purchasing without having the luxury of physically holding them.
So what can you do if your images are blurry, pixelated, or just poor in quality?
Understanding the way that images are sized and displayed within WooCommerce and your specific theme will help immensely.
Within the WooCommerce -> Settings page, click on the Products tab.
Then click on the Display sub-menu.
You will find the product images area toward the bottom of the page – this is where you will set your product image sizes. Note that this is only the configuration for WooCommerce – your theme may affect the way that images are displayed on the front end.
In this example we see that our catalog images will be sized to 300 x 300, our single product images will be sized to 600 x 600, and our product thumbnails will be sized to 100 x 100.
The most common issue you may run into is using images that are smaller than the largest-sized product image.
For example, if you were to upload a product image that is 200 x 200 and WooCommerce or your theme resizes it to 600 x 600, you’ll be causing your product image to become blurry/pixelated.
Resizing smaller images to appear larger is a common mistake. Make sure that you are uploading images that are equal to or greater than your largest product image size in WooCommerce -> Settings -> Products -> Display -> Product Images.
Now, if you’re not sure what your theme is doing via CSS to resize images, there’s handy trick you can perform in your browser. Note that this will only work with web browsers that have an “inspect” feature.
If you right-click on an image in your browser and select the “Inspect” tool, you’ll be able to see the “natural” product size and the “display” product size.
The image size will be displayed in the left panel near the highlighted image, and in the right panel as you hover over the code that refers to the image.
As you can see, in this example our image is naturally 300 x 300 – WooCommerce does this per the specifications in WooCommerce -> Settings -> Products -> Display -> Product Images.
But the Storefront theme is resizing the catalog image to 154 x 154 based on my screen size and other factors.
If my image were to be any smaller than 154 x 154, it would become blurry if it had to be resized to fit the theme and WooCommerce specifications.
If you’ve made sure that your images conform to the WooCommerce and theme specifications for size and they are still poor quality, there’s a good chance that you need to find a new image. Images of poor quality will not improve when resized, period. An image that is already blurry or pixelated will not improve when scaled down. Best to find a new asset and move on!
Your team is about to get a whole lot mightier.
If it sounds like we might be a good fit, send us a message. We’ll get back to you within 24 hours. And then we can hit the ground running.