Last Updated on
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.
Images are Getting Distorted
If you are uploading your images in a blog posts, there are not much restrictions on how you size images unless it exceeds the size of the content placeholder. However, if you’re using the images for product views in WooCommerce, the images must comply with a certain resolution. If you upload an image that is smaller than the set resolution, you’ll get a blurry image.
To fix this, you can either make the images the right resolution. As a golden rule, you can’t resize the images to make them larger as that will only make the images more blurry. Scaling down or reducing the image size is no problem though so it’s always better to work with a large image and just scale it down as needed. Changing image resolution should be easy enough with an image editing tool.
You can also change the image placeholders to be the right size. If you want to change image dimensions for posts, go to your WordPress admin panel, click on “Settings” and then on “Media”. Here you can set the image dimensions for posts and pages. From here on it would be best to upload images in the dimensions you have specified.
For WooCommerce products, you can change image sizes by going to your admin panel then click “WooCommerce”, “Settings” then on “Products” and the “Display” tab. From there just scroll down and you’ll find the settings to change image placeholder sizes. Set your desired size and just click on “Save changes”.
After changing these settings, it is actually recommended to regenerate your image thumbnails since this will fix any instance of images becoming blurry after making changes to image sizes.
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.
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.
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. If you think uploading a bigger image is okay, you are sorely mistaken. Bigger images, if not proportionate to the set image dimensions could distort or crop your images making it look bad. If you upload a smaller image, then it will definitely be blurry. Check out our post on how to optimize images for the web to learn how to prepare your images for use on websites.
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, name it “ukulele” and not “learn-how-to-play-a-ukelele”.