Now we know that Google uses Core Web Vitals data for ranking. Google has recommended website owners improve page experience to avoid loss in ranking. To check if your page is fine, you can run Page Speed Insights or run the Chrome Lighthouse test. PageSpeed score should be 90 or higher. You should also fix all the errors PageSpeed test lists.

In the PageSpeed Insights test, one of the most common errors people get is “Image elements do not have explicit width and height.”

The error is self-explanatory. You need to add width and height attributes to the <img> tag. The reason for defining width and height attributes is to avoid layout shifts as the image is downloaded. Here’s an example of how to add width and height attributes in img tag.

Let me first explain the width and height attributes.

The code for an image with height and width attributes will be like the code below.

<img width="600" height="350" src="image-name.jpg">

The above code specifies the image width as 600 pixels and height as 350 Pixels

Example

If you have not specified the size of the image, the layout may move after the image is loaded. So, the content after the image will further shift. Google’s Core Web Vitals include Cumulative Layout Shift which indicates how much the layout moved during the web page loading.

In WordPress, you can edit the theme’s code to specify the height and width attributes in the logo, featured images, sidebar, and footer images. But the img tag doesn’t have width and height attributes in the images added within a post using the post editor. You can go and add these attributes manually but not many people do it. Now when it is important to add height and width attributes, you can either go and update all the articles to add height and width attributes in images or try an automated way.

I have made a code that can automatically insert width and height attributes to images in your post. Just add the following code to the functions.php file of your theme.

function add_img_size_attr($content){
  $pattern = '/<img [^>]*?src="(https?:\/\/[^"]+?)"[^>]*?>/iu';
  preg_match_all($pattern, $content, $imgs);
  foreach ( $imgs[0] as $i => $img ) {
    if ( false !== strpos( $img, 'width=' ) && false !== strpos( $img, 'height=' ) ) {
      continue;
    }
    $img_url = $imgs[1][$i];
    $img_size = @getimagesize( $img_url );
      
    if ( false === $img_size ) {
      continue;
    }
    $replaced_img = str_replace( '<img ', '<img ' . $img_size[3] . ' ', $imgs[0][$i] );
    $content = str_replace( $img, $replaced_img, $content );
  }
  return $content;
}
add_filter('the_content','add_img_size_attr');

The code searches for all the images within the post content and adds height and width attributes.

After adding this code, check the PageSpeed insights again. It will surely remove the “Image elements do not have explicit width and height” error. It should also solve the Cumulative Layout Shift error.