In this article, we're going to discuss speeding up the loading time of your Elementor website by optimizing images (with ShortPixel). When it comes to most websites, images make up the bulk of the page size, followed by JavaScript and finally the underlying HTML and CSS assets.

However, many people don't know that unoptimized images can drastically slow down the loading time of your website, leading to a poorer user experience and lower ranking in Google.

High resolution, high quality images are a must on pretty much every single type of website out there. Whether a photographer, service provider, local business, or really anything else, having stunning images on your website can effectively convey your message. After all, a picture is worth 1000 words.

Pages that load within two seconds have an average bounce rate of 9%, while pages that take five seconds to load have a bounce rate of 38%. The quicker your website is, the more visitors will actually end up on the page and view that image.

In the following sections, we’re going to discuss how to optimize images on a website built with Elementor. As an agency who builds around 50% of our web sites with the Elementor page builder tool on top of WordPress, we've identified the best image optimization plugins (methods, and tricks) that are compatible with the builder.

We're going to cover how you should optimize images, how ShortPixel and other plugins do this automatically, and finally how to integrate this solution into your own website.

Why?

We already discussed this in the introduction paragraph of this article, but we wanted to restate a couple key statistics that will show you exactly why you should focus on image optimization.

• 79% of web shoppers who have trouble with web site performance say they won’t return to the site to buy again.
• A One-Second Delay Results in a 7% Drop in Conversions
• Three of the Top Four SEO UX Signals are Page Speed Dependent. That includes bounce rate, pages per session, and time on site. (The other is number of website visitors).

Below is a great graphic showing how webpages are changing over the years. As we progress, pages become larger, though images remain the bulk the data transferred.

Keep in mind, the Elementor page builder is known to lead to slower loading websites when compared to something like Oxygen, so doing absolutely everything you can to ensure that your website loads as quick as possible is in your best interest.

Another thing to remember is that mobile devices load a lot slower than desktop computers. If an image loads quickly on your Chrome browser on your 13in MacBook, it could load a lot slower on your iPhone if it isn't optimized. Because 60% of all traffic comes from mobile devices, you want to ensure that the mobile loading experience (including images) is as good as it can get.

Check your speed now:

We have seen this issue on dozens of Elementor WordPress websites; pages load quickly on a desktop site, but the second you get to the mobile experience the images cause the site to 20 seconds or more. In really bad situations, you can even see the image render in real time, going line by line.

Now that we know why image optimization is a must when building a website with Elementor (or any site for that matter), let’s take a look at the various methods you can use to address these issues.

How?

There are several different approaches to image optimization and combining these together will lead to the best end result. To define end result: we want the page to load as quickly as possible. we will do this by making the image files as small as possible, while retaining visual quality.

There's no point in optimizing an image to be as small as possible if it just becomes a mass of blurry pixels, just as there's no point in loading a 10 megabyte image on your page.

Quality 100 looks great but is too large. Quality 5 looks terrible. Quality 50 look nice and is half the size of the original image.

Let's quickly cover all of the ways that you can optimize an image on your Elementor website.

• Compress the image

Compressing the image strips unnecessary data, making the file size smaller. There are two ways to compress an image, with the first being lossless compression and the second being lossy compression. Lossless compression is typically done to a PNG file, where is lossy compression is typically done to JPEG files. With lossy compression, image files loose physical data. With lossless compression, there is no data loss. Both types of compression have their place in the world of image optimization.

• Crop the image

If you're not using an area of the image anywhere on your website, cropping it out will remove that data, and make the image physically smaller. That means it will load faster on the front end of a website when called from a visitor’s web browser.

• Serve the image in another format

There are several next generation image formats that you can use to serve an image faster and transfer less data. The primary image format that is recommended among all web browsers is WebP. The main issue with using next generation image formats is that older browser versions typically don't have compatibility, so it's important to be able to fall back to a JPG or PNG.

WebP Browser compatibility (Note the incompatibility with recent versions of Safari and IE).

• Serve the image from a CDN

