Width and Height Attributes

When a browser loads a webpage, it first parses the HTML and then downloads the images. By including explicit width and height attributes for images, the browser can reserve the necessary space for each image, preventing layout shifts during the loading process.

If image dimensions are missing, the browser adjusts the layout after the images are loaded, causing content to move and resulting in Cumulative Layout Shift (CLS). This negatively impacts user experience and Core Web Vitals scores.

By adding missing image dimensions, RapidLoad optimizes your site and addresses performance recommendations, including:

• Using explicit width and height on image elements.
• Reducing Cumulative Layout Shift (CLS).

This ensures a smoother user experience and improved Core Web Vitals scores.

How to Enable Width & Height in RapidLoad

1. Go to the Optimize tab in the RapidLoad plugin.
2. Click on the Customize Settings dropdown.
3. Under the Image section, find and enable the Add Width and Height Attributes option by checking the box.
4. Click Save Changes to apply the settings.

How Does It Work

RapidLoad automatically adds missing width and height attributes to images, optimizing their layout and reducing layout shifts. Here’s how it works:

1. Scanning for Missing Dimensions:
   • RapidLoad scans the HTML for images that have a src attribute but lack either the width attribute or the height attribute.
2. Calculating Image Dimensions:
   • Using the PHP getimagesize function, RapidLoad retrieves the actual dimensions of the image. It then updates the HTML with the calculated width and height values.

Example:

Original HTML:

<img src="example.jpg" alt="Sample Image">

If the image’s dimensions are 800 x 600, RapidLoad updates it to:

<img src="example.jpg" width="800" height="600" alt="Sample Image">

How to Verify

To verify the image optimization, follow these steps:

1. Inspect the HTML: Open the page in your browser and inspect the image elements. Ensure that the width and height attributes are correctly added to images that previously lacked them.
2. Check for Visual Consistency: Ensure that images are properly aligned and there are no unexpected layout shifts when the page loads.

Automatic Exclusions:

RapidLoad skips the following:

• Images that already have width or height attributes with values.
• Images with width="auto" or height="auto".
• Images encoded in Base64 (e.g., <img src="data:image/png;base64,...">).
• Images with query strings in their URLs.
• Images that are dynamically injected into the DOM (Loaded via JavaScript).
• SVG images.
• Images hosted on external domains.