Add Missing Image Dimensions

🚀 Available from WP Rocket version 3.8 in the Media tab

How does this option help?

When a browser is displaying a web page, it loads the HTML first and waits for the images to be downloaded. If the width and height values are available, browsers can use that information to reserve the space needed for the images on the page.

When space for an image is not reserved, the browser will move content around to accommodate the image once the image is downloaded. This layout shift leads to a poor experience for the user. 

This feature helps to address the following recommendations from GTmetrix and PageSpeed: 

• Use explicit width and height on image elements
• Cumulative layout shift

How does it work?

This feature is only applied on cached/optimized pages - check your site while logged out to see the effects. WP Rocket scans the HTML to find images that:

• Have a src attribute, but are without width or height attributes.
  WP Rocket will add  width and height attributes for the image only if they are missing. If the attributes are present including width="auto" or height="auto" values those images will not be processed.
• Are accessible (i.e there's no 404 error).
• Are hosted on your domain (to apply this feature on externally hosted images, please see this guide)
• We get the image size using the PHP function getimagesize and add width/height attributes using those values.

The following will be excluded:

• Images that have one of the following attributes:data-original-height, data-original-width, data-lazy-original, data-no-image-dimensions, data-height-percentage, data-actual-width, data-actual-height
• Image that are part of a picture tag (to apply this feature on these images, please see this guide)
• SVGs (because they're pure XML files and their width and height attributes can't be read by our feature).
• Images that are hosted on external domains

Example

If you have an image on your site like the following: 

<img src="https://www.example.com/wp-content/uploads/2020/12/image.jpg">

Let's say the image has the dimensions of 200 x 200. It will be updated to:

<img width="200" height="200" src="https://www.example.com/wp-content/uploads/2020/12/image.jpg" > <br>

Excluding images

If this feature causes any problems, please see this guide to exclude specific images:
Disable Missing Image Dimensions on Specific Images