Using a CDN (content delivery network) can drastically speed up your website from a global standpoint. Image CDNs typically differ from static assets CDNs in that they can automatically transform and optimize an image on the fly.

As with any CDN, it serves content from a geographically close node (formerly known as a point of presence). by serving from a closer location, as well as optimizing and caching, images can be delivered a lot quicker than if they were requested and served from your original server.

We use an image CDN from ShortPixel. Here are all of the areas that our images are served from when our website is loaded from 18 different global locations (page icons are serving, location icons are loading).

By using a combination of all of these methods, your images should serve as fast as technologically possible and you should be able to reap the benefits of a quicker website, which will rank higher in Google and make your visitors happier.

Of course, you can do this completely manually (minus the image CDN). you can use a collection of online tools or Photoshop to compress the image and crop it if need be. You can generate hundreds of difference of variations of crop, and program your WordPress website to choose the best version of that cropped image for its placement.

You can also take these dozens of variations on the same image, and convert it into a next generation format using an online jpg/png to webp converter. Finally, you can set up a rule in your HTACCESS file that serves webp images on browsers that support that file format, and falls back to the optimized JPG/PNG format if WEBP isn’t supported.

Here's a list of some of the tools that we have used in the past to optimize images manually. In some situations, this is the necessity, but 99% of the time an image optimization plugin like ShortPixel will replace the need for these (as you’ll see in the next section of this article).

• Crop and (initially resize) images: Photoshop or GIMP, but there’s no good solution if you have hundreds of media assets.
• Compress images: The industry standard standalone compression engine is TinyPNG.
• Convert images: We’ve used Convertio in the past for static websites (not built on WP):
• Serve images: Typically done via .htaccess rules. For more info, view this article: Serving WebP images for PNG and JPG files
• Image CDN: This is difficult to manually integrate, though it can be done with a collection of WordPress plugins. We’ve used WP Offload Media with Amazon Cloudfront in the past, but this is complicated and only makes sense if you have gigabytes of images on your site (news/magazine).

If this sounds like a lot of unnecessary work, believe me, it is. There is absolutely no reason to be doing any of this manually as there are 100 different plugins and services out there (aimed towards WordPress and other content management systems) they completely automate all of these tasks outlined above.

Specifically with WordPress and its robust ecosystem of plugins, it's very easy to find an image optimization solution. However, there are some that work with Elementor better than others. Over years of trial and error, we've identified ShortPixel to be the best option when it comes to image optimization for the Elementor page builder.

Keep in mind, all reasonable image optimization plugins are paid solutions. Luckily, they don't cost that much (typically 2 to $5 per month for an average sized website), but the reason that they're paid is because they do all of the image optimization on their own cloud based servers, and then push it back to the website. Some solutions even include a CDN (like Shortpixel).

You're paying for the optimization and conversion service (which is done on their servers). There are some options out there that will allow you to automatically optimize and serve images from your own server, though we have found that this puts an unnecessary load on your host, especially if it is a budget host (anything under $40) – not worth it.

If you're serious about your Elementor website’s page speed, and want to focus on image optimization, paying for a service is your best bet. ShortPixel offers you (by far) the most value for your money. Let's talk about how to incorporate all of the image optimizations mentioned above with this solution.

ShortPixel Intro

