Wooassist

Assistance for Your Woocommerce Store

  • How it Works
  • Pricing
  • Site Maintenance
  • Blog
    • How-To Articles
    • Code Snippets
    • SEO For E-Commerce
    • Theme and Plugin Reviews
    • Wooassist News
    • WordPress/WooCommerce News
    • Interviews
  • About Us
  • Contact
You are here: Home / How-To Articles / How to Fix Blurry Product Images in WooCommerce

How to Fix Blurry Product Images in WooCommerce

February 26, 2015 By Nick J 10 Comments

Blurry ain't good
Blurry ain’t good

Sometimes you upload an image in WordPress/WooCommerce and it just doesn’t show up like you intended it. Sometimes they don’t align. Sometimes they don’t fit the placeholder. Sometimes the image just doesn’t show. And sometimes, the image gets blurry. Why the image gets blurry may be caused by one of a few problems. Here we discuss the common causes and how to fix blurry product images in WooCommerce.

You Uploaded a Blurry Image

If you uploaded a blurry image then don’t expect that you’re going to get a good image to show up. Maybe you viewed the image in a small screen so it looks okay but when you view it on a larger screen, you’ll find that it actually is blurry. If this is the case, there is hardly anything that you can do to fix the image. Image editing tools like Adobe Photoshop may be able to help a bit by making the image sharper but don’t be expecting any significant changes. Odds are you’ll have to get a better image.

WooCommerce Recommends Using Large Product Images

thumbnail cropping woocommerce

Before, WooCommerce images need to be a specific size that you set in WooCommerce settings. That is no longer the case. WooCommerce now uses a lighthouse so images pop up big when users click on it. Large images look great and will help sell your products. However, make sure they are properly optimized.

For most themes, WooCommerce recommends uploading an image that is at least 800×800 pixels. Don’t worry about the image being bigger than the placeholder as WooCommerce automatically sizes your images and will only show the full resolution when clicked.

To control thumbnail cropping of your product images, you can go to Appearance > Customize > WooCommerce >Product Images and then select your desired cropping settings.

If the image is not the problem, there might be a problem with how your images are rendered. You can try to regenerate image thumbnails.

How to Regenerate Thumbnails

Other than when changing image settings in WordPress and WooCommerce, you may also need to regenerate the image thumbnails on your website if they appear blurry after a redesign or changing to a different theme. The best and easiest way to regenerate image thumbnails is to use the Regenerate Thumbnails plugin. Simply install and activate the plugin and from there, go to “Tools” and “Regen. Thumbnails”. Just click on the button “Regenerate All Thumbnails” and the plugin will fix the blurry images like magic.

regenerate-thumbnails

If you want to regenerate thumbnails for specific images instead, you can do this on the Media page on your admin panel. Make sure you are viewing images with List view. Simply hover over the image and the link to regenerate thumbnail should appear. You can also mark all the images you want to regenerate thumbnails and use Regenerate Thumbnails from Bulk Actions and then apply.

regenerate-thumbnails-1

Best Practices on Image Use

There are a lot of things that you can do to avoid blurry images by following best practices. Once you set an image dimension, make sure that the images you upload comply with that requirement. Uploading a bigger image in WooCommerce is okay but make sure the image is optimized so as not to affect your page load speed. You can set how you want image thumbnails to be cropped. If you upload a smaller image, it might look okay on a mobile device but not on a PC or laptop. It is also important to know what image file types to use.

Another best practice for images is to always set an alt text for your image. If the image fails to load, the alt text will show up and the user will at least know what the image is about. Also, name your files properly. Don’t name your files after SEO keywords. If you have an image of a ukulele, give it a descriptive file name and not “buy-cheap-ukulele”.

People that read this article also liked

Related-Products-in-WooCommerce_featured-imageHow to Change the Number of Related Products in WooCommerce superhero-silhouette-hero-imageHow to Add a Hero Image in Storefront Improve Website Page Load Speed by Optimizing Images for Web Preparing Product Images for WooCommerce

Filed Under: How-To Articles Tagged With: admin, best practices, conversion optimization, how-to, image optimization, plugins, product management, WooCommerce

