How to add width and height to Images in WordPress automatically

WordPress

Now we know that Google uses Core Web Vitals data for ranking. Google has recommended website owners to 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.

Also see: WordPress How-To articles

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

Image elements do not have explicit width and height.

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

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

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 that 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 inset width and height attributes to images in your post. Just add the following code in 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 search for all the images within the post content and adds height and width attributes.

Advertisement

Tags: |

Deepanker Verma is the founder of Techlomedia. He is a tech blogger, developer and gadget freak.


Similar Articles

0 Comments

Leave a comment

Comment policy: We love comments and appreciate the time that readers spend to share ideas and give feedback. However, all comments are manually moderated and those deemed to be spam or solely promotional will be deleted.

2020 UseThisTip | Part of Techlomedia Internet Pvt Ltd Developed By Deepanker