Optimize Your Site Images With Elementor and Optimole
What Is Optimole and Why You Should Consider It Instead of the Alternatives?
No hard feelings. I won’t hold this against you!
There are, however, a few differences that make Optimole stand out:
- It is fully compatible with Elementor. This means that instead of optimizing just what’s in your media library, it also works with every image that’s processed via Elementor. This includes backgrounds, plus anything else that’s in the custom CSS that Elementor outputs.
- The optimization happens in the cloud. This means that Optimole doesn’t alter anything in your media library. You get to keep your original images intact.
- The images are served from a fast CDN. If you’re using the free Optimole plan, you get seven edge locations all over the globe. On the paid plans, you get access to 130+ locations. On top of that, you can also lazy-load images without jQuery, which is good for performance.
- Optimole checks the visitor’s device and browser and always delivers an image that’s tailor-optimized for them. This also works for visitors with slow internet connections. Optimole downgrades the image quality accordingly when needed. On the other end, if the visitor’s browser supports them, Optimole serves Retina and WebP images.
- You can watermark your images for improved security – if you’ve had your images stolen by other sites.
Apart from the above, Optimole also has the whole package of must-have features among image optimizers. I’m talking about things like compression level controls, lossy and lossless optimization, tracking and monitoring your compression stats, and, last but not least, a full autopilot mode.
I’m going to show you some performance tests and the sort of gains you can expect from Optimole (on an Elementor-built page) later in this post. But first:
How to Set up Optimole With Elementor
After activating the plugin, you’ll be asked to register for an API key. Since Optimole processes your images in the cloud, the API key is how you authenticate your site with the main Optimole service.
You’ll get your API key via email. Just copy and paste it into the activation box.
- Enable image replacement – this one needs to stay enabled if you want Optimole to do its job.
- Admin bar status – setting this to Show will give you an overview of the remaining bandwidth you have left for the month.
- Compression level – this is where the fun starts! Let’s discuss this one in a bit more detail:
By default, Optimole comes with the compression level set to Auto. While it does its job, most users are going to get better results by experimenting with manual settings. Once you change to one of them, Optimole will give you a quick preview based on a random image from your media library.
The last tab in the Optimole dashboard deals with watermarks.
How to Check If Optimole Is Working
Most image optimization plugins on the market work directly inside the media library of your WordPress site. However, since much of what Elementor does with your content presentation happens on the fly, those pre-made optimizations go out the window.
Optimole works in the cloud by intercepting the final images being used on the page and then replacing them with optimized versions.
Here’s how to make sure that Optimole works with your Elementor-powered site correctly:
- Install Optimole via the process described above.
- From the wp-admin go to Elementor → Tools. In the General tab, regenerate CSS. Like this:
With that done, Optimole is fully enabled to work with Elementor!
Here's How to Check If Everything Is Working Correctly
- the three images in the center – the hats
- a profile image – this one comes from Elementor’s testimonial block
- two background images – you can barely see them underneath the red overlay
- (the social media icons are actual icons, so we can ignore them)
Those are very different types of images from the perspective of an image optimization plugin.
All we have to do to ensure that Optimole is doing its job correctly is view the source of the page and see the path (or src) of our images.
In other words, you should see something like this when checking the path of your images:
So those are on-page images, but what about the backgrounds? Since the CSS for that is generated on Elementor’s end, we need to fire up Chrome developer tools to investigate.
Once you find the block with the background and view its CSS, you can see that the image has been replaced as well:
On the frontend, of course, it’s business as usual. All your images should look just as good as ever.
Optimole Performance Tested With Elementor
Load speed is an important UX and SEO factor overall. So any upgrade you can implement there will benefit you in more ways than one. Better speed = more engagement = more happy readers = more sales = more revenue.
Might seem far-fetched at first, and like a huge oversimplification, but it does make a lot of sense. Chasing speed improvements is just worth it in general, and the size of your images is simply the lowest-hanging fruit.
Images tend to take up more than half the size of your average web page (up to even 90%), so finding a method to reduce their impact can go a long way.
First off, as I said, I’m testing the About page I built a minute ago. Here’s what Pingdom says about the load times when I have Optimole enabled:
- load time: 898 ms
- page size: 1.1 MB
- images take up 49.22% of page size
And here are the results when I disable Optimole:
- load time: 2.7 s
- page size: 5.3 MB
- images take up 89.24% of page size
We have a ~67% better load time and a page that’s nearly 5x smaller.
Granted, those are just a couple of tests, and you shouldn’t treat them as any set-in-stone thing. Sure, the load times can fluctuate based on network conditions, but the savings in page size are the true winner here.
Those optimizations bring a number of benefits:
- faster loading pages are better for UX and SEO
- smaller pages are reportedly better for SEO as well
- smaller pages mean less content you have to send to the visitor
- you get better performance on mobile devices and for low connection speeds
You get the idea. But that’s not all:
The type of user who will benefit from those optimizations, even more, are people who rely on Elementor quite heavily for things like custom page builds with custom backgrounds and in-design images (images that are part of the page design). Optimole will process all of those for you.
I hope I’ve got you on board! Feel free to check out Optimole, do some tests of your own, and see what it can do for you.