Comments

  1. Ryshel says

    April 22, 2021 at 4:42 am

    I need help fixing the appearance of the image showing in the related products. I appear stretched.

    Reply
    • Rob says

      April 23, 2021 at 3:07 pm

      Hi Ryshel,

      You have to make sure you are uploading the right image dimensions for the your products’ main image.

      Reply
      • Fabio Cipolla says

        May 2, 2021 at 12:27 am

        Please, take a look at my 1st project.
        https://conexaodelicia.com

        I had problems (all images disappeared from home/store page) with images, but now they baçk (I think it was EWWW fault, now I deleted it), but in a very weird way, blurring when you rollout the page.

        Do you have any idea what can I do? Thanks.
        Regards,

        Reply
        • Rob says

          May 4, 2021 at 3:49 am

          Hi Fabio,

          Do you have any plugins that implement lazy loading? That might be it. It’s a good feature to have for site speed though.

          Reply
  2. marco says

    August 27, 2021 at 9:05 am

    I do not have a “display” option in my woocommerce-settings-product page.

    Reply
    • Rob says

      August 31, 2021 at 8:47 am

      Hi Marco,

      WooCommerce has since changed the way it handles images. We have updated the article to reflect that. You can now use large images for your WooCommerce Products and set the thumbnail cropping option in the Customizer.

      Reply
  3. Ernesto says

    August 6, 2022 at 9:07 pm

    Hello, im having problem on my Woocommerce, i cant ad image, here is the link: https://bresciapc.com/riparazioni/riparazione-asus/asus-zenfone-9/

    Is there any solution???

    Reply
    • Rob says

      August 11, 2022 at 1:42 pm

      Hi Ernesto,

      You may be using plugin or theme that may be causing a conflict. Have you tried deactivating all your other plugins or switching to a default WordPress theme?

      If you need help fixing, you can send us an email.

      Reply
  4. Pat says

    October 10, 2022 at 3:36 pm

    Hi Ernesto,
    Thanks for the nice article.
    We have a strange problem with the pictures. If I click on the arrows for the image in a big view, it shows somethimes a smaller image? What can that be?

    Reply
    • Rob says

      October 20, 2022 at 2:10 pm

      Hi Pat,

      Can you try deactivating all your other plugins except WooCommerce just to check if there is a plugin conflict? If the issue disappears after you disable all your other plugins, one of your plugins is the cause of the issue.

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Woocommerce Support

wooassist-team-in-Iloilo

Get 2 Hours of
FREE SUPPORT

We are so confident that you will love our services that we will give you your first 4 hours at a 50% discount

That's 4 hours for only $75

BUY NOW

Happy Wooassist Customers

Awesome! Fantastic! I just went to our site and I see that our site has been fixed!! We are getting orders again thanks to you all at WooAssist! Our site has not worked and looked this good for many months!! You all are awesome! Thank you so much for fixing our site! You have a customer for life! Thanks for making my day wonderful!

Kenneth Arnold

We have been quite pleased working with WooAssist as they help fill in the gaps of our development needs, all at a great price. They are always timely and communicate great, I highly recommend their services.

James Grasty

My husband and I am EXTREMELY pleased with the WooAssist Team. They provide excellent service, are very knowledgeable, and super easy to communicate with. The team ALWAYS has our company's best interests in mind. I love WooAssist! All of you make my job easier.

Jennifer Taft leetaft.com

Categories

  • Code Snippets
  • How-To Articles
  • Interviews
  • SEO For E-Commerce
  • Theme and Plugin Reviews
  • Wooassist News
  • WordPress/WooCommerce News

Recent Posts

  • The Ultimate Guide on How to Set Up Shipping on Your WooCommerce Store
  • WordPress Site Gets Infected
  • Where to Hire a WooCommerce Developer?
  • Recent Spike in Attacks Targeting Outdated WordPress Plugins
  • Security Vulnerability in Spam protection, AntiSpam, FireWall by CleanTalk
Let us support your online store so you can manage your business

Get started today

Get 2 Hours of FREE SUPPORT

We are so confident that you will love our services that we will give you your first 4 hours at a 50% discount

That's 4 hours for only $75

BUY NOW

Free eBook

Your subscription could not be saved. Please try again.
Your subscription has been successful.

YOURS FREE!

5 Things Every Online Store Can Fix On Their Website In The Next Week To Increase Sales

Quick Links

  • How it Works
  • Pricing
  • Blog
  • Contact
  • About Wooassist
  • My Account
  • Checkout
  • Privacy Policy
  • Cookie Policy
  • Terms and Conditions

Wooassist

Australia:
8 Storie St.
CLONTARF QLD 4019

Philippines:
San Miguel St.
Poblacion, Iligan City 9200

Connect

  • Facebook
  • LinkedIn
  • Twitter
  • YouTube

Copyright © 2023 · Wooassist

Yours FREE!

5 Things Every Online Store Can Fix On Their Website In The Next Week To Increase Sales