WordPress Image Optimizer for ELEMENTOR that Optimizes All Of Your Images

Hey there, and welcome to another episode
about WordPress and Elementor. My name is Robert, and in this video, I will
show you how to optimize images on your WordPress website with Optimole, especially when using the Elementor page builder. 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. 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, which
means that Optimole doesn’t alter anything in your media library. You get to keep your original images intact. On top of that, you can also lazy-load images
without jQuery, which is excellent for performance. This lazy loading mechanism works not only
with in-HTML images but also with backgrounds handled through CSS. You can also optimize GIFs by converting them
to video files like MP4 and WebM. Videos are smaller than animated GIFs in most
cases. Another great feature is that it will check
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. It will downgrade the image quality accordingly
when needed. On the other end, if the visitor’s browser
supports them, Optimole serves Retina and WebP images. Also, you can set exclusions, for example,
to not optimize images based on image extensions, names, or whole page URLs. Last but not least, you can watermark your
images for improved security – if you’ve had your images stolen by other sites. 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 a full autopilot mode. The installation process of Optimole is the
same as with any other WordPress plugin. You can get it either from optimole.com/wordpress
or just install it directly from your WordPress dashboard in Plugins, where you can search
for it, like so. 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 on the screen, you get to show
your optimized images to up to 5,000 visitors a month for free. You’ll get your API key via email, then
you just need to 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 on most WordPress sites. However, you might still want to take a look
at the Settings tab to make a few tweaks and customize your needs perfectly. You should enable image replacement. This one needs to stay enabled if you want
Optimole to do its job. Scale images & Lazy load is where you turn
on one of Optimole’s most useful features – serving optimized images based on the
visitor’s viewport and device. Leave it enabled for best results. For additional settings, switch the tab from
General to Advanced. You’ll find a couple of sub-tabs there,
offering the following settings: Enable network-based optimizations. Enable it when you want to serve more heavily
optimized images for visitors on slow internet connections. Enable Gif to Video conversion. Very useful if you like to publish a lot of
animated GIFs. Enable Retina images. This one makes sure that your images look
good on all screens, even the big ones. Enable lazy-load for background images. The name says it all. This is one of the unique features of Optimole,
perfect for pages created with Elementor. Exclusions are for those of you who don’t
want to optimize certain types of images, specific image files, or images on particular
pages within your site, then you can exclude them here. So cool, right? Compression level. This is where the fun starts! Let’s discuss this one in a bit more detail. Optimole comes with three settings for the
compression level. Depending on your site and the types of images
you publish, some of these settings might be better for you than others. I’d recommend switching through the Low,
Medium, and High settings to see what the impact is on your images. Optimole offers a quick preview as you toggle
through these settings. 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. Now let’s talk about the main thing you
came here for — how Optimole can work with Elementor. Here’s how to make sure that Optimole works
with your Elementor-powered site correctly. If you have Elementor already enabled on the
site, you’ll see this notice in the Possible Issues tab. What you need to do is to go to Elementor,
Tools on your dashboard and in the General tab, click Regenerate Files. 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! For the purpose of this video, I’ve built
myself a Landing Page in Elementor. As you can see, there’s a handful of images
there. Specifically, the images in the center, the
background image of the big title section, another background image behind this section
and the logos over here. We can ignore the social media icons as well
as all other icons on the page. 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 to view the source of the page and see the path of our
images. To do that, push F12 on your keyboard or right-click
and inspect your page. You should see something like this when checking
the path of your images. You’ll see that all images listed above
have been replaced with Optimole-origin URLs. 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


Add a Comment

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