WPBakery Image Optimization: How to Speed Up Dynamically Generated Thumbnails

WPBakery Page Builder has been a cornerstone of the WordPress ecosystem for years, empowering millions to build complex, custom layouts with its grid-based system and extensive library of elements. It is powerful, flexible, and packed with features. However, one of its most convenient features—the ability to generate custom image sizes on-the-fly—is also one of its biggest performance pitfalls.

If you’ve ever used WPBakery’s Media Grid or Post Grid elements, you’ve likely encountered this. You select an image size like “thumbnail,” “medium,” or a custom dimension, and WPBakery creates a new, resized version of your image. While this seems efficient, it often creates a hidden performance bottleneck that slows down your site and hurts your Core Web Vitals. Standard optimization plugins are frequently blind to these dynamically created images, leaving them uncompressed and oversized.

This guide will dive deep into the challenge of optimizing WPBakery’s dynamic thumbnails. We’ll explain why most tools fail at this task and introduce an automated, intelligent solution that ensures every single image on your WPBakery site—including those created on-the-fly—is perfectly optimized for maximum speed.

The Hidden Problem: WPBakery’s “On-the-Fly” Image Generation

When you upload an image to the WordPress Media Library, the system typically generates a few standard thumbnail sizes defined in your settings (e.g., thumbnail, medium, large). Most quality optimization plugins hook into this process, compressing each of these standard sizes upon upload.

WPBakery, however, often operates outside this standard workflow. When you use an element like the “Post Masonry Grid” and specify a custom image size (e.g., 400×300), WPBakery doesn’t use a pre-existing thumbnail. Instead, it instructs WordPress to generate a brand-new image file with those exact dimensions the moment the page is loaded.

This creates several significant performance issues:

1. Bypassing Standard Optimization: Since these thumbnails are not created during the initial upload, most optimization plugins never “see” them. They remain on your server as uncompressed, full-weight JPEGs or PNGs, even if the original image was optimized.
2. Increased Server Load: The first time a visitor loads a page with a dynamic grid, your server has to actively process and create these new image files. This adds to the Time to First Byte (TTFB) and can slow down the initial page render.
3. “Invisible” Performance Killers: You might run a bulk optimization and think your site is fully optimized. However, these hidden, uncompressed thumbnails created by WPBakery are still being served to your visitors, inflating your page weight and damaging your Largest Contentful Paint (LCP) score.

This is a subtle but critical issue. You could have a site where 90% of your images are optimized, but the 10% generated by WPBakery are responsible for 50% of your page load time.

The Solution Requires a Smarter Approach

To solve this problem, an optimization plugin can’t just wait for the wp_handle_upload hook. It needs to be more deeply integrated into WordPress’s image generation process. It must be able to detect and intercept the image_make_intermediate_size function, which is the core WordPress function that plugins like WPBakery use to create these dynamic thumbnails.

Furthermore, it must be able to serve these new thumbnails in next-generation formats like WebP and AVIF to achieve meaningful file size reductions.

• WebP: The modern standard, offering 25-35% smaller file sizes than JPEG.
• AVIF: The cutting-edge format, offering up to 50% smaller file sizes than even WebP.

An ideal solution would not only intercept these dynamic thumbnails but also instantly convert them to the smallest possible next-gen format, ensuring they are optimized from the moment they are created.

Media Optimizer: The Only Automated Solution for WPBakery’s Dynamic Images

This is a challenge we specifically engineered Media Optimizer to solve. Our plugin includes a dedicated integration that hooks directly into WordPress’s core image creation functions, making it fully compatible with WPBakery’s on-the-fly generation process.

Here’s how Media Optimizer’s intelligent system works to fix this problem automatically.

1. Deep Integration and Real-Time Interception

Media Optimizer doesn’t just watch for new uploads. It actively listens for the image_make_intermediate_size filter. The moment WPBakery requests a new thumbnail (e.g., my-image-400×300.jpg), our plugin intercepts it.

Before the new file is even fully saved, Media Optimizer springs into action. It takes this newly created thumbnail and immediately adds it to our optimization queue.

2. Instant Next-Gen Conversion

The intercepted thumbnail is then processed by our powerful cloud-based engine. We don’t just compress the JPEG; we generate both WebP and AVIF versions. This is crucial because a 400×300 JPEG thumbnail that might be 40 KB can be reduced to a 28 KB WebP file or a tiny 15 KB AVIF file.

3. “Smart Format Selection” for Every Thumbnail

Media Optimizer’s flagship “Smart Format Selection” technology ensures that even these dynamic thumbnails are served in the most efficient way possible. For each thumbnail, we compare the file size of the generated WebP and AVIF versions and automatically serve the absolute smallest file that the visitor’s browser supports.

This entire process is seamless and happens in the background. From your perspective, you simply build your pages in WPBakery as you always have. Behind the scenes, Media Optimizer ensures that every dynamically generated image is not only created but is also instantly optimized and served in the smallest possible next-gen format.

Stop Letting WPBakery Slow You Down.

Your page builder’s convenience shouldn’t come at the cost of performance. Media Optimizer is the only solution that deeply integrates with WPBakery to automatically optimize its on-the-fly thumbnails.

• Automatic Interception: We catch and optimize every image WPBakery creates.
• Cloud-Powered Conversion: No extra load on your server.
• AVIF & WebP with Smart Selection: Guarantee the smallest possible file size for every single thumbnail.

Download Media Optimizer and Get 200 Free Premium Credits to See the Difference!

Your WPBakery Performance Checklist

Implementing Media Optimizer is the most critical step, but you can combine it with other best practices for the ultimate WPBakery performance boost:

1. Install and Configure Media Optimizer: This is step one. Ensure that the WPBakery integration is active and that both WebP and AVIF formats are enabled in the settings.
2. Run the Bulk Optimizer: This will take care of all your existing images in the Media Library and in your theme/plugin files.
3. Enable Lazy Loading: On the “Lazy Load & Preload” tab in Media Optimizer, enable lazy loading. This is especially vital for WPBakery pages with long grids or galleries, as it will prevent images below the fold from loading until the user scrolls to them.
4. Audit Your Elements: WPBakery is powerful, but some third-party add-ons can be poorly coded. Deactivate any unused WPBakery add-on plugins.
5. Use a Caching Plugin: A good caching plugin (like WP Rocket or FlyingPress) is essential. It will store the static HTML version of your pages so that PHP and WPBakery’s shortcodes don’t have to run on every single page visit. Media Optimizer is fully compatible with all major caching solutions.

By combining these practices, you address the WPBakery performance problem from every angle: optimizing the assets (images), deferring their loading (lazy load), and reducing server processing (caching).

Conclusion: Build Without Compromise

WPBakery Page Builder remains a popular and effective tool for creating custom WordPress sites. Its tendency to generate unoptimized, dynamic images has long been its Achilles’ heel, forcing users to choose between design flexibility and page speed.

By using a modern optimization plugin like Media Optimizer, which is built to understand and work with WPBakery’s unique behavior, you can eliminate this performance bottleneck entirely. Its ability to automatically intercept, convert to next-gen formats, and intelligently serve every single thumbnail means you can build the complex, visually rich layouts you want, with the confidence that your site will remain lightning-fast and highly ranked.

Don’t let hidden, unoptimized images hold your WPBakery site back. Upgrade your optimization strategy and unlock a new level of performance.