How to Disable Lazy-Loading on Images

Wait, isn’t lazy-loading images the greatest thing since sliced bread?! Yes, it is for the speed-obsessed. So why would you ever want to disable it?

Lazy-loading should only be used for off-screen images that are on your page and not immediately viewable in the screen area before having to scroll down the page.

Looking at our mobile blog example in the picture, we want to exclude the pictures above the pink line from lazy-loading, meaning we want those images to load immediately. Any pictures or video below the line, should wait to load the resources and only when needed so they don’t block the webpage from loading.

Blog post diagram of above the scroll vs below the scroll content on a Mobile phone

Selectively disabling Lazy-Loading on Images

Method 1: WP Rocket Media Settings

Best method for adding your logo, featured image code class, or sidebar bio image, which can’t easily be accessed individually. Go to your top traffic pages and make sure especially on mobile, that any image you see on your device before having to scroll, is on that LazyLoad exclusion list.

  1. Right Click on the image you want to disable lazy-loading on. In this case, my logo.
  2. In the pop-up menu, select Open Image in New Tab. This will open up a new browser tab.
Right clicked on image then see the menu - select Open image in new tab
  1. In that new browser tab, you’ll see the Image’s URL. Copy the url.
Image URL in browser tab
  1. Open up WP Rocket’s Settings dashboard.
  2. Click through to the Media section.
  3. Paste the URL you previously copied into the box underneath Lazy Load. Notice the format of the URL I’ve entered. From my logo example, my complete URL is https://blogjolt.com/wp-content/uploads/Blog-Jolt-Logo-Header.svg

    But, what I’ll enter into this box is only the part that comes after uploads/
Blog-Jolt-Logo-Header.svg
WP Rocket's LazyLoad exclude box.

Featured Images: To target multiple images that serve a similar function, such as Featured images, is to add their code Class to the box. I’ve compiled a list of popular themes and their Featured Image code classes. If you have the theme, enter the appropriate code class into the box to disable lazy-loading on your featured images on blog posts. Doing this will help with LCP issues in Google.

Theme Featured Image Classes

Astra

attachment-large size-large wp-post-image

GeneratePress

featured-image attachment-full size-full

Kadence

post-top-featured wp-post-image

Method 2: Adding the skip-lazy class to each image

This is useful when you have your featured images set not to display and instead your first blog post image is usually after an intro paragraph, but still visible in the viewing area before scrolling. This method is especially useful when you can’t target all the images needed by their code information like above, and you’ll have a lot of images to separately adjust. Easier once you get in the habit of using this class, to enter it as you create your blog post.

  1. Click on the image in your blog post or page that you want to disable lazy-loading on.
  2. In the Block tab on the right-hand side of the screen, scroll down till you see the Advanced option. Click to open.
  3. In the field Additional CSS class(es), enter the following:
skip-lazy
  1. Click the Update button when finished to save your changes.
Blog post image view in the WordPress post editor - Adding the skip-lazy class.