How to Fix Blurry Product Images in WooCommerce

Fix Blurry Product Images

Last updated - August 22, 2023

WooCommerce provides practical and user-friendly features that allow online stores to operate seamlessly. However, regardless of its WordPress-oriented architecture, this piece of software often keeps the users busy trying to solve one or two inconsistencies that occur due to several potential reasons.

One of the most important features of your website that influence the decision-making process of your visitors is the appearance of the goods you’re trying to sell. Being visual creatures, among other things, humans often base their purchasing decisions according to the visual appeal of the product they’re considering to buy.

Blurred images diminish the visual appeal of your offer, decrease the level of trust, and simply have a negative influence on your brand in general. If you are facing issues with the way your product images appear on your website, we have devised a series of tips that might help you get rid of those blurry images once and for all. 

Update your WooCommerce version

If you haven’t updated your version of WooCommerce for a while, it’s possible that your WordPress theme is not compatible with the latest edition of the eCommerce platform. Since WooCommerce 3.3, the software developers managed to find a way to make their software compatible with virtually any WordPress theme you might consider using for an online store. 

Besides theme support that allows you to set the image size using WooCommerce and make the software bypass any interfering settings, thus keeping your image size just like you want it to be, there are automatic thumbnail resizing and cropping features available. With automatic thumbnail resizing, all you have to do is insert a new image size and the software will run a background process that will resize all other images that need to take the new look.

Resize your images using WooCommerce tools

The most common reason why images appear low quality or blurry is because the size of your image doesn’t fit the required image size for your theme. For example, if you’ve set the image size to 300×300 pixels and you upload a 100×100 pixels image, the theme is going to stretch the image and make it appear blurry.

To make sure your pictures are crisp and clear, choose the proper size of the image you wish to upload. If you are not sure about the size of your image, there is an easy way to do this.

First, move your mouse over the image you’re not satisfied with, and press the right mouse button. Choose the Inspect option and watch as your right screen side shows the HTML code of your website.

This screenshot shows how to choose the Inspect option and open up the HTML code window.

Fix Blurry Product Images

These two screenshots show how you can inspect the actual image placeholder size.

Fix Blurry Product Images
Fix Blurry Product Images

The next step is to go to WooCommerce Settings, click on the Products tab, and choose Display. In the Display menu, we can find the current settings for our product images. Find the image type you wish to resize (Catalog, Thumbnail, Single product image) and set the image size according to your theme requirements.

The screenshots below show how the Display menu appears.

Fix Blurry Product Images
Fix Blurry Product Images

 

Once you’ve fixed the size, just click save changes and the software will automatically resize your images.

Older versions of WooCommerce needed a third-party software like Thumbnail resizer or a similar product, but since the inception of the 3.3 version, the process is automatic and runs without the need for external plugins. 

Check out tips on resizing images without losing quality.

Upload images according to your theme image placeholder requirements

We already mentioned how you can inspect the image placeholder size for your current theme. In case WooCommerce is not able to fix your issue automatically, it might be that your theme requires larger images to be uploaded. 

If you don’t have the appropriate image size, it’s not a bad idea to contact your web designer or photographer, depending on with whom you’re managing your web content and ask for images that fit your needs.

Use WooThumbs

This plugin allows you to manage and adjust your image and video content without too much effort. All you have to do is download the plugin and adjust the custom image size for each category (Thumbnail, Single Product image, or Catalog). Once you’ve set the image size, every image you upload will automatically take the size you already set.

More than that, WooThumbs allows you to insert and manage video content, add variation images for a single product to help the visitors get a deeper perspective of your offer, and set different image effects.

Conclusion

It’s of utmost importance to keep your web content as fresh and clean as it can be. It’s not only a matter of aesthetics, but your revenue is also largely depended on the impression your visitors get when they’re browsing through your store. A sharp image shows your product at its finest and displays a dose of professionalism which is what builds trust with the customers. eCommerce experts agree that if a consumer should choose between two stores that sell the same product, the one that provides a more enhanced user experience will make the sale.

Further reading

2 COMMENTS

  1. I’m using Woocommerce version 6.0 and the product tab doesn’t show product image dimensions anymore.

LEAVE A REPLY

Please enter your comment!
Please enter your name here