Compression, pixel sizes and responsive images in Beaver Builder

In this exercise, I’m looking at how WordPress and Beaver Builder handle images, compression applied, cropped sizes and display variations for responsive display settings.

WordPress jpg compression

When you upload a JPG image to your media folder, WordPress automatically applies an 82% compression to the file. WP does not apply any compression to your original file, it only applies the compression to the images it creates for the thumbnail, medium and large image sizes that it creates on upload. The original stays just that, original. WP won’t try and apply compression on any other img type either.

So if your original JPEG image was exported from your desktop software at 75% compression, be aware that WP will apply it’s own 82% by default on top of that when it creates your thumbnails, medium and large sizes. Again, the original file will not be touched.

If you don’t want WordPress to apply compression to the images it creates, then you can add this code to your child theme’s functions.php file and set the compression argument to 100. Similarly, you can set it lower if you’d like it to add more compression.

If you add this code, WP won’t change the compression settings for existing files, you’ll need to run Regenerate Thumbnails to get WP to apply the new settings.

Setting pixel sizes for thumbnails, medium and large images

To set the pixel sizes for the thumbnail, medium and large images, head on over to the WordPress dashboard and click on Settings > Media. There you’ll be able to change the dimensions for each of these default media sizes.

When changing settings for the thumbnails, WP can either ‘soft’ or ‘hard’ crop them depending on whether or not you check the box, ‘Crop thumbnail to exact dimensions (normally thumbnails are proportional)’

If you check the crop box, WP will scale the image from its centre point until the shortest edge matches the pixel dimensions set for the thumbnail. It then crops the remaining image outside of the thumbnail area. A soft crop scales the entire image down to fit within the box so that no part of the image is hidden. Check out this article for a great explanation.

The medium and large sizes are scaled to a maximum pixel dimension so your portrait images will be a maximum of 300px tall for medium and 1024px tall for large if you have set a pixel height of 300 and 1024px respectively. Similarly, a landscape image will be resized to a maximum of 300px wide for medium and 1024px wide for large. You should set these max image dimensions to suit your particular theme.

Creating additional image sizes

If medium and large images just don’t cut it and you need additional images to be created on upload, then adding this code to your functions file will tell WordPress to create an additional image based on the criteria specified.

The code above tells WordPress to create two additional images, one hard cropped, the soft cropped and you can then choose these images from Beaver Builder’s photo module when adding an image to your page.

Beaver Builder breakpoints

Beaver Builder has two responsive breakpoints by default, 992px for medium devices and 768px for small devices. You can alter these values by going to Tools > Global Settings > Responsive Layout but you only have two break points to work with. These breakpoints are important as you’ll see later as they determine when your browser starts looking for your large or medium images instead of displaying the original. Beaver Builder 1.8 introduced stacking order on columns allowing you to reverse the columns order on mobile – David Waumsley has a great video here outlining the technique.

Beaver Builder photo module

When using the Beaver Builder photo module, you tell BB which image size to use from the module size dropdown. In my tests, BB also gave me a few suggested smaller sizes based on the column or row I was inserting the image into. If you’ve defined custom sizes in your functions file, these will also be listed here for you to choose from.

BB then inserts your image and scales it to suit the containing column size. So if you insert, say a 1024px wide ‘large’ image into a column size of 900px, BB will scale it down to fit the column width. If you then resize your viewport, your browser will continue to scale the image until you reach your defined breakpoints.

The srcset img tag

BB adds code to enable your browser to know what image to use for each of your breakpoints. It will then swap out the large for a medium image according to rules set by the code below. It does this because BB supports the srcset img tag. Basically, what’s happening here is that BB is saying to the browser, here’s the image I’d like you to display by default; use this one if the viewport is bigger, use this one if the viewport is made smaller. Using an example of an image displayed on this site, BB is displaying versions of an original image of 1136px wide in the following manner:

<img class=“size-large" src="https://builderbrains.com/my-image-1024x789.jpg" width="1024" height="789" srcset="https://builderbrains.com/my-image-1024x789.jpg 1024w, https://builderbrains.com/my-image-300x231.jpg 300w, https://builderbrains.com/my-image-768x592.jpg 768w, https://builderbrains.com/my-image.jpg 1136w" sizes="(max-width: 1024px) 100vw, 1024px" />

Let’s see what’s going on:

img class=“size-large" src="https://builderbrains.com/my-image-1024x789.jpg" width="1024" height="789"

This is setting a class on the img and telling the browser to use the large image by default. It’s telling the browser that the image width and height are 1024 x 789px. If your browser doesn’t support the srcset img tag, it will fallback to using this image by default.

srcset="https://builderbrains.com/my-image-1024x789.jpg 1024w
Here we’re telling the browser that for a viewport wider than 1024px then use the image called my-image-1024×789.jpg which also happens to be the size-large img.

https://builderbrains.com/my-image-300x231.jpg 300w
For viewports between 300 and 768px wide, use the my-image-300×231.jpg

https://builderbrains.com/my-image-768x592.jpg 768w
For viewports between 768 and 1024px wide, use the my-image-768×592.jpg

https://builderbrains.com/my-image.jpg 1136w
For viewports over 1136px wide, use the original image.

sizes="(max-width: 1024px) 100vw, 1024px"
This last section is telling the browser that if a viewport is bigger than 1024px wide then the image used must fill 100% of the container otherwise if it’s smaller then it should be displayed at 1024px wide, until of course, the smaller images come into play.

The browser and Beaver Builder are doing a pretty good job of automating this in the background and for the most part, this will suit most people. However, there may be times when you want to tweak the settings and in that case, you’ll need to use a Beaver Builder HTML module and write the corresponding code accordingly.

So in conclusion, for me it seems best to have a design strategy in place to determine the best default image sizes for your website’s layout. Then set the best thumbnail, medium and large sizes in WordPress media settings and define your own if needs be. Choose the right image sizes in the photo module and if you need to alter breakpoints or override the defaults then the HTML module and responsive global options are your friends!

Have a tip? Please let us know in the comments.