A problem that affects some people is fuzzy photos on their WordPress website or blog. They struggle to make images sharp and nothing works, so what is the cause? Here are some solutions.
Problems resizing images
When large images are resized to make them smaller, they can become slightly blurred. Sometimes it is hard to tell with photographs and it is more obvious with illustrations and screenshots, but it depends on the subject and if you do it in a photo editor, you can apply a bit of sharpening or unsharp mask to the image.
WordPress does not have a sharpening feature, so a slight blurring may be noticeable if you look closely at large images that have been shrunk to fit on a web page.
When small images are resized to make them larger, it is very noticeable and the larger they become, the more blurred they are. It is a serious problem. Upload an image that is too small for your website and the result will be blurred images.
The best image size for WordPress
There is no best size for images in WordPress and it all depends on the theme. Many themes require images of a specific size and they may require a large one for featured images in posts, a medium size one for images in sliders like on the home page, and a small one for thumbnails in archive list pages.
The exact size of these varies from theme to theme. The developer of the theme you use on your site may state the required image sizes in the help files or theme documentation on their site, but there is a quick and easy way to see what sizes are needed.
Go to Appearance > Theme Editor in the WordPress sidebar to open the editor which lets you view the files in a theme.
The sidebar on the right lists all the files used by the theme. Click functions.php to load it into the editor.
Look for lines like add_image_size(blah, blah…); – you can see four in the example below. It depends entirely on the theme and I have seen some with none and others with up to 10. (The true means crop the image if necessary when making these thumbnails.)
These are the image sizes that are used by the theme for various things like a slider, featured image, thumbnails and so on. If you don’t see lines like these, ask your theme developer which image sizes are best.
In the example above, a slider image is required that is 1030 x 438 pixels. If an image is uploaded that is larger, the theme will create the image it needs by resizing it. It shrinks larger images. Shrinking mages introduces a little bit of fuzziness, so uploading the exact size of the largest image is best so no resizing is necessary for that image.
Suppose you upload an image that is smaller than required. Slider images must be 1030 x 438, but what if you upload images that are 800 x 400? In this case the theme might stretch the small images to fit, making them larger. If this happens, it introduces a lot of blurring in the slider images because they are the wrong size. It is vital that you upload images of the right size.
Sliders on home pages are one thing, images in posts are another and uploading the right size is important so that no resizing is necessary. If you don’t know what size to use, upload a larger image than you might need rather than a smaller one because there is less blurring with shrinking images to fit than with stretching them.
Most blurring occurs with images that are too small.
Image problems switching WordPress themes
Suppose you have been using a theme for some time and have uploaded lots of images. You have been diligent and uploaded images that are the right size and the theme has created the other image sizes that it needs from them. Everything looks good.
What happens if you then switch to a different theme? You might see one that you really like and install it on your blog or website, only to find that the images are blurred.
Each theme requires different size images and there is no standard. If your last theme required slider images that are 900 x 400 and the new theme requires slide images that are 1100 x 500, then there is a problem. Those 900 x 400 images may be stretched to 1100 x 500 and look blurred or they may mess up the slider and ruin the layout.
The same may happen with the featured image in posts or in-article images. The old theme’s images may be too big or too small for the new theme and may be stretched or shrunk to fit, making them blurred.
The new theme will automatically create the image sizes it needs from new images that are uploaded, but old images are unchanged and posts could have either have blurry images or ones that don’t fit the layout.
Images may look OK with the new theme, but it could be using very large images, like featured images, for thumbnails on certain pages. (A web browser can force images to be any size.) This makes the pages very slow because large images take longer to download than small ones. It is an even bigger problem with phones where screens are small, connections are slow and data usage may be limited.
What can you do? You might need to upload new images if the ones you have are too small and are being stretched to fit. Upload a replacement image, open a post and change the featured image or one used in the article.
WordPress plugins to resize images
There are plugins to address the image size problem and a free plugin called Regenerate Thumbnails is very popular with over 1 million installs. Go to Plugins > Add new and enter ‘regenerate thumbnails’ into the search box. Click the button to install it and activate it. Go to Tools > Regenerate Thumbnails in the sidebar to access it.
The default settings are fine and you just need to choose between regenerating all thumbnails or just those used for featured images. It is not a good idea to delete old thumbnails because they may be used in old posts.
I am using a test site, which is why I only have 34 and 9. You should not run a plugin like this on a live site without first backing up WordPress. It is unlikely that anything will go wrong, but back up anyway, just in case. Here are a couple of articles I wrote Create WordPress backups without a plugin and Don’t get caught without a backup of your WordPress website.
If you want more features, try the free reGenerate Thumbnails Advanced plugin from Shortpixel, which makes the image optimizer plugin.
One of the advanced features it has is the regeneration period and you can choose to process all images or only those uploaded in the last day, week, month, 3, 6 or 12 months. This might be useful for reducing the workload on your web server – your web host may not appreciate you processing 10k+ images in one go.
You can choose the images to process, avoid processing existing sizes that are correct, and set the JPEG quality for the new thumbnails.
This last setting is useful because you can choose between compression and quality in the usual way. A low number like 75 to 80 makes small files that download fast, but 90 to 95 makes higher quality images that take a little longer to download.
Stop making wrong size thumbnails
Some thumbnail image sizes are set by default in WordPress. To see them go to Settings > Media.
The sizes are probably wrong for your theme and so the thumbnails generated every time you upload an image to the media library are never used. They do no harm, but they inflate the size of the media library and backups take longer.
If your site never uses them, why create them? Set the width and height to zero to stop them being created. Changing these values does not change anything on the site. It only affects new images that are uploaded.
Zero the values, create a new post and if the images in it look fine, then keep these settings. If images in the new post look wrong, put the values back as they were and upload the image(s) used by this post again.
