Recently I came into an issue where the images were appearing blurry on the staging site but not production. It was super frustrating
Check Image Sizes and Quality
An image will appear blurry if it’s too small for the space it’s displayed in. While there’s no single recommended image size, you can refer to our image optimization guide to learn how to ensure an image is large enough to display in good quality on your website without being too large that it slows down your site’s speed.
If your images appear blurry, start by uploading a high-quality, larger image file and check if it looks better.
If uploading a larger, clearer image still doesn’t improve the appearance of the images on the live site, it might be one of the other issues listed below.
Check Your Internet Speed
If your internet connection is extremely slow, the images could be downloaded at a lower quality, causing them to appear blurry. Try loading your website with a different, faster connection to check if the images look better that way.
Try deactivating Imagify or Jetpack
Imagify and Jetpack both change the way images are loaded and depending on your settings they may load the lowest resolution image first, which will be the thumbnail image.
As a first step I would deactivate these and see if the image is clearer, or go into the settings and reduce the level of compression.
Theme Changes
We take measures to provide a seamless experience with your images when switching from one WordPress.com theme to another. However, some third-party themes don’t have similar measures, which can affect your images when you switch to or from these themes.
If you’ve recently switched your site’s theme and noticed that all images uploaded on the new theme look good, but the older ones uploaded on the previous theme appear blurry, you can re-upload the older images on the new theme to get them to display correctly.
If you’re working on a plugin-enabled site, you can regenerate the blurry thumbnails using an image regeneration plugin or, if you are a developer, using WP-CLI. With these methods, you don’t have to manually upload all your older images again.
Plugin Conflicts
Occasionally, installing a new plugin on your site might cause your images to appear blurry. Updating an existing plugin can also introduce conflicts that may affect your images.
Try deactivating the plugin to see if the image quality improves. You may also need to restore a backup from before you installed the plugin to return the images to their previous state.
For detailed instructions on troubleshooting plugin conflicts, refer to our guide on solving problems with plugins.
Check server config
If your staging site is using a different version of php or using Nginx instead of apache this could be causing the issue. It’s not likely, but it’s possible.
Watch out for HTML rules that display images in sizes
When nothing else works, check the rules of the markup that are resizing the images. In this client’s case, they had a rule after the image src which said -300×150 which is displaying the image in a smaller size. By removing this from the file path, the image is displaying correctly.
Jane James is the founder of Alpha Omega Digital, and is a WordPress web developer based in Melbourne, Australia but also services clients from Sydney, Brisbane, Newcastle, Perth, Adelaide, Darwin and Hobart. Have a project in mind? Contact me here.