A Guide to Optimising Image Sizes in Divi

Introduction

Within web design, images are central to user experience. However, unoptimised images can significantly slow down your website. For Divi users, fine-tuning image sizes can vastly improve site speed and performance. This guide dives deep into how you can optimise image sizes in Divi, ensuring your website remains visually appealing without compromising on speed.

Understanding the Importance of Image Size Optimisation

When deploying a Divi website, I found that I had some images which were being loaded in much larger sizes than they were being displayed. I had <img> tag which was 360 pixels wide, but the image that was being loaded was around 800 pixels wide.

Large, high-resolution images can consume a lot of bandwidth, leading to longer page load times. This not only affects user experience but can also harm your SEO rankings. By optimising image sizes, you ensure that your website remains fast and efficient, providing a better experience for your visitors.

Customising Image Sizes in WordPress with PHP

You can instruct WordPress to generate images of specific dimensions using a snippet of PHP code. Here’s an example:

/**
 * Add custom image sizes, overwrites the defaults with a fresh array
 * @param array $sizes Existing sizes
 * @return array
 */
function addCustomImageSizes( array $sizes ): array
{
    //This overwrites the defaults.
    //If you'd like to keep the defaults, extend the $sizes variable.
    return [
        '400x0' => '400x0'
    ];
}
\add_action( 'et_theme_image_sizes', 'addCustomImageSizes' );

This code snippet effectively sets the width of any image to 400 pixels while keeping the height automatic based on the aspect ratio. It works by overwriting the default image sizes with a new set of dimensions.

Note: Once added, this code will only apply to newly added images. To regenerate existing images, see ‘The Necessity of Regenerating Thumbnails’ below.

Leveraging Divi Hooks for Module-Specific Image Sizes

Divi offers hooks for setting image sizes for its different modules. For instance, if you want to change the default image size for the blog module, you can use the following code:

/**
 * Override default blog image size for blog module
 */
\add_filter( 'et_pb_blog_image_height', fn() => 'auto' );
\add_filter( 'et_pb_blog_image_width', fn() => '400' );

These hooks allow you to set a width of 400 pixels and an automatic height for images in the Divi blog module, optimising them for better performance.

It’s important to ensure that the images you’re generating are at least as big as the area they’re required to fill. Otherwise, Divi will use a different version than the one which you may want.

Note: To change the image dimension for other blocks, simply change the block referenced in the hooks from blog to whichever you’re wanting to modify.

The Necessity of Regenerating Thumbnails

After adjusting image sizes, it’s essential to regenerate thumbnails. This ensures that your changes are applied to existing images. WordPress doesn’t automatically resize existing images, so this step is crucial. You can do this easily using WP CLI, a command-line tool for managing WordPress websites. The command to regenerate thumbnails is:

wp media regenerate

This command will go through all your images and regenerate thumbnails according to the new dimensions you’ve set.

Note: You can also use a plugin to regenerate thumbnails, but as I haven’t used this approach personally, I cannot recommend a specific one.

Conclusion

Optimising image sizes in Divi is a straightforward yet effective way to enhance your website’s performance. By customising image dimensions and regenerating thumbnails, you ensure that your site remains fast and efficient, providing a smooth experience for your users. Remember, a well-optimised website is key to retaining visitors and improving search engine rankings. Implement these changes today, and witness a noticeable improvement in your site’s performance.