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.
Today is 2019, and we still have the same issue with Elegant Themes’ Divi theme. Unfortunately, the above code is not working anymore, and the Divi team is too busy to fix this simple thing.
Hi Trader! It definitely looks like they haven’t implemented declaring image dimensions in their Image Modules. I haven’t played too much with Divi recently, but it looks like they’re trying to implement srcset in an upcoming update. It would make sense — if they continue to not implement this — to make a very lightweight plugin or a function that would add the image dimensions automatically.
Hi Mercy. As you know ET has made multiple updates to the Divi Theme. I recently posted a blog on 2 ways to add the width and height attributes to Divi images that can be achieved with the current version of Divi. Thought you might be interested in the read. https://studio6am.com/add-width-and-height-dimensions-to-divi-images/
Thanks for publishing this fix. This is still very relevant today. Thanks to a new Google update, TBT (Total Blocking Time) and CLS (Cumulative Layout Shift) are major factors into page rank. Yes. ET has implemented responsive images using srcset, which works well. However, they failed to consider images so small no additional src will exist. I these events, ET simply uses “auto” for the width and height attribute on images. This has negative impact on both metrics mentioned. Implementing this fix helps the problem greatly.
This code still does work, or least the concept of it. Somethings have moved around so the updated code is:
/wp-content/themes/Divi/includes/builder/module/Image.php (line:443)
“`
list($width, $height) = getimagesize($src);
$image_attrs = array(
‘src’ => ‘{{src}}’,
‘alt’ => esc_attr( $alt ),
‘title’ => esc_attr( $title_text ),
‘height’ => esc_attr($height),
‘width’ => esc_attr($width),
);
“`