Faster Elementor hero images in 2 minutes!

Faster Elementor hero images

Elementor, a popular WordPress page editor, simplifies page design. Unfortunately, it often slows down sites. Sometimes due to user errors and sometimes due to Elementor's design choices. An example I see almost daily is how Elementor handles hero images. By default, Elementor uses background images for these, which slows down page loading every time.

The allure of Elementor Background Images

Elementor adds hero-images as a background image by default. While editing the page with Elementor, simply click on the first container, navigate to style and add your image. Its easy, convenient and idiot proof. If that is good enough for you stop reading here but if you care about your visitors read on and learn how to create Elementor hero images the right way.

The Problem with Elementor Background Images

Now what is wrong with background images you might ask? Background images are know for this behavior: they span the entire background of an element. It does what is needs to do. But at a performance cost:

• Late discovery: From a technical perspective background images are far from ideal. Elementor background images are not immediately discovered in the html. These background images are linked in stylesheets. Since stylesheets have to be downloaded and parsed seperately that means they are discovered much later during the rendering process.
• Not optimized for speed:  Background images are not optimized for speed because they are missing newer properties like native lazy loading, fetchpriority and async decoding.
• Not responsive: Last but not least Elementor background images are not responsive and will always load a full desktop sized image, even for small mobile devices.

I won't go into much more detail (if you are interested read about why background images are evil) but suffice it to say that are page with this set-up will probably fail the core web vitals.

The 2-Minute Fix for Slow Background Images

Slow background images don’t have to be a problem. With a simple CSS tweak, they can be transformed into fast, responsive images.  The secret? Using object-fit: cover to scale the image and combining it with position: relative on the container and position: absolute on the image. 

Fun fact: I timed myself today while converting Elementor background images to blazing fast responsive images. It ook me less then 2 minutes! 

If this sounds complicated, don’t worry! I'll guide you step by step. And there’s even a how-to video waiting for you at the end!

Step 1: add the necessary styles

To fix slow background images, start by applying a few essential CSS styles. These styles will make the image behave like a proper background cover image and ensures  it doesn’t conflict with Elementor helper divs.

/* The relative parent container */
.relative{
    position: relative;
}

/* Ensure Elementor helper divs are not relative */
.relative .elementor-container, 
.relative .elementor-column, 
.relative .elementor-widget-wrap {
    position: initial;
}

/* The new and improved hero image */
.heroimg, .heroimg img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

What This Does:

• .relative: Makes the parent container relative to position child elements within it.
• .relative .elementor-*: Resets Elementor helper divs to avoid layout conflicts.
• .heroimg: Ensures the image scales to cover the container while sitting behind it.

How to Add the Styles:

• Navigate to your WordPress Dashboard.
• Go to Appearance > Customize.
• Click on Additional CSS.
• Paste the CSS code above and save your changes.

This sets the foundation for converting those slow background images into responsive, optimized hero images. Next, apply the .relative and .heroimg classes to your hero section to see the magic in action! 

Step 2: Prepare the container

Now that the styles are in place, it’s time to prepare the container for the new hero image. This involves removing the existing background image and applying the .relative class to the container.

Steps:

1. Edit the Container: 

• Go to your Elementor editor and select the container where the hero image is currently applied.

• Navigate to the Style tab.
• Locate the Background section where the image is applied.
• Click the trash can icon to remove the background image.

• Switch to the Advanced tab.
• Under CSS Classes, type relative.

Step 3: Add a new image and apply the new classes

With the container ready, it’s time to add the responsive and optimized hero image using Elementor. Here’s how:

What to Expect: During the final step, the hero image may look misaligned or strange before applying the classes! This is normal! The .heroimg class will transform the image into a responsive, full-width hero image that behaves like a background cover. Once completed, your optimized hero image will sit behind the container, offering the same visual impact with significantly improved performance.

Steps:

• Add an Image Element:
• In the Elementor editor, click the plus icon in the top left corner to add a new element.
• Drag and drop the Image widget into the top container (the one with the .relative class).
• Upload and Select Your Image:
• In the image settings on the left panel, click the image placeholder.
• Upload the full-screen image you want to use or select an existing one from your WordPress media gallery.
• Apply the .heroimg Class:
• With the image still selected, navigate to the Advanced tab in the Elementor menu.
• In the CSS Classes field, type heroimg.

Done, enjoy a faster page!

You’ve made it! At this point, your hero image is fully optimized and ready to deliver a faster page experience. 

Once you publish the page, inspect the element, and you’ll notice something great: the slow background image has been replaced with a responsive, fast foreground image. This image is now likely loaded with a high fetchpriority, ensuring it loads quicker, improving both Core Web Vitals and user experience.

Congratulations on creating a faster, more efficient page. Your visitors will notice the difference!

Before: 2.6 sec

After: 0.6 sec

Bonus: preload the hero image

Watch the full walkthrough on YouTube.