Optimizing Images for WordPress Elementor Plugin

The concept of modular blocks making up WordPress posts and pages arrived alongside Gutenberg, but really, WordPress itself is modular in structure. Take your WordPress Media Library, for example. You can upload images and use them in posts or pages, regardless of the editor that you are using. In this article, we focus specifically on Elementor, and how you can optimize images using ImageRecycle.

Much like Gutenberg, Elementor is a Wordpress editor that lets you create posts or pages while seeing what they will look like to your readers. Elementor's structure is also similar to Gutenberg’s as it uses the now-familiar concept of blocks. That makes using the WordPress Media Library even easier, including when adding optimized images. First things first though: how do you optimize images on WordPress?

Optimizing Images with ImageRecycle

If you have never used ImageRecycle, optimizing WordPress images is a quick and easy process. You will first need to download and install the ImageRecycle plugin on your WordPress website. Once you install the plugin, head to its configuration under the settings menu and input your API Key and Secret. Save changes and if the key and secret match, you can start optimizing images immediately.

You can access the main ImageRecycle interface from the media menu. This page is simple and rather straightforward to use. It lists all the images in your media library, and their sizes and compression rates. You can click on the optimize button next to individual images to compress them, or on the optimize all button to optimize all of the images at once.

A lot of what happens during compression depends on ImageRecycle’s settings. For example, you can choose to use best saving or original quality compression, which can compress images by up to 80% and 20% respectively. You can read more about the difference between these two modes here.

Whichever optimization mode you choose, these images are saved in your WordPress Media Library, which means that you can use them in your posts and pages… regardless of what editor you are using. In the rest of this article, we focus on one particular editor: Elementor.

Using Optimized Images in Elementor

Elementor is a powerful editor for WordPress posts and pages. Like Gutenberg, it organizes content into blocks, each one representing a different element. As you know, no website is truly complete without images and Elementor is not lacking in the domain of image blocks. This is where the Media Library comes in.

We started the article by explaining that WordPress itself is rather modular, and this is where it all ties in together. Where would Elementor get its images from, if not from the Media Library? That is, the same WordPress Media Library you just optimized with ImageRecycle.

Using ImageRecycle’s compressed images in Elementor is as simple as drag-and-dropping any image block—whether a basic image, a carousel, gallery or anything else—and loading the images. You pick images directly from the WordPress Media Library, which automatically loads the compressed images.

WordPress is essentially modular and it would be a waste not to exploit it. ImageRecycle ties in with any editor that you use without impinging on your workflow. All you need to do is optimize images and insert them into your blog later, allowing you to optimize your WordPress readers’ experience, regardless of the editor you use.