Table of Contents
Hello everyone, in today’s blog we are going to discuss how to optimize your website images with Elementor and Optimal? Now you must be wondering why we need to optimize the website. The answer to this question is simple:- we need to optimize our website because sometimes images are not loading for the website so it does not help to improve the performance of our website. So today I am going to discuss Optimole which is an image optimization service and also explain to you how to integrate Optimole service with the Elementor.
So let’s start!
Today if you observe carefully, then optimizing an image is a very latest topic in WordPress. Also, you must have seen that the websites are not any smaller, the reason for this may be that the viewers like to view more visual contents, various types of WordPress themes, also they like to see various trends like the use of photo dependant design trends, etc. This shows that it is not ok to include only a few images on the web page, now the viewers are looking for the much more better options.
So in this blog, I am going to explain in detail one of the most important solutions as mentioned above i.e. Optimole which is an image optimization service that is developed for integrating with the Elementor without any fault which will provide you first-class image optimization abilities.
So let’s first discuss what an Optimole is and why it has given more preference than other available options?
Well! One more important point to remember here is that if you use Smush then you may have completely ignored it!
Now let’s look at some of the differences which help Optimole differ from other alternatives:
- It is united with Elementor completely. Optimole not only optimizes the contents which are present in your media library, but also with each and every image which is processed through Elementor, which may include: Backgrounds, or anything that is present in the custom CSS which Elementor outputs.
- The process of optimization takes place in the cloud i.e. nothing is being altered by Optimole which is present in your media library. The original images remain as it is.
- It uses a fast CDN for serving the images now if you have a free Optimole plan, then you will get seven edge locations which are present all over the world. And with a paid plan you will get entry to around 130+ locations all over the world and most important of all is you can also load images fast without taking the help of jQuery which will improve your performance.
- Optimole scans the devices and browser of the visitor’s and always tries to provide a custom optimized image to them. If the visitors have slow internet connections then also it will work for them. If required it lowers an image and at the same time if the browser of the viewers supports it then it serves Retina and WebP images.
- If you want to watermark your images for security reasons, then you can also do that using Optimole.
Again it includes a whole package of necessary features required for image optimizers.
Now let me explain you compression level controls, lossless optimization, tracking and monitoring your stats of compression and also a complete autopilot mode.
Let’s see how Optimole is setup with Elementor:
It is useful to note that the installation of Optimole is same as installing any other WordPress Plugin. You can install it directly through WordPress dashboard where Plugins option is present, click on it and then click Add new
Once the Plugin is activated, it asks for an API key registration. Because the processing of images by Optimole is performed in the cloud, this key is required to see how your site authentication takes place with the main Optimole service.
You can optimize around 1GB of images for free per month and also you can get 5GB of bandwidth for viewing the images to your visitors.
The API key is provided through email, once you receive it, copy and paste it in the activation box. Thus you will be able to see the main Optimole panel
Here the Optimole is set to work on autopilot and you can also see General Settings option for setting tweaks and customization.
Enable image replacement – Always keep this option enabled if you wish that the Optimole should do its job.
Admin bar status – If you want to view the bandwidth which is remaining, for the month.
JavaScript replacement and Lazy load – Using this option you can enable one of the most useful options of Optimole – which is serving optimized images based on the visitor’s viewport and also the device. You should always keep it ‘enabled’. Lazy loading is like a cherry on the top.
Resize large images – If the above setting i.e. JavaScript replacement is off then only this option is considered. It makes the highest picture frequency available to the visitors and if you have disabled JavaScript replacement option, then you will need to take care of this option.
Compression level- It is a very pleasant option. Let me explain it to you in some more detail:
The compression level in Optimole by default is always set to “Auto”. During its working, many users get good results if they are working with manual settings. If anyone of them is changed then, you will get a quick preview by Optimole which is based on random images from your media library
You can set this option to ‘High’ if you are using a large number of photographs on your site. If you need more new and heavily detailed images, then it is good to set it to ‘Medium’.
For dealing with watermarks the last option or tab is used.
This tab is like an investigational feature for the websites which are issuing a large volume of content and also wants them to be protected from the thefts.
Let’s see how would you come to know that Optimole is working?
As mentioned earlier, Optimole is compatible with Elementor which is the most important aspect of it and it also looks after all the image files which you are using on your website. The reason is the architecture of Optimole and the way it approaches the job of optimizing an image.
The Elementor works on your content presentation quickly.
While working in cloud Optimole stops the final images to be used on the web page by replacing them with the optimized versions of images.
Following are the point which ensures that the Optimole is working correctly with Elementor:
- Use the above process to install Optimole.
- Then navigate to Elementor from the wp-admin dashboard è go to the ‘Tools’ option. Regenerate CSS in the ‘General’ tab using the following steps:
- This process will replace standard image paths of Elementor with the paths which are going through Optimole.
- When that’s finished then you can say that Optimole is now fully ready to work with Elementor!
Let’s discuss how do we come to know that everything is working fine?
For ensuring that Optimole is working fine, you just need to look at the source of the page and check the path of images or check for src. In simple words, you must see something like the following information while checking the path of your images:
Now if see in more detail then you will find out that all the images which are listed will get replaced with Optimole-origin URLs which looks this:
USER_TOKEN.i.optimole.com
These are on-page images. And you must have been wondering what about the backgrounds? For this, we need to use chrome developer tools.
When you find the exact block with background and also view its CSS, then you will come to know that the images are also been replaced.
This indicates that the Optimole is correctly integrated with your Elementor-powered website.
Let’s look at the performance of Optimole when tested with Elementor:
Disclaimer: These are not my own calculations; I have just used these numbers of Pingdom which explains the load times when you enable the Optimole:
- load time: 898 ms
- page size: 1.1 MB
- images take up 49.22% of page size
And these are the results when you disable Optimole:
- load time: 2.7 s
- page size: 5.3 MB
- images take up 89.24% of page size
This shows that we have around 67% more better load time and the page looks around 5 times smaller.
Note:
Please don’t grant these tests as a final set in stone thing, but remember that the load times can fluctuate as per the network conditions and the important factor here is that you can truly save the page size.
The Optimole optimizations provide the following benefits:
- It helps for better user experience and SEO by loading pages faster.
- It also provides smaller pages that are considered good for SEO.
- It also means that, if you have smaller pages means you have small or less content that you can send to the visitor.
- It also provides better performances on devices like mobile and also for devices with low connection speed.
This optimization process will help those kinds of users who are very much dependant on Elementor and things like custom page build using custom backgrounds and also the images which are a part of page design.
I hope you find this information useful! Please feel free to comment on your suggestions or questions in the comment section below.
Visit- Hostripples
