Image optimization is one of the hot topics in WordPress from SEO perspective. Large images will slow down your site, especially on mobile devices using slow internet connection. You can use an image optimization plugin to compress the image by reducing its quality. Though this will increase the page loading speed, it will blur the images depending upon the compression level. Many times, you may want to showcase clear images like the product images in your WooCommerce store. You may also have a photography website and want to show high quality images. If you are struggling with blurry images in WordPress, here are the things you should look for fixing the issue.
Featured Image Vs Other Images
Before proceeding, you should understand the difference between featured images and other images. Your theme show the featured images uploaded in post editor in all archive pages like blog index, author archive, categories, tags, etc. Though it is not always necessary to show featured images in individual articles, they are important for product pages to showcase your product.
Normal images you upload in the post editor or through “Media > Add New” section will not appear on archive pages. They will be attached to individual posts and shown only inside the content. For example, the images you see in this article are normal images uploaded through Gutenberg editor.
So, you should first find which images are having problem on your site. It could be only featured images or only images in content or all images. Depending upon the situation you can try the following suggestions to fix the issue.
1. Regenerating Featured Image Thumbnails
If you have problem with featured images, then missing thumbnails could be the most possible reason. WordPress by default registers three image thumbnails under “Settings > Media” section. In addition, your theme may use different thumbnails for showing featured images in widgets, posts and archive pages.
Whenever you change the theme, make sure to use Regenerate Thumbnail plugin to create new thumbnails for previously uploaded featured images. Otherwise, new theme will not find the correct thumbnail size and resize the available featured images to fit in the layout. This will cause white space around the image if the old images are smaller or cause blurred effect if the old images are larger in size. Regenerating thumbnail images will fix this issue and allow the theme to show correct sizes.
Note: You can setup image cropping for WooCommerce under “Appearance > Customizer > WooCommerce > Product Images” section. When changing your theme, WooCommerce will automatically regenerate product images. You can also manually regenerate images by going to “WooCommerce > Status > Tools” section. Click on “Regenerate” button showing against “Regenerate shop thumbnails” option.
2. Using Adaptive Images
As mentioned, your theme should generate thumbnails or make use of default WordPress thumbnails to serve proper image sizes for different devices (this is for both featured and content images). For example, 900×360 pixels image on desktop should be resized to 300×130 pixels size on mobile devices or show 300×300 using default WordPress medium size image. However, many users disable default WordPress thumbnails by making the sizes to 0x0. In addition, theme authors also dynamically resize images on smaller devices without registering appropriate thumbnails in Theme Functions.
When you do not use proper image sizes, it will cause blurring problems on smaller devices and also Google PageSpeed Insights will show warnings like “Properly Resize Images”. If your theme does not work well or if you do not know how to register all required image sizes, then the best solution is to use a plugin for generating adaptive images. You can try plugins like Adaptive Images for WordPress, Shortpixel Adaptive Images or Flying Images on your testing site and select the one that works well for your live site.
There is also a manual solution available as explained in this article.
3. Retina and HD Display
If you have problem with retina devices, then it is necessary to serve high definition 2x image size to avoid blurring problems. Some commercial themes offer an option to upload normal and retina logos but not for all images. You can use WP Retina 2X plugin to generate retina images and serve only on high definition displays. This plugin also does other optimization like regenerating thumbnails and disable maximum image threshold (as explained in point 3).
4. Avoid Scaling of Images and Icons in Content
When you upload images in Gutenberg editor, it is possible to scale the images to custom size. You can use the block settings from the sidebar to change the size or scale the image. It is also possible to crop the image and change aspect ratio using the tool available in block options toolbar.
When you change size or scale image, WordPress will use a new image for the selected dimension instead of the original image you have uploaded. Let us say, you upload the image with 1200 x 800 pixels. If you select 50% scaling, you can see the page source that the rendered image will be 600×400 pixels with a new name like “image-600×400.jpg”.
To fix the blurry images, first make sure to avoid scaling and use the original image dimensions without changing. Next, click on the “Image Size” dropdown and select “Full Size” option. You will see thumbnail, medium and large options and the sizes come from “Media > Settings” as mentioned above. Selecting, full size will use the original dimensions of the image you uploaded instead of using different size from settings. This will help to fix blurry images showing in the content section.
If you are having problem with icons, make sure to use scalable SVG icons or Font Awesome. These scalable icons will not distort when you enlarge them and look elegant on all devices.
5. Check Maximum Image Dimensions
Most WordPress users worry about the maximum size of image upload which is generally restricted as 300 MB. You can go to “Media > Add New” and find the “Maximum upload file size” limit set for your site. However, what many users do not know is that WordPress will limit the maximum image dimensions as 2560×2560 pixels. This feature was introduced from version 5.3 and WordPress will scale down the dimensions if you upload larger images. As mentioned, scaling down the images will obviously reduce the quality and created blurry effect. If you do not want WordPress to reduce the dimensions, add the following code in your Theme Functions file.
add_filter( 'big_image_size_threshold', '__return_false' );There is also a simple plugin called Disable Big Image Threshold that will help you to do this if you do not want to manually edit functions.php file.
In addition to default WordPress issue, many optimization plugins will restrict the maximum image width. For example, you can restrict the width to 1920px or 2048px with SG Optimizer plugin. This can blur your images if the width exceeds the set limit. If you do not want to restrict the width, make sure to set the correct limit and upload smaller sizes or disable that option in your plugin.
6. Upload Clear Image Without Compression
Almost all image processing applications allow you to compress the image while saving. For example, we use Snagit for creating images which allows you to reduce the quality and scale down retina images. Though it helps to reduce the size, it will directly affect the quality and create blurriness even before you upload the images in WordPress.
Therefore, make sure not to compress too much when creating your images to avoid blurriness. Since only JPG images allows lossy compression, you can always go for PNG which uses lossless compression. In addition, PNG images also offer transparent background (JPG cannot use transparency), you can opt this format at the cost of bit larger size.
7. Avoid Multiple Lazy Loading
Lazy loading allows you to show images only when users reach that position on the page. This will help to fix image related problems in Google PageSpeed Insights as the images will not be loaded without scrolling. However, it can create problems resulting in blurred images. WordPress introduced native lazy loading of images from version 5.4. This will add loading = “lazy” attribute to all images in content, excerpts, avatars, comments and text widget. If you are using a third-party plugin, make sure the plugin disables default WordPress lazy loading. Otherwise, it will result in duplication and cause the images to load slowly showing the blurred placeholder image before loading the full image. You can use plugins like WP Rocket which will automatically disable default lazy loading and use custom setup.
Note: If your hosting server is slow (like on shared environments) or if the user has slow internet connection, the lazy loaded images will show a blurred image or a placeholder before showing the full image. This is not a WordPress problem as you may need to upgrade the server or use good internet connection to check images are loading properly.
8. Check Your Caching or Image Compression Plugin
If you are using caching plugin and noticing blurred images, then purge your cache to check if that fixes the problem. You may also need to purge the cache at server and CDN level if required. Image compression plugins like WP Smush offers lossless compression without affecting the quality. However, plugins like SG Optimizer offers lossy compression and allow you to automatically compress images when you upload them. Since SG Optimizer plugin also comes as default with WordPress installation in SiteGround, you may easily miss out the setting.
Therefore, check caching, image compression or any other performance optimization plugin you use and disable lossy compression to fix blurred images.
9. On the Fly Conversion and Compression
Hosting servers (like SiteGround) and CDN services (like Cloudflare) offers on the fly WebP image conversion service. However, there are two types of WebP conversions available – lossy and lossless. If you are using lossy WebP conversion, then the final images shown on the published site may not be looking like original images you uploaded on the site.
The best way is to disable WebP option and check by uploading a new image. If that looks good then you need to discuss with the service provider to understand the WebP conversion method used. You should go for lossless compression or choose different plugin that offers this method.
10. Check Your CDN
As mentioned, CDNs like Cloudflare offers WebP, image conversion and lazy loading. Make sure these features are not duplicated with your plugins and theme or the hosting setup. If you suspect the CDN, simply bypass the CDN and check if the original images are showing with good quality to confirm your CDN is causing the issue.
11. Blurred Images in Imported Demo Content
It is common for many WordPress users to import demo content from the purchased theme and start creating content from there. Authors selling theme in marketplaces like Envato are NOT authorized to include images in the demo content. Though you will see good quality images in author’s demo sites, you will only get blurred images (or placeholders) when you download theme files after purchase. If you find the images in imported content are blurred, make sure to check with the author instead of breaking your head on this.
Final Words
We use compressed images with restricted maximum dimensions as clarity of images is not an important factor for us. However, if you are using online store or photography website, then showing images without blurriness is important. You can try the above suggestions one by one to find the root cause and fix blurry image issue in your site. In most cases, using full size and not scaling down will help to fix the issue. If you want to use plugins, make sure to keep the original backup of your images and test the plugins with few images or in testing/staging site.
Leave a Reply
Your email is safe with us.