Add missing image dimensions
This feature is available 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?
WP Rocket will add the missing attribute for the image if t's missing height only, width only, or both height and width.
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
srcattribute, but are without
- Are accessible (i.e there's no
- 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
getimagesizeand add width/height attributes using those values.
The following will be excluded:
- Images with
- Images where the width or height is added twice, i.e.
- Image that are part of a
picturetag (to apply this feature on these images, please see this guide).
- Images with
- Images with attributes that end with
height, such as
- Images that are hosted on external domains.
- Images with query strings in their URLs.
- Images that are dynamically added, i.e., images which are not present in the source code of the page but injected into the DOM later.
- Images that are Base64 encoded
<img src="data:image/png;base64, ...">
If you have an image on your site like the following:
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>
If this feature causes any problems, please see this guide to exclude specific images:
Disable Add missing image dimensions on specific images