Fixing Blurry Product Images in WooCommerce

18
4


Have you ever switched themes and your product
images suddenly looked off? If so, then let’s take a look at how to
fix your blurry product images. There are two common causes of blurry or distorted
product images. One is not having the appropriate size images
uploaded, which unfortunately we can’t fix in this video. For that, you’d need to re-upload a higher
resolution image appropriate for your theme. The second common cause, is if your images
are high enough quality but your image sizes set in WooCommerce are incorrect for your
theme. So how do we fix this? Let’s dive in. First you’ll want to navigate to a problem
image in your store. Make note of what type of image it is as there
are three types of product images in WooCommerce: There’s Catalog images, Single Product Images, and
Product Thumbnails. In this case we’re working with a catalog
image. Next right click on the image and choose the
“Inspect” or “Inspect Element” option. This works in most major browsers, just be
sure to have it’s developer features turned. In this case we’re using Chrome. You’ll now be able to see the HTML code
that is displaying this image. If you look closely you’ll find the image
placeholder height and width listed in pixels. Make note of these dimensions as we’ll need
them in just a moment. In the theme that we are using the image placeholder
size is 185 by 185 pixels. Now in your WordPress admin head to WooCommerce, Settings, and then the Products tab, then select the Display submenu. Here you’ll see the current WooCommerce
settings for you product images. Take a look at the sizes for the specific
image type you are trying to fix. In our case that’s the Catalog images. Right now the catalog images are set to 100 by 100 pixels, which is smaller than the required 185 by 185 that our theme is trying to display. This is what’s causing the image to get
stretched out and blurry on our site. So we’ll need to update this setting, to match
what we found on the front end of our website. You can enter the exact size you found in
our first step. Or, if you want, you can even make this setting
a little larger than what you saw on the front end of your store for a little extra image
insurance. Now that we’ve entered the correct size
in our settings, we need to regenerate our thumbnail images. Updating the sizes in your WooCommerce settings
does not automatically regenerate the images to fix them. To do that, we’ll want to use a plugin called
Regenerate Thumbnails. Install and activate Regenerate Thumbnails
by Alex Mills. Once that plugin is activated, if you want to do this
for your entire Media library then head to Tools>Regen. Thumbnails. There you can regenerate the thumbnails for every image on your site. Otherwise head to your Media library to select
the specific images you need to regenerate. Make sure you’re using the list view and
then select your images. In the bulk actions menu choose Regenerate
Thumbnails. Depending on how many images you have and
how fast your server is, this may take a minute or two to complete. Once this is done, head back to your store
and your images should now be the proper resolution and looking great! If your images still look to be low quality,
make sure that the product image that you originally uploaded is large enough. For most themes any image larger than 800
pixel by 800 pixels should work. Keep this in mind any time you may switch
themes using WooCommerce. Thanks for watching!

18 COMMENTS

  1. This needs to be updated- there's no display in the products tab anymore. It says to go to customizer, but that only has options for main image width and thumbnail width. No hard crop option anymore.

  2. Hey There!
    Great Video. But we had a differenet problem and maybe you can help us with an idea…

    if you look at our shop
    link: https://www.hello-world.net/download-center/

    with a iphone (or maybe every mobile phone) you can see a very good image (catalog & single) quality. if you look to the same site with a desktop computer you will see blurry images (catalog & single).

    This problem drives us absolut nuts. do you have any idea or hint for us?
    thnx for helping & best regards from Germany

  3. for those of you who can't see it in woocommerce go to your theme settings and change the product image sizes under the shop sub menu.

  4. The only images appearing blurry for me are on my home page. They look good everywhere else. I tried resizing them an all, it's not working. There is no display tab for me and I did the Appearance -> customize -> woocommerce -> product image thing and it did not work. HELP.

LEAVE A REPLY

Please enter your comment!
Please enter your name here