April 3, 2019

Optimole

Optimize Your Site Images With Elementor and Optimole

 
Image optimization is one of the key factors when improving your site performance. In this article, we will give you an in-depth look at Optimole – an image optimization service, and show how to integrate it with Elementor.
Image optimization is a very trendy topic in the WordPress space of today. Let’s face it; websites are not getting any smaller! A lot of reasons for that: audiences are ever more eager to consume visual content, WordPress themes are expanding, design trends are getting more photo-dependent by the day. Clearly, using “fewer images” isn’t the solution; what we need is better ones.
This post is an in-depth look at one of those solutions. Optimole is an image optimization service that’s built to integrate with Elementor flawlessly while giving you top-of-the-line image optimization capabilities (up to 80% savings).

What Is Optimole and Why You Should Consider It Instead of the Alternatives?

Okay, so if you look at the label, Optimole might look like your garden variety image optimizer for WordPress. So, if you’re already using Smush or Imagify, you would probably ignore it completely.
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

The installation process of Optimole is the same as with any other WordPress plugin. You can get it either from here or just install it directly from your WordPress dashboard in Plugins → Add New (type in “Optimole”).
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.
As you can see in the screenshot above, you get to optimize 1GB worth of images a month for free. You also get 5GB of viewing bandwidth (the volume of images your visitors can see).
You’ll get your API key via email. Just copy and paste it into the activation box.
 
After that, you’ll see the main Optimole panel.
 
At this stage, Optimole is already set to work on autopilot. However, you might still want to take a look at the General Settings tab to make a few tweaks and customize your needs perfectly.
 
  • 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.
  • Javascript replacement & Lazy load – while this might sound a bit cryptic at first, this option is where you enable one of Optimole’s most useful features – serving optimized images based on the visitor’s viewport and device. Leave it enabled for best results. Lazy loading is just the icing on the cake.
  • Resize large images – this setting is only taken into account if the Javascript replacement is off (the setting above). In which case, this is the maximum image dimensions that can be served to the visitor. Again, this is only something you have to worry about if you’ve disabled the Javascript replacement.
  • 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.
 

If you use a lot of photographs on your site, you can set this to High. For more nuanced and detail-heavy images, the Medium setting might be better.
The last tab in the Optimole dashboard deals with watermarks.
 
This is an experimental feature that can be very useful on websites publishing a large volume of content that want to protect their visuals from theft. If that’s you, check this section out! I’m not going to focus on it too much here since this guide is more about how Optimole can work with Elementor. Speaking of which:

How to Check If Optimole Is Working

Optimole’s superpower is that it integrates with Elementor and takes care of all the image files that are in use on your site. This is due to Optimole’s architecture and how it approaches the task of image optimization in the first place.
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:

  1. Install Optimole via the process described above.
  2. From the wp-admin go to Elementor → Tools. In the General tab, regenerate CSS. Like this:

 

Among other things, this will replace Elementor’s standard image paths with those going through Optimole.
With that done, Optimole is fully enabled to work with Elementor!

Here's How to Check If Everything Is Working Correctly

For the purpose of this demo, I’ve built myself an About page in Elementor. That page actually comes from my other tutorial on the blog.
As you can see, there’s a handful of images there. Specifically:

  • 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:
 

If you do a bit more digging, you’ll see that all images listed above have been replaced with Optimole-origin URLs. Those URLs tend to look like this: USER_TOKEN.i.optimole.com
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:
 
With that, you can now be confident that Optimole has been integrated with your Elementor-powered website correctly!
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

Even though I’m going to show you some raw numbers for load times with and without Optimole enabled on that About page of mine, those numbers are not entirely the point in themselves.
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.
With that said, here are the results of my tests:
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.

About the Author

karol
Karol K. (@carlosinho) is a blogger and writer, published author, and founder of NewInternetOrder.com

Please Register or Login to post comments

Register | Lost your password?
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram