{"id":23443,"date":"2019-03-13T13:03:03","date_gmt":"2019-03-13T13:03:03","guid":{"rendered":"https:\/\/elementor.com\/blog\/?p=23443"},"modified":"2019-03-13T13:03:03","modified_gmt":"2019-03-13T13:03:03","slug":"optimole","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/optimole\/","title":{"rendered":"Optimize Your Site Images With Elementor and Optimole"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"23443\" class=\"elementor elementor-23443\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-ccfbd16 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"ccfbd16\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-73fdf2c\" data-id=\"73fdf2c\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-1d78e74 elementor-widget elementor-widget-text-editor\" data-id=\"1d78e74\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Image optimization is a very trendy topic in the WordPress space of today. Let&#8217;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,\u00a0<a href=\"https:\/\/elementor.com\/blog\/image-design\/\">design trends are getting more photo-dependent<\/a> by the day. Clearly, using &#8220;fewer images&#8221; isn&#8217;t the solution; what we need is better ones.<\/p><p>This post is an in-depth look at one of those solutions.\u00a0<a href=\"https:\/\/optimole.com\/\">Optimole<\/a> is an image optimization service that&#8217;s built to integrate with Elementor flawlessly while giving you top-of-the-line image optimization capabilities (up to 80% savings).<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-29358ce elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"29358ce\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-ffef13d\" data-id=\"ffef13d\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-c100042 elementor-widget elementor-widget-heading\" data-id=\"c100042\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">What Is Optimole and Why You Should Consider It Instead of the Alternatives?<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d7d040e elementor-widget elementor-widget-text-editor\" data-id=\"d7d040e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Okay, so if you look at the label, Optimole might look like your garden variety image optimizer for WordPress. So, if you&#8217;re already using Smush or Imagify, you would probably ignore it completely.<\/p><p>No hard feelings. I won&#8217;t hold this against you!<\/p><p>There are, however, a few differences that make Optimole stand out:<\/p><ul><li>It is <strong>fully compatible with Elementor<\/strong>. This means that instead of optimizing just what&#8217;s in your media library, it also works with every image that&#8217;s processed via Elementor. This includes backgrounds, plus anything else that&#8217;s in the custom CSS that Elementor outputs.<\/li><li>The <strong>optimization happens in the cloud<\/strong>. This means that Optimole doesn&#8217;t alter anything in your media library. You get to keep your original images intact.<\/li><li>The images are <strong>served from a fast CDN.<\/strong> If you&#8217;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.<\/li><li>You can <strong>lazy-load images <\/strong><strong><em>without<\/em><\/strong><strong> jQuery<\/strong>, which is good for performance. This lazy loading mechanism works not only with in-HTML images but also backgrounds handled through CSS.<\/li><li>You can also <strong>optimize GIFs<\/strong> by converting them to video files (MP4 and WebM). Videos are smaller than animated GIFs in most cases.<\/li><li>Optimole <strong>checks the visitor&#8217;s device and browser<\/strong> and always delivers an image that&#8217;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&#8217;s browser supports them, Optimole serves Retina and WebP images.<\/li><li>You can <strong>set exclusions<\/strong> to not optimize images based on image extensions, names, or whole page URLs.<\/li><li>You can <strong>watermark your images<\/strong> (beta) for improved security \u2013 if you&#8217;ve had your images stolen by other sites.<\/li><\/ul><p>Apart from the above, Optimole also has the whole package of must-have features among image optimizers. I&#8217;m talking about things like compression level controls, lossy and lossless optimization, tracking and monitoring your compression stats, and, last but not least, <strong>a full autopilot mode.<\/strong><\/p><p><em>I&#8217;m going to show you some performance tests and the sort of\u00a0<\/em><a href=\"https:\/\/themeisle.com\/blog\/wordpress-image-optimizer-plugins-compared\/\"><em>gains you can expect<\/em><\/a><em> from Optimole (on an Elementor-built page) later in this post. But first:<\/em><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-0174392 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"0174392\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-650733d\" data-id=\"650733d\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-9cc82ff elementor-widget elementor-widget-heading\" data-id=\"9cc82ff\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">How to Set up Optimole With Elementor\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-49bcb44 elementor-widget elementor-widget-text-editor\" data-id=\"49bcb44\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The installation process of Optimole is the same as with any other WordPress plugin. You can get it either\u00a0<a href=\"https:\/\/optimole.com\/wordpress\/\">from here<\/a> or just install it directly from your WordPress dashboard in <em>Plugins \u2192 Add New<\/em> (type in &#8220;Optimole&#8221;).<\/p><p>After activating the plugin, you&#8217;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.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4aea5e6 elementor-widget elementor-widget-image\" data-id=\"4aea5e6\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/optimole-connect-r4q755ghza2b9b2h4mopigiwuoqqq5rtxjxejx39zg.png\" title=\"optimole-connect\" alt=\"optimole-connect\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5829be0 elementor-widget elementor-widget-text-editor\" data-id=\"5829be0\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>As you can see in the screenshot above, you get to <strong>show your optimized images to up to 5,000 visitors a month for free<\/strong>.<\/p><p>You&#8217;ll get your API key via email. Just copy and paste it into the activation box.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-27ea1b6 elementor-widget elementor-widget-image\" data-id=\"27ea1b6\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/optimole-activation-r4q77tc1cdpk5j77ks4nksbxfzm6jacgaqgxi5540u.png\" title=\"optimole-activation\" alt=\"optimole-activation\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-72a0026 elementor-widget elementor-widget-text-editor\" data-id=\"72a0026\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>After that, you&#8217;ll see the main Optimole panel.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-eea3092 elementor-widget elementor-widget-image\" data-id=\"eea3092\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/optimole-dash-r4q6yt1pujdmw2a96dyd6k5wi20jrpl225eexohz04.png\" title=\"optimole-dash\" alt=\"optimole-dash\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a0b94a7 elementor-widget elementor-widget-text-editor\" data-id=\"a0b94a7\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>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<em> Settings<\/em> tab to make a few tweaks and customize your needs perfectly.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cfa7082 elementor-widget elementor-widget-image\" data-id=\"cfa7082\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/optimole-settings-1-r4q6z67gi7vnelr51jn55guctg7orh1aryj7njyg0g.png\" title=\"optimole-settings\" alt=\"optimole-settings\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9653086 elementor-widget elementor-widget-text-editor\" data-id=\"9653086\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ul><li><em>Enable image replacement<\/em> \u2013 this one needs to stay <em>enabled<\/em> if you want Optimole to do its job.<\/li><li><em>Scale images &amp; Lazy load<\/em> \u2013 this option is where you turn on one of Optimole&#8217;s most useful features \u2013 serving optimized images based on the visitor&#8217;s viewport and device. Leave it <em>enabled<\/em> for best results. Lazy loading is the icing on the cake.<\/li><\/ul><p>For additional settings, switch the tab from <em>General<\/em> to <em>Advanced<\/em>.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3aaf72a elementor-widget elementor-widget-image\" data-id=\"3aaf72a\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/optimole-settings-advanced-r4q75sygq4yhbk4cbeudqslfpbix2ld4cs8jju4gs6.png\" title=\"optimole-settings-advanced\" alt=\"optimole-settings-advanced\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-88b2ee0 elementor-widget elementor-widget-text-editor\" data-id=\"88b2ee0\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>You&#8217;ll find a couple of sub-tabs there, offering the following settings:<\/p><ul><li><em>Enable network based optimizations<\/em> \u2013 enable when you want to serve more heavily optimized images for visitors on slow internet connections.<\/li><li><em>Enable Gif to Video conversion<\/em> \u2013 very useful if you like to publish a lot of animated GIFs.<\/li><li><em>Enable Retina images<\/em> \u2013 makes sure that your images look good on all screens, even the big ones.<\/li><li><em>Enable lazyload for background images<\/em> \u2013 this is one of the most unique features of Optimole&#8217;s; the name says it all.<\/li><li><em>Exclusions<\/em> \u2013 if you don&#8217;t want to optimize certain types of images, specific image files, or images on specific pages within your site, then you can exclude them here:<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f581c30 elementor-widget elementor-widget-image\" data-id=\"f581c30\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/optimole-exclusions-r4q76ic3unx8113h77tb446vqq1tuf5vg9unib2s4i.png\" title=\"optimole-exclusions\" alt=\"optimole-exclusions\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7e95316 elementor-widget elementor-widget-text-editor\" data-id=\"7e95316\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ul><li><em>Compression level<\/em> \u2013 this is where the fun starts! Let&#8217;s discuss this one in a bit more detail:<\/li><\/ul><p>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&#8217;d recommend switching through the <em>Low<\/em>, <em>Medium<\/em>, and <em>High<\/em> settings to see what the impact is on your images. Optimole offers a quick preview as you toggle through these settings.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d1e3bcb elementor-widget elementor-widget-image\" data-id=\"d1e3bcb\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/optimole-compression-level-r4q6xeaflhg5h4bzes0ifwz0f8yq81zjv6670ql87y.jpg\" title=\"optimole-compression-level\" alt=\"optimole-compression-level\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4d031a5 elementor-widget elementor-widget-text-editor\" data-id=\"4d031a5\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>If you use a lot of photographs on your site, you can set this to <em>High<\/em>. For more nuanced and detail-heavy images, the <em>Medium<\/em> setting might be better.<\/p><p>Now let&#8217;s talk about the main thing you came here for \u2014 how Optimole can work with Elementor.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-5d9f83c elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"5d9f83c\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-6f4ada5\" data-id=\"6f4ada5\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-1722f84 elementor-widget elementor-widget-heading\" data-id=\"1722f84\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">How to Check If Optimole Is Working<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c7a8cb0 elementor-widget elementor-widget-text-editor\" data-id=\"c7a8cb0\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Optimole&#8217;s superpower is that it <b>integrates with Elementor and takes care of all the image files that are in use on your site<\/b>. This is due to Optimole&#8217;s architecture and how it approaches the task of image optimization in the first place.<\/p><p>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.<\/p><p>Optimole works in the cloud by intercepting the final images being used on the page and then replacing them with optimized versions.<\/p><p>Here&#8217;s how to make sure that Optimole works with your Elementor-powered site correctly:<\/p><ol><li>Install Optimole via the process described above.<\/li><li>If you have Elementor already enabled on the site, you&#8217;ll see this notice:<\/li><\/ol>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-91f3878 elementor-widget elementor-widget-image\" data-id=\"91f3878\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/optimole-Elementor-issue-r4q72p3o4upcxymtgkhs02tl0gu8mm129elrfwq9re.png\" title=\"optimole-Elementor-issue\" alt=\"optimole-Elementor-issue\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-09ac98f elementor-widget elementor-widget-text-editor\" data-id=\"09ac98f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>3. From the wp-admin go to <em>Elementor \u2192 Tools<\/em>. In the <em>General<\/em> tab, regenerate CSS. Like this:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-db8e46b elementor-widget elementor-widget-image\" data-id=\"db8e46b\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/optimole-regenerate-css-r4q6zjd75wdnx580wpbx4dit4uetr8hjhro0dfew54.png\" title=\"optimole-regenerate-css\" alt=\"optimole-regenerate-css\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1f3b9ef elementor-widget elementor-widget-text-editor\" data-id=\"1f3b9ef\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Among other things, this will replace Elementor&#8217;s standard image paths with those going through Optimole.<\/p><p>With that done, Optimole is fully enabled to work with Elementor!<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-320c0cb elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"320c0cb\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-3273b9f\" data-id=\"3273b9f\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-b24a176 elementor-widget elementor-widget-heading\" data-id=\"b24a176\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Here's How to Check If Everything Is Working Correctly<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-24ad4f8 elementor-widget elementor-widget-text-editor\" data-id=\"24ad4f8\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>For the purpose of this demo, I&#8217;ve built myself an About page in Elementor. That page actually comes from my\u00a0other tutorial on the blog.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-be0aeb1 elementor-widget elementor-widget-image\" data-id=\"be0aeb1\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"490\" height=\"1024\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=490,h=1024\/blog\/wp-content\/uploads\/2019\/03\/about-490x1024.jpg\" class=\"attachment-large size-large wp-image-23492\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=490\/blog\/wp-content\/uploads\/2019\/03\/about-490x1024.jpg 490w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=143\/blog\/wp-content\/uploads\/2019\/03\/about-143x300.jpg 143w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2019\/03\/about-768x1606.jpg 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=956\/blog\/wp-content\/uploads\/2019\/03\/about.jpg 956w\" sizes=\"(max-width: 490px) 100vw, 490px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2aaf886 elementor-widget elementor-widget-text-editor\" data-id=\"2aaf886\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>As you can see, there&#8217;s a handful of images there. Specifically:<\/p><ul><li>the three images in the center &#8211; the hats<\/li><li>a profile image &#8211; this one comes from Elementor&#8217;s testimonial block<\/li><li>two background images &#8211; you can barely see them underneath the red overlay<\/li><li>(the social media icons are actual icons, so we can ignore them)<\/li><\/ul><p>Those are very different types of images from the perspective of an image optimization plugin.<\/p><p>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.<\/p><p>In other words, you should see something like this when checking the path of your images:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-29e8b67 elementor-widget elementor-widget-image\" data-id=\"29e8b67\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/path-to-img-r4q781sl1w1520ux7dsap872sgghgka1bwcatmsizi.png\" title=\"path-to-img\" alt=\"path-to-img\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c8cf196 elementor-widget elementor-widget-text-editor\" data-id=\"c8cf196\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>If you do a bit more digging, you&#8217;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<\/p><p>So those are on-page images, but what about the backgrounds? Since the CSS for that is generated on Elementor&#8217;s end, we need to fire up Chrome developer tools to investigate.<\/p><p>Once you find the block with the background and view its CSS, you can see that the image has been replaced as well:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a62a07d elementor-widget elementor-widget-image\" data-id=\"a62a07d\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/path-to-bg-r4q70vayug7ad9ae4s1w5jfbfhujnsruocxrujfsv4.png\" title=\"path-to-bg\" alt=\"path-to-bg\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a32e4e1 elementor-widget elementor-widget-text-editor\" data-id=\"a32e4e1\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>With that, you can now be confident that Optimole has been integrated with your Elementor-powered website correctly!<\/p><p>On the frontend, of course, it&#8217;s business as usual. All your images should look just as good as ever.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-239dbc4 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"239dbc4\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-29f07c4\" data-id=\"29f07c4\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-333d0a7 elementor-widget elementor-widget-heading\" data-id=\"333d0a7\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Optimole Performance Tested With Elementor<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1f9e318 elementor-widget elementor-widget-text-editor\" data-id=\"1f9e318\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Even though I&#8217;m going to show you some raw numbers for load times <em>with<\/em> and <em>without<\/em> Optimole enabled on that About page of mine, those numbers are not entirely the point in themselves.<\/p><p>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.<\/p><p>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.<\/p><p>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.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-be858db elementor-widget elementor-widget-image\" data-id=\"be858db\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/images-percent-r4q716l14gmq8ku0awxezgkuk4ay860mpwrlluz2iq.png\" title=\"images-percent\" alt=\"images-percent\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-88d9b11 elementor-widget elementor-widget-text-editor\" data-id=\"88d9b11\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>With that said, here are the results of my tests:<\/p><p>First off, as I said, I&#8217;m testing the About page I built a minute ago. Here&#8217;s what Pingdom says about the load times when I have Optimole enabled:<\/p><ul><li>load time: 898 ms<\/li><li>page size: 1.1 MB<\/li><li>images take up 49.22% of page size<\/li><\/ul><p>And here are the results when I disable Optimole:<\/p><ul><li>load time: 2.7 s<\/li><li>page size: 5.3 MB<\/li><li>images take up 89.24% of page size<\/li><\/ul><p><strong>We have a ~67% better load time and a page that&#8217;s nearly 5x smaller.<\/strong><\/p><p>Granted, those are just a couple of tests, and you shouldn&#8217;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.<\/p><p>Those optimizations bring a number of benefits:<\/p><ul><li><a href=\"\/help\/speed-up-a-slow-site\/\">faster loading pages<\/a> are better for UX and SEO<\/li><li>smaller pages are reportedly better for SEO as well<\/li><li>smaller pages mean less content you have to send to the visitor<\/li><li>you get better performance on mobile devices and for low connection speeds<\/li><\/ul><p>You get the idea. But that&#8217;s not all:<\/p><p>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.<\/p><p><strong>I hope I&#8217;ve got you on board! Feel free to\u00a0<\/strong><a href=\"https:\/\/optimole.com\/\"><strong>check out Optimole<\/strong><\/a><strong>, do some tests of your own, and see what it can do for you.<\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>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 \u2013 an image optimization service, and show how to integrate it with Elementor.<\/p>\n","protected":false},"author":25900,"featured_media":23527,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[45],"tags":[79],"marketing_persona":[],"marketing_intent":[],"class_list":["post-23443","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development","tag-build"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Optimize Your Site Images With Elementor and Optimole<\/title>\n<meta name=\"description\" content=\"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 \u2013 an image optimization service, and show how to integrate it with Elementor.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/blog\/optimole\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Optimize Your Site Images With Elementor and Optimole\" \/>\n<meta property=\"og:description\" content=\"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 \u2013 an image optimization service, and show how to integrate it with Elementor.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/optimole\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/elemntor\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-03-13T13:03:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/oovolzcf.elementor.cloud\/wp-content\/uploads\/2019\/03\/Cover-2019.03.12-Optimole-main-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Karol K\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@elemntor\" \/>\n<meta name=\"twitter:site\" content=\"@elemntor\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Karol K\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/blog\/optimole\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/optimole\/\"},\"author\":{\"name\":\"Karol K\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/e59a22e4b00a8b9b2d5f69aca1fdcb65\"},\"headline\":\"Optimize Your Site Images With Elementor and Optimole\",\"datePublished\":\"2019-03-13T13:03:03+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/optimole\/\"},\"wordCount\":1860,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/optimole\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/03\/Cover-2019.03.12-Optimole-main-1.png\",\"keywords\":[\"Build\"],\"articleSection\":[\"Development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/optimole\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/optimole\/\",\"url\":\"https:\/\/elementor.com\/blog\/optimole\/\",\"name\":\"Optimize Your Site Images With Elementor and Optimole\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/optimole\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/optimole\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/03\/Cover-2019.03.12-Optimole-main-1.png\",\"datePublished\":\"2019-03-13T13:03:03+00:00\",\"description\":\"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 \u2013 an image optimization service, and show how to integrate it with Elementor.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/optimole\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/optimole\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/optimole\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/03\/Cover-2019.03.12-Optimole-main-1.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/03\/Cover-2019.03.12-Optimole-main-1.png\",\"width\":1200,\"height\":628},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/blog\/optimole\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Development\",\"item\":\"https:\/\/elementor.com\/blog\/category\/development\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Optimize Your Site Images With Elementor and Optimole\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/blog\/#website\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"name\":\"Elementor\",\"description\":\"Website Builder for WordPress\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/blog\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/elemntor\/\",\"https:\/\/x.com\/elemntor\",\"https:\/\/www.instagram.com\/elementor\/\",\"https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1\",\"https:\/\/en.wikipedia.org\/wiki\/Elementor\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/e59a22e4b00a8b9b2d5f69aca1fdcb65\",\"name\":\"Karol K\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/5cdb0c608f3016845aa2dea402ddea7db8831648bf1c4e1f65da28e20d261f42?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/5cdb0c608f3016845aa2dea402ddea7db8831648bf1c4e1f65da28e20d261f42?s=96&d=mm&r=g\",\"caption\":\"Karol K\"},\"description\":\"Karol K. (@carlosinho) is a blogger and writer, published author, and founder of NewInternetOrder.com\",\"url\":\"https:\/\/elementor.com\/blog\/author\/karol\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Optimize Your Site Images With Elementor and Optimole","description":"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 \u2013 an image optimization service, and show how to integrate it with Elementor.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/blog\/optimole\/","og_locale":"en_US","og_type":"article","og_title":"Optimize Your Site Images With Elementor and Optimole","og_description":"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 \u2013 an image optimization service, and show how to integrate it with Elementor.","og_url":"https:\/\/elementor.com\/blog\/optimole\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2019-03-13T13:03:03+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/oovolzcf.elementor.cloud\/wp-content\/uploads\/2019\/03\/Cover-2019.03.12-Optimole-main-1.png","type":"image\/png"}],"author":"Karol K","twitter_card":"summary_large_image","twitter_creator":"@elemntor","twitter_site":"@elemntor","twitter_misc":{"Written by":"Karol K"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/optimole\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/optimole\/"},"author":{"name":"Karol K","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/e59a22e4b00a8b9b2d5f69aca1fdcb65"},"headline":"Optimize Your Site Images With Elementor and Optimole","datePublished":"2019-03-13T13:03:03+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/optimole\/"},"wordCount":1860,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/optimole\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/03\/Cover-2019.03.12-Optimole-main-1.png","keywords":["Build"],"articleSection":["Development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/optimole\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/optimole\/","url":"https:\/\/elementor.com\/blog\/optimole\/","name":"Optimize Your Site Images With Elementor and Optimole","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/optimole\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/optimole\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/03\/Cover-2019.03.12-Optimole-main-1.png","datePublished":"2019-03-13T13:03:03+00:00","description":"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 \u2013 an image optimization service, and show how to integrate it with Elementor.","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/optimole\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/optimole\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/optimole\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/03\/Cover-2019.03.12-Optimole-main-1.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/03\/Cover-2019.03.12-Optimole-main-1.png","width":1200,"height":628},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/optimole\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Development","item":"https:\/\/elementor.com\/blog\/category\/development\/"},{"@type":"ListItem","position":3,"name":"Optimize Your Site Images With Elementor and Optimole"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/blog\/#website","url":"https:\/\/elementor.com\/blog\/","name":"Elementor","description":"Website Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/blog\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/elemntor\/","https:\/\/x.com\/elemntor","https:\/\/www.instagram.com\/elementor\/","https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1","https:\/\/en.wikipedia.org\/wiki\/Elementor"]},{"@type":"Person","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/e59a22e4b00a8b9b2d5f69aca1fdcb65","name":"Karol K","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/5cdb0c608f3016845aa2dea402ddea7db8831648bf1c4e1f65da28e20d261f42?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5cdb0c608f3016845aa2dea402ddea7db8831648bf1c4e1f65da28e20d261f42?s=96&d=mm&r=g","caption":"Karol K"},"description":"Karol K. (@carlosinho) is a blogger and writer, published author, and founder of NewInternetOrder.com","url":"https:\/\/elementor.com\/blog\/author\/karol\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/23443","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/users\/25900"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/comments?post=23443"}],"version-history":[{"count":6,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/23443\/revisions"}],"predecessor-version":[{"id":94085,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/23443\/revisions\/94085"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media\/23527"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media?parent=23443"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/categories?post=23443"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/tags?post=23443"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_persona?post=23443"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_intent?post=23443"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}