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.

Liked This Article?

We have a lot more where that came from! Join 617,967 subscribers who stay ahead of the pack.
By entering your email, you agree to our Terms of Service and Privacy Policy.

About the Author

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

Share on

Share on facebook
Share on google
Share on twitter
Share on linkedin

Comments

61 Responses

  1. I love this. Can’t wait to try it. I hope it works with dynamic images brought in with advanced custom fields?? At the moment I’m processing images through Tiny png which is great.

  2. This is such a cool plugin, i am definatly going to try it out. I have been using WPSmush and EWWW for a long time. Any takes on if this would produce better results than these two plugins?

  3. Looks of good plugin. But If I am using free version and I cross the it’s limits then what happens? and for some reason Optimole fails to load or work will it show my original images in the page or will it display my page with no images to the visitor?

    Just got a few questions while reading your blog. I will be waiting for your reply to learn more about it.

    Thanks.

    1. Hello Syed,

      That is a good question. First we will notify you about the exceeding limit and kindly ask you to consider the upgrade. By this time you will have a few days to check if this worth it, in case that you will decide to keep using the free version and the limit will be exceeded we will return your original images. By no means we will display no images to your visitors.

      Let us know how this go.

  4. Thank you very much for this easy setup guide. I always struggled whether I should upgrade my SmushIt plan or optimize the images manually.

    Google PSI kept saying that my images are too large and that I could save a lot of bandwith for my visitors.

    Therefore I am glad that Optimole partnered up with you guys. Will keep you posted on my progress.

    Cheers,
    Thorsten

  5. You also get 5GB of viewing bandwidth (the volume of images your visitors can see)

    Soo.. what happends if you run out? Will pictures be replace by default placeholder pictures or what will happend?

    1. Hey Lars,

      Absolutely not, we will notify you about the exceeding limit and kindly ask you to consider the upgrade. By this time you will have a few days to check if this worth it, in case that you will decide to keep using the free version and the limit will be exceeded we will return your original images.

      I hope this answers your question.

      1. Thanks for the reply

        im currently using imagify, paid version to optimize around a 100 domains. im just wondering if i could simply use optimole, but this GB limit is a problem if it randomly screws over SEO on a few dozen random websites every month depending on traffic.
        i need something to be fixed permanently ie. reduction in pictures, and not have to worry its not actually reduced because of some arbitrary limit. after i use optimize once it takes very little to maintain all the domains in optimized state. regardless of traffic. im not sure your product is for me, or people like me in general.
        but thanks for giving us all more choices 🙂

    1. Hey,

      Not really, only first time when you install Optimole as we need to process the already generated file. After that moment, the mechanism would be set in place and whenever Elementor change the css file, we will add the optimized urls too.

      I hope this answers your question.

  6. Looks like an interesting solution but it would appear it will be costly in the long run.

    By the way, what if you already have other plugins that optimize images? Will installing Optimole override the work of the others? What will happen to the images that are already optimized?

    1. Hi there,

      Not really, we don’t touch your initial images. If the images are already optimized we will use them as sources when delivering the processed image. If we can do better we will serve our version, otherwise we will deliver the original version.

      I hope this makes sense to you.

  7. Nice! Any known issues / conflicts? I’m using Cloudflare and JetPack to help with some things like lazy loading etc.

  8. Seems like a quality plugin and I love that it is Elementor Friendly. My only concern would be since the images are loading from a CDN and different url, would that hurt the image SEO? Any thoughts?

  9. Hi there,

    So does this override my existing page-url’s? For every service I provide, I use different url’s with a specific keyword in it. If my url’s are going to be replaced by this plugin that will affect my SEO in a negative way.

    1. Hi Daniel,

      We don’t overwrite your page urls, only the image links. The SEO is not affected in any way, it’s the same thing as you use a regular CDN service. We already use on our blogs and is doing just fine.

      I hope this answers your question.

    1. Hello Dan,

      Yes, but is not required. By default our service is optimized with AWS Cloudfront so is the recommended way by us, but if you want to use other CDN service we dont force you. Just keep in mind that the CDN zone you will use needs to be used only for images, nothing else.

      I hope this makes sense.

  10. So in summary, the standard image compression plugins do not work in many cases because Elementor/+ other page builders access the images directly? (What are these cases, and what % of the time does this instance happen).

    Some of the article talks about the generic advantages of image compression- are there some databench comparing with the existing image compression plugins?
    It is pretty routine to see a 500% improvement with compression vs without compression.

    Will the images appear in Google Images as from the 1st party domain, or the CDN?

  11. Hi,
    Wanted to give it a try but see a problem with something.
    Using Astra theme bundled with Elementor. On the following url for instance, below is a full width bar for color varieties. Without Optimole when you hover over a color, the hover has transition 1s ease-in-out. With Optimole, the hover effect has no transition time.
    I couldn’t figure out the reason for this.

    Would very much appreciate if you could help me with this.

    url: https://www.mda.com.tr/urunler/shingle/dragon

    1. Hello there,

      Yes, that was a nice catch. I was able to find the root cause and we will deliver a fix in the next release, most certainly in about 2 days.

      Thanks a lot for reporting this.

  12. Hey Lars,

    I dont know if this helps, but you can use the same account on multiple sites and the account quota will be counted against the sum of all of them.

    I get your point, Optimole might be used from a different perspective as an all in one image optimization solution where beside optimizing the images we will also deliver them via CDN, which in your old workflow you still need it.

    Thanks a lot for your feedback !

  13. Here is another question. Is there a speed benefit of using the paid plan that uses CDN with 130 locations (Amazon Cloudfront) vs your custom CDN’s with 7 locations? If yes, noticable or not? Thanks.

    1. Hello Mehmet,

      This depends where most of the visitors are located, if you have a wordwide audience, most certainly you would need closer locations to each one of them. The closest the location is to the user is the faster the image will load for them.

      I hope this answers your question.

  14. I see, well.
    Elementor as a whole is really awesome and I’ve been enjoying my self made landing pages. I had no idea you guys had other amazing services as well.

    Great tool indeed, and I just like checking out the new stuffs they have in store.

    1. Hello,

      No, it should not as long as the images are available for us to process, it does not matter where they are located or if they use a CDN behind already.

      I hope this answers your q.

  15. It’s interesting. I run shortpixel on my websites, but I’m always open for new products, ideas or processes. I tried their testing tool on my own website and it’s results showed a -2% compression, meaning it was going to make my images bigger. Interesting. I’m not busting on it, but I’ll kick the can down the road with them before I try again.

    1. Hello Marc,

      The testing tool is not perfect, it has a bit of glitches which we are working to fix it but we have focused lately in improving the optimization service rather than this.

      Most certainly if you will see if Optimole brings you enough value by installing it on your site. The setup is pretty easy and works out of the box.

      I hope you will enjoy it.

    1. Hello Tim,

      We optimize the images once that someone views them on your site, is not something done offline. You might need to know that we optimize all the images differently for each browser, for instance for Chrome we deliver WebP format, for others the original format.

      Moreover, if you have an image container that has a different size on mobile/desktop we resize for each device differently.
      For instance, if the mobile version of an image container is 300×300 and on desktop 500×500, we deliver a 300×300 image size for mobile and a 500×500 version for the desktop users.

      Doing all of those in the Photoshop, i agree is possible but will require a large amount of work from your side.

      I hope this answers your question.

    1. Hello Liam,

      Yes, you should see the changes should in those tool too. Once that you have connected the plugin you are ready to start. Make sure to clear the caching, if you use any, once that you have connected the plugin.

      Enjoy it !

  16. So, if one of your 7 locations is close enough for my visitor base, there won’t be an added benefit of using CloudFront. So, speed of the CDN servers (if there is such a thing of course) isn’t an issue here.

  17. Great Optimizer indeed!
    Nevertheless I have a question : does Optimole adapt the optimization when users ZOOM on a picture? I mean that when zoomed images show more details (like when you zoom on Google Earth)? Or is this a different process all together…
    I am working on a site for a Museum displaying a lot of paintings, ans need this functionality.
    Thank you for your feed back.

  18. I have used smush so far and it does a great job in compressing images. Alternatively, compressor.io does a great job if you have a really large image. Should give this a try…

  19. The combination of Elementor and Optimole is outstanding and easy to use.
    Thanks for sharing detailed article it help me to optimize my lots of site designed on Elementor plugin.
    Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *

Want to learn how to build better websites?

Join 617,967 Elementors, and get a weekly roundup of our best skill-enhancing content.