Lazy Way to Add Explicit Width and Height to Image Elements

Disclosure: CyberNaira content is reader-supported. This means if you make purchases through our affiliate links, we may earned commission but at no additional cost to you. 

First, I’m not a web developer or a technical guy who knows much about CSS, HTML, JS, and everything else. 

So, do not expect to read all the technical jargon concerning CSS, image attributes, width, height, aspect ratio, etc., in this post. 

I’m just a blogger who accidentally finds a lazy man’s way to add explicit width and height to image elements’ error warnings in Google Pagespeed Insights. 

Trust me, I have read countless posts and Google documents on how to add explicit width and height to image elements, yet it is not working for me. Most posts are for advanced web users who can play with codes. 

And as per WordPress plugins, most plugins I have tried fixing the issue do not work. 

But surprisingly, the method I show you here is so simple that you’d wonder why you never thought of it because you already have the tool to fix the image elements’ height and widths in your WordPress Gutenberg editor. 

Yes, that’s true. 

WordPress gave you the tool to fix it without needing plugins or adding CSS attributes. 

Without delay, let’s go straight to it.

Fixing Image Elements do Not Have Explicit Width and Height

Before you attempt to specify the height and width of the image elements, run a Page Speed Insight test to pinpoint affected images on an individual post.

Note their image alt and the exact post you want to fix. 

Here is an example of the error message checking with one of my website posts.

As you can see in the image above, many images are missing explicit width and height elements. 

How do we fix this?

Now, open the post in your WordPress Gutenberg editor. Click the image you want to add explicit width and height dimensions, and make sure you’re on the block tab in the right-side panel.

Pay attention to the details in the image above.

In the image dimension section, set the image elements’ height and width to 75%. The option is already there, so you do not need to enter any settings.

Repeat this step for all the images on that particular post with the image elements error notice.

After specifying the image width and height to 75 percent, update the post to allow the changes to take effect. 

Return to the Pagespeed Insights testing tool and rerun the test.

After the test, scroll the page to check if the error resurfaces. The warning should now go away if you follow the steps correctly. 

That’s it. I told you the process is so simple you would wonder if it will work. It worked for me, so I believe it should work for you, too.

If you see any image with the warnings notice, review the post to see that you’ve set the height and width to 75%. And repeat the process to fix it.

Who Should Use This Method?

This method can be suitable if you have a small site with a few hundred pages. 

I say this because running the page speed and performance test for each post is less time-consuming and challenging than when you have thousands of pages. 

If you have a WordPress blog with less than 300 or 400 pages, you can quickly check through each post for image elements missing height and width attributes. 

Besides, doing this on large websites with thousands of pages will be challenging. On such sites, you need a system that automatically adds native heights and widths in pixels for images as attributes. 

This method described in this post does not set it and forgets it. You have to find pages on your website with image height manually and width attribute errors. 

Some WordPress Plugins to Try

If you’re looking for an automated way to fix the image elements’ width and height attributes warning in PSI, here are some plugins I came across during my search.

Specify Missing Image Dimension 

I didn’t try this plugin because it was last updated over a year ago. But from a reliable source, I read the plugin was reliable when it was maintained. 

The plugin scans the HTML of the web page, looking for images with missing width and height attributes. After finding images with missing dimensions, it uses the getimagesize() function to determine the image dimension.

Then, it adds the width and height attributes to the images. 

If you have no problem using a plugin’s last updates over 12 months, you should try this plugin. From a few user reviews and its description on wordpress.org, the plugin seems worth the try.

WP Rocket

WP Rocket is another good plugin to automate the fixes for missing image dimensions. In their recent update, they’ve included this feature in the Media Tab. 

Go to the WP Rocket Media Tab setting, scroll down the page, locate the feature, and check the box. 

That’s all you need to fix Image elements do not have explicit width and height in GTmetrix, PSI, or any other testing tool. 

After checking the box and saving the setting, WP Rocket will scan your website HTML for images with src attributes but missing width and height. 

Then, using the PHP function getimagesize, the plugin will add the missing height and width dimensions using the data. 

However, you need to read this feature’s documentation or help article. This function has limitations, as there are instances where it does not work on specific images. 

First, the images must be hosted on your site for the function to work. Though you can get it to work on externally hosted images using the helper plugin, it will increase the time to generate the cache. 

Another concern is that the feature won’t work on images with the width and height set to “auto” values. Also, it will not act on images with query strings in their URL and dynamically inject them into a page load. 

Read this post to learn more about WP Rocket, add missing image dimension feature limitations and benefits, and learn how it helps with cumulative layout shifts. 

FAQ – Add Explicit Width and Height to Image Elements

Sure, I know you have more questions on your mind. So, I’d prepare a few questions and answers you might want to check out.

If your question remains unanswered, please comment below, and I will try my best to provide the answer.

Conclusion

Fixing image elements that do not have explicit width and height can be challenging to resolve, especially on image-heavy sites. But with patience and special attention to the page speed testing tools recommendations, you can fix the affected images yourself.

The solution in this article is suitable for small sites and will work 100% of the time for individual pages. 

If you want to fix the missing image dimension in bulk and automatically, you should try WP Rocket or other image optimization and resizing plugins listed in the FAQ section. 

I hope this article helps you resolve your performance issue and improve your website Cumulative Layout Shift (CLS) error.