If looking at your site images are ‘blurred’ the problem can be caused by few different factors. It’s important to make a premise to verify your are not referring to one advanced Uncode’s option named Asynchronous Adaptive Images (that first load low quality images to speed up the loading process) or the problem is simply with the uploaded image size quality. In the second part of the article you will find tips for troubleshooting.
Premise
You are using the Asynchronous Adaptive Images option
First, it is important to exclude that ‘blurry’ is not the effect generated by the Asynchronous Adaptive Images (ASYNC Adaptive Images). When activated this option all the images will be first loaded with a very low resolution to reduce dramatically the loading time of your page. Once the page is loaded the images will be replaced by the adaptive image version fitting the visitor device. You can read here more detailed informations and check examples of some sites that use Uncode and the ASYNC Adaptive Image, as you see in the loading phase, the images are grained and when the page is loaded the highest quality image is applied:
You are using the Asynchronous Loading Blur Effect
Second, it is important to exclude that ‘blurry’ is not an effect applied. Within the Adaptive Image settings there is an option called Asynchronous Loading Blur Effect, with this option the images are also blurred at the time the page is loaded in addition to the above mentioned Asynchronous Adaptive Images option.
You have uploaded small images
Third, it is important to exclude that the ‘blurry’ is not caused by low quality uploaded images. It’s important to verify that the images you are using are as large as the size you want them to be displayed. This seems a very simple thing, but some users complained of blur images when they wanted to show a small image in a much larger size. No themes or applications can restore resolution to your image.
Troubleshoot
JavaScript errors
The Asynchronous Adaptive Images feature is handled via JavaScript, if you have any Javascript errors that are probably caused by some non-well-coded extra plugins, playback of the code is interrupted and final high quality images can not be applied. Try then to disable all extra plugins to exclude is not a problem with extra codes and check again.
Cache plugins
If you use a page caching plugin such as Wp Rocket, Autoptimize, W3 Total Cache, WP Super Cache, WP Fastest Cache, etc... we remember that these plugins create a static version of web pages, so you can not use Adaptive Images (which are PHP dynamic based on the device that loads the page) but only Asynchronous Adaptive Images that apply the final resolution images via dynamic JavaScript. When using Asynchronous Adaptive Images combined with some cache plugins, please note that 'ai-uncode.min.js' , 'init.js' or 'init.min.js' should be kept in the header without any minify options:
Async Adaptive Images even is Off
In some cases it can happen that, even if you haven’t turned ON the Asynchronous Adaptive Images system it will still behave like the option is active. This depends from your hosting provider caching system. Some host provider (like WP Engine) uses very aggressive caching system which will cache also your session cookies.
Server Requirements, System Status or PHP version
Under the System Status (also known as Welcome Screen), you will find the system status information for your installation. if you have ‘red errors’ indicating problems are present, it is likely you are not in compliance with the Server Requirements for a modern WordPress installation.
Server Error 500 on low budget hosts
In very few cases the problem with blurred images is caused by the server and the infamous 500 Server Error This problem was unfortunately encountered with some 1&1 server installations (also known as one of the worst hosts for WordPress) and other few low budget hosts. In this case, we recommend disabling Adaptive Images option.
Comments
0 comments
Article is closed for comments.