Image Optimization

My site uses full width hero images (which are very easy to implement using BB, thanks)

Considering Google is all about page performance nowadays, do you guys suggest a specific course of action to make sure these large hero images are optimized for mobile?

Is there a way for BB theme or page builder to account for image performance?

I have used to compress images and have WP installed to further optimize but that doesn’t eliminate the fact that mobile images could be smaller than desktop.

How do you guys handle image optimization?

Hey Jcduron,

WordPress recently added native support for responsive images. We did the same but we’re simply letting WP handle that part. This doesn’t include background images though.

If you want, you can change the row background image on mobile by using custom CSS. Take a look at the KB article below.


Thanks Ben, I’ll consider that.

Another thing, tools like detail a few issues, one of which is “Specify Image Dimensions”. According to them, “Specifying a width and height for all images allows for faster rendering by eliminating the need for unnecessary reflows and repaints.”

I add images using the BB Page Builder but I don’t see how I can specify the image size in the UI - can you recommend the way to add image dimensions?

Would this be something that could be added to the page builder UI?

Hey Jcduron,

My apologies for the delay on this one. We don’t add height/width to the images in Beaver Builder because they are responsive. I believe even if we did, there would still be “reflows and repaints” because CSS is used to make them responsive. Adding width/height to the UI would be a big change that we would need to discuss, but feel free to add it to our UserVoice page.