ShortPixel is a WordPress plugin that automatically optimizes all the images on your website. It plays nice with Elementor, is very easy to use, and is fairly affordable for any user, whether you have a small business website or a massive content blog (we've used the solution on both, including our own well followed blog here). They also have a Shopify application and a PHP tool, but we're only discussing the WordPress plugin here, and will be including screenshots that show how to set things up specifically for an Elementor site.

ShortPixel actually has two plugins. To clear up any confusion, let’s define both and what they do. There is a ShortPixel image optimization plugin, and there is a ShortPixel adaptive images plugin. The image optimizer plugin optimizes physical images on your server, while the adaptive images plugin downloads the images, stores them on the short pics of CDN, and replaces image URLs with the CDN's URL on the fly when the page loads.

The adaptive images plugin offers more value for your money and makes everything load a lot quicker. We will be using the ShortPixel adaptive images plugin for this tutorial and use it on all client websites including our own.

The only negative aspect of adaptive images is that it’s more sensitive to conflicts with themes or plugins because it uses JavaScript to modify the image URLs, so you should test everything thoroughly after installing it. Whatever the case is, you can use the credits that you purchase on ShortPixel with the image optimizer or adaptive images plugin, so you're not wasting your money. It’s always better to serve an optimized image than a non-optimized image, even if it's being stored on your physical server.

Using a CDN is mentioned above, but it offers the benefits of a more geographically close data location as well as on the fly image optimization tailored towards specific devices.

Before we get into the tutorial, let's discuss the pricing structure of ShortPixel.

You can get 100 free image optimizations per month. All you need to do is sign up for the optimization service through the plugin. However, if you get any traffic to your website, chances are you'll need to get a paid plan which allows you to optimize more than 100 images.

ShortPixel uses image credits, but there are two ways to pay for this; monthly or as a one time purchase.

We definitely recommend monthly, especially if your website is producing income through ads, lead generation or affiliate links.

With a monthly subscription, you purchase a set number of credits which renews every month period you were billed month to month. Each credit equals one image optimized. For most small business websites, the cheapest plan which starts at $12/m is more than enough, our blog gets around 30,000 views per month currently, and we are easily using the $12 per month plan.

Optimize Elementor Images Automatically With ShortPixel

ShortPixel adaptive images does a ton of things automatically out of the box without any set up period of course, there are a bunch of settings that we will get into which you can use to ensure the quickest loading experience of your element to our website, which we will discuss at a later point in this article.

Here’s a quick run down of everything that adaptive images does (from the repository description):

An easy to use plugin that can help you solve within minutes all your website’s image-related problems.

Display properly sized, smartly cropped and optimized images on your website; Images are processed on the fly and served from our CDN, in the next-gen WebP format, if the browser supports it.

• same visual quality but smaller images thanks to ShortPixel algorithms
• smart cropping
• serve only appropriately sized images depending on the visitor’s viewport
• lazy load support
• automatically serves WebP images to browsers that support this format. Animated Gifs are supported too!
• caching and serving from a global CDN
• all major image galleries, sliders, page builders are supported
• SVG place holders
• support for JPEG, PNG, GIF, TIFF, BMP
• convert to WebP on the fly.
• traffic is not counted

Setting Up ShortPixel With Elementor

Now, Let's talk about how to actually install and integrate this image optimization plugin into your Elementor website.

First, in the WordPress plugin repository, search for “ShortPixel” and install the adaptive images.

There are four main steps to the plugin configuration. First, you are encouraged to also run through your site and see if all of the images are serving properly. Immediately after you activate it, it starts serving images from the CDN. You have 500 free credits to test everything out (this might cut it if you have a super small site - ie. no cost).

Under configure, ShortPixel will automatically check your homepage (built with Elementor), and recommend settings changes. This is very helpful, as there are several important settings that can be configured.

Once checked, we get access to the main settings panel. For Elementor, here are the best settings:

Inital Settings

Advanced Settings

Enabling all of these make the site faster, but may break the frontend (dependent on your plugin stack)

Behavior Settings

We check off "both" for the replacement method.

You have the option to exclude images from being resized, lazyloaded, or be untouched entirely from the plugin. You can also exclude full url paths, and regex urls. For example, /.*\.gif$/i will exclude GIF images. By default, Gravatar images are excluded.

We recommend excluding your logo, but not much else. Get the ID by using Dev Tools, or the frontend selection utility (initiated by clicking on the icon in the top header bar).

The frontend tool is great for showing if images are being served and resized by the CDN. You can also exclude the image by clicking on one of the settings, or refresh it on the cdn (that uses 1 credit).

And just like that, your Elementor images are being served over a CDN by SPAI. You can check with this cool tool (go to the map and see if images are being served from many geographical diverse nodes):