Add Image Dimensions to Divi WordPress Theme

Page speed is important for any website. One simple, yet tedious, way to improve your page speed is to declare the width and height for all of your images. If you use Elegant Themes’ Divi theme for your WordPress website, you will likely use their “Image” module in their Page Builder. Their “Image” module allows you to insert any image into your webpage with options for animation.

However, the theme does not declare the width and height of these images, bringing down your page speed with every image you insert with their module. But this can be fixed!

Duplicate the file Divi/includes/builder/main-modules.php into your child theme (or create a child theme so you can make overrides to Divi) and change this code (around line 241):

$output = sprintf(
     '<img src="%1$s" alt="%2$s"%3$s />',
     esc_attr( $src ),
     esc_attr( $alt ),
     ( '' !== $title_text ? sprintf( ' title="%1$s"', esc_attr( $title_text ) ) : '')
);

to this code (via StackOverflow):

list($width, $height) = getimagesize($src);
$output = sprintf(
     '<img src="%1$s" alt="%2$s"%3$s width="%4$s" height="%5$s" />',
     esc_attr( $src ),
     esc_attr( $alt ),
     ( '' !== $title_text ? sprintf( ' title="%1$s"', esc_attr( $title_text ) ) : ''),
     esc_attr($width),
     esc_attr($height)
);

Your images via the Divi “Image” module should now have the dimensions declared in their image attributes.