Get started building your WooCommerce store or web application — Call us today at (206) 806.7809
Reading Time: 3 minutes

Why Do I Have Blurry Product Images?

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.

WooCommerce Products Display Settings

Within the WooCommerce -> Settings page, click on the Products tab.

Products Tab WooCommerce

Then click on the Display sub-menu.

Display Setting Images

Product Image Sizing

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.

Product Image Sizing Woo

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.

Inspect Product Images in Web Browser

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.

Inspect Image in Browser

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.

Natural Image Sizing Inspect

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.

Final Note